feat: Router 集成 Element Plus 的 icon, 可选用自定义的 icon 或者组件库的 icon

src/layout/components/Sidebar/SidebarItem.vue

@@ -72,7 +72,8 @@ const resolvePath = (routePath: string) => {
       <SidebarItemLink v-if="theOnlyOneChild.meta" :to="resolvePath(theOnlyOneChild.path)">
         <el-menu-item :index="resolvePath(theOnlyOneChild.path)">
           <template v-if="theOnlyOneChild.meta.title" #title>
-            <component v-if="theOnlyOneChild.meta.icon" class="svg-icon" :is="theOnlyOneChild.meta.icon" />
+            <svg-icon v-if="theOnlyOneChild.meta.svgIcon" :name="theOnlyOneChild.meta.svgIcon" />
+            <component v-else-if="theOnlyOneChild.meta.elIcon" class="el-icon" :is="theOnlyOneChild.meta.elIcon" />
             {{ theOnlyOneChild.meta.title }}
           </template>
         </el-menu-item>
@@ -80,7 +81,8 @@ const resolvePath = (routePath: string) => {
     </template>
     <el-sub-menu v-else :index="resolvePath(props.item.path)" popper-append-to-body>
       <template #title>
-        <component v-if="props.item.meta && props.item.meta.icon" class="svg-icon" :is="props.item.meta.icon" />
+        <svg-icon v-if="props.item.meta && props.item.meta.svgIcon" :name="props.item.meta.svgIcon" />
+        <component v-else-if="props.item.meta && props.item.meta.elIcon" class="el-icon" :is="props.item.meta.elIcon" />
         <span v-if="props.item.meta && props.item.meta.title">{{ props.item.meta.title }}</span>
       </template>
       <template v-if="props.item.children">
@@ -99,6 +101,11 @@ const resolvePath = (routePath: string) => {
 
 <style lang="scss" scoped>
 .svg-icon {
+  margin-right: 8px;
+  min-width: 1em;
+  font-size: 16px;
+}
+.el-icon {
   width: 1em;
   height: 1em;
   margin-right: 8px;

src/router/index.ts

@@ -35,7 +35,7 @@ export const constantRoutes: RouteRecordRaw[] = [
         name: "Dashboard",
         meta: {
           title: "首页",
-          icon: "dashboard",
+          svgIcon: "dashboard",
           affix: true
         }
       }
@@ -52,7 +52,7 @@ export const constantRoutes: RouteRecordRaw[] = [
         name: "UnoCSS",
         meta: {
           title: "unocss",
-          icon: "Female"
+          elIcon: "Female"
         }
       }
     ]
@@ -67,7 +67,8 @@ export const constantRoutes: RouteRecordRaw[] = [
         name: "Link",
         meta: {
           title: "外链",
-          icon: "Link"
+          svgIcon: "link",
+          elIcon: "Hide"
         }
       }
     ]
@@ -79,7 +80,7 @@ export const constantRoutes: RouteRecordRaw[] = [
     name: "Menu",
     meta: {
       title: "多级菜单",
-      icon: "menu"
+      elIcon: "menu"
     },
     children: [
       {
@@ -89,14 +90,17 @@ export const constantRoutes: RouteRecordRaw[] = [
         name: "Menu1",
         meta: {
           title: "menu1",
-          icon: "Operation"
+          elIcon: "EditPen"
         },
         children: [
           {
             path: "menu1-1",
             component: () => import("@/views/menu/menu1/menu1-1/index.vue"),
             name: "Menu1-1",
-            meta: { title: "menu1-1" }
+            meta: {
+              title: "menu1-1",
+              svgIcon: "bug"
+            }
           },
           {
             path: "menu1-2",
@@ -105,7 +109,7 @@ export const constantRoutes: RouteRecordRaw[] = [
             name: "Menu1-2",
             meta: {
               title: "menu1-2",
-              icon: "Tools"
+              elIcon: "Tools"
             },
             children: [
               {
@@ -153,7 +157,7 @@ export const asyncRoutes: RouteRecordRaw[] = [
     name: "Permission",
     meta: {
       title: "权限管理",
-      icon: "lock",
+      svgIcon: "lock",
       roles: ["admin", "editor"], // 可以在根路由中设置角色
       alwaysShow: true // 将始终显示根菜单
     },
@@ -184,7 +188,7 @@ export const asyncRoutes: RouteRecordRaw[] = [
     name: "ErrorPage",
     meta: {
       title: "错误页面",
-      icon: "404",
+      svgIcon: "404",
       hidden: true
     },
     children: [

types/vue-router.d.ts

@@ -9,7 +9,11 @@ declare module "vue-router" {
     /**
      * 设置该路由的图标，记得将 svg 导入 @/icons/svg
      */
-    icon?: string
+    svgIcon?: string
+    /**
+     * 设置该路由的图标，集成 Element Plus 的 icon 库
+     */
+    elIcon?: string
     /**
      * 默认 false，设置 true 的时候该路由不会在侧边栏出现
      */