svg图标改用resolveComponent

src/components/SvgIcon/index.vue

@@ -1,13 +1,9 @@
-<template>
-  <svg :class="svgClass" aria-hidden="true" v-if="iconType == 0">
-    <use :xlink:href="iconName" :fill="color" />
-  </svg>
-  <el-icon v-else><component :is="iconName" /></el-icon>
-</template>
-
 <script>
+import { h, resolveComponent } from 'vue'
+
 export default defineComponent({
   props: {
+    // svg 图标组件名字
     name: {
       type: String,
       required: true,
@@ -17,33 +13,37 @@ export default defineComponent({
       type: String,
       default: '',
     },
+    // svg 颜色
     color: {
       type: String,
       default: '',
     },
   },
   setup(props) {
-    return {
-      iconType: computed(() => {
-        if (props.name.startsWith('ele')) {
-          return 1
+    if (props.name?.startsWith('ele')) {
+      return () =>
+        h(
+          'i',
+          {
+            class: 'el-icon',
+          },
+          [h(resolveComponent(props.name.replace('ele-', '')))],
+        )
     } else {
-          return 0
-        }
-      }),
-      iconName: computed(() => {
-        if (props.name?.startsWith('ele-')) {
-          return props.name.replace('ele-', '')
-        } else {
-          return `#icon-${props.name}`
-        }
-      }),
-      svgClass: computed(() => {
-        if (props.className) {
-          return `svg-icon ${props.className}`
-        }
-        return 'svg-icon'
+      return () =>
+        h(
+          'svg',
+          {
+            name: props.name,
+            'aria-hidden': true,
+            style: `color: ${props.color}`,
+            class: 'svg-icon',
+          },
+          h('use', {
+            'xlink:href': `#icon-${props.name}`,
+            fill: `${props.color}`,
           }),
+        )
     }
   },
 })

src/components/TopNav/index.vue

@@ -1,14 +1,14 @@
 <template>
   <el-menu :default-active="activeMenu" mode="horizontal" @select="handleSelect" :ellipsis="false">
     <template v-for="(item, index) in topMenus">
-      <el-menu-item :style="{'--theme': theme}" :index="item.path" :key="index" v-if="index < visibleNumber">
+      <el-menu-item :style="{ '--theme': theme }" :index="item.path" :key="index" v-if="index < visibleNumber">
         <svg-icon :name="item.meta.icon" />
         &nbsp;{{ item.meta.title }}
       </el-menu-item>
     </template>
 
     <!-- 顶部菜单超出数量折叠 -->
-    <el-sub-menu :style="{'--theme': theme}" index="more" v-if="topMenus.length > visibleNumber">
+    <el-sub-menu :style="{ '--theme': theme }" index="more" v-if="topMenus.length > visibleNumber">
       <template #title>更多菜单</template>
       <template v-for="(item, index) in topMenus">
         <el-menu-item :index="item.path" :key="index" v-if="index >= visibleNumber">
@@ -67,8 +67,7 @@ const childrenMenus = computed(() => {
           router.children[item].path = '/redirect/' + router.children[item].path
         } else {
           if (!isHttp(router.children[item].path)) {
-            router.children[item].path =
-              router.path + '/' + router.children[item].path
+            router.children[item].path = router.path + '/' + router.children[item].path
           }
         }
         router.children[item].parentPath = router.path
@@ -125,7 +124,7 @@ function handleSelect(key, keyPath) {
     window.open(key, '_blank')
   } else if (key.indexOf('/redirect') !== -1) {
     // /redirect 路径内部打开
-    router.push({ path: key.replace("/redirect", "") }).catch(err => {});
+    router.push({ path: key.replace('/redirect', '') }).catch((err) => {})
   } else {
     // 显示左侧联动菜单
     activeRoutes(key)