更新依赖

src/layout/components/SidebarItem/index.vue

@@ -2,7 +2,7 @@
     <div v-if="item.meta.sidebar !== false" class="sidebar-item">
         <el-sub-menu v-if="item.path == undefined" :title="item.meta.title" :index="JSON.stringify(item)">
             <template #title>
-                <svg-icon v-if="item.meta.icon" :name="item.meta.icon" class="icon" />
+                <svg-icon v-if="item.meta.icon" :name="item.meta.icon" />
                 <span class="title">{{ item.meta.title }}</span>
             </template>
             <SidebarItem v-for="route in item.children" :key="route.path" :item="route" />
@@ -10,14 +10,14 @@
         <router-link v-else-if="!hasChildren" v-slot="{ href, navigate, isActive, isExactActive }" custom :to="resolveRoutePath(basePath, item.path)">
             <a :href="isExternalLink(resolveRoutePath(basePath, item.path)) ? resolveRoutePath(basePath, item.path) : href" :class="[isActive && 'router-link-active', isExactActive && 'router-link-exact-active']" :target="isExternalLink(resolveRoutePath(basePath, item.path)) ? '_blank' : '_self'" @click="navigate">
                 <el-menu-item :title="item.meta.title" :index="resolveRoutePath(basePath, item.path)">
-                    <svg-icon v-if="item.meta.icon" :name="item.meta.icon" class="icon" />
+                    <svg-icon v-if="item.meta.icon" :name="item.meta.icon" />
                     <span class="title">{{ item.meta.title }}</span>
                 </el-menu-item>
             </a>
         </router-link>
         <el-sub-menu v-else :title="item.meta.title" :index="resolveRoutePath(basePath, item.path)">
             <template #title>
-                <svg-icon v-if="item.meta.icon" :name="item.meta.icon" class="icon" />
+                <svg-icon v-if="item.meta.icon" :name="item.meta.icon" />
                 <span class="title">{{ item.meta.title }}</span>
             </template>
             <SidebarItem v-for="route in item.children" :key="route.path" :item="route" :base-path="resolveRoutePath(basePath, item.path)" />
@@ -69,10 +69,9 @@ const hasChildren = computed(() => {
 }
 :deep(.el-sub-menu),
 :deep(.el-menu-item) {
-    .icon {
+    .svg-icon {
         width: 20px;
         font-size: 20px;
-        margin-right: 10px;
         vertical-align: -0.25em;
         transition: transform 0.3s;
         color: unset;
@@ -81,14 +80,12 @@ const hasChildren = computed(() => {
             vertical-align: middle;
         }
     }
-    &:hover > .icon,
-    .el-sub-menu__title:hover > .icon {
-        transform: scale(1.2);
+    .svg-icon + .title {
+        margin-left: 10px;
     }
-}
-:deep(.el-sub-menu) {
-    > .el-sub-menu__title > .icon.active {
-        display: none;
+    &:hover > .svg-icon,
+    .el-sub-menu__title:hover > .svg-icon {
+        transform: scale(1.2);
     }
 }
 a {

src/main.js

@@ -10,7 +10,7 @@ app.use(router)
 
 import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
-import * as ElementIcons from '@element-plus/icons'
+import * as ElementIcons from '@element-plus/icons-vue'
 // 将 element-plus 的图标库注册到全局
 for (var key in ElementIcons) {
     app.component(`ElIcon${ElementIcons[key].name}`, ElementIcons[key])

src/views/component_basic_example/button.vue

@@ -101,7 +101,7 @@
 
 <script setup>
 import Alert from './components/alert.vue'
-import { Search, Edit, Check, Message, Star, Delete, Share, ArrowLeft } from '@element-plus/icons'
+import { Search, Edit, Check, Message, Star, Delete, Share, ArrowLeft } from '@element-plus/icons-vue'
 </script>
 
 <style lang="scss" scoped>

src/views/component_basic_example/icon.vue

@@ -22,8 +22,8 @@
 
 <script setup>
 import Alert from './components/alert.vue'
-import { Search } from '@element-plus/icons'
-import * as ElementIcons from '@element-plus/icons'
+import { Search } from '@element-plus/icons-vue'
+import * as ElementIcons from '@element-plus/icons-vue'
 import { hyphen } from 'naming-style'
 
 const icon = Object.keys(ElementIcons)

src/views/component_basic_example/link.vue

@@ -34,7 +34,7 @@
 
 <script setup>
 import Alert from './components/alert.vue'
-import { Edit } from '@element-plus/icons'
+import { Edit } from '@element-plus/icons-vue'
 </script>
 
 <style lang="scss" scoped>