feat: 路由的 icon 配置项支持 Element Plus 的 Icon (#19)

src/layout/components/Sidebar/SidebarItem.vue

@@ -71,7 +71,8 @@ const resolvePath = (routePath: string) => {
     <template v-if="!alwaysShowRootMenu && theOnlyOneChild && !theOnlyOneChild.children">
       <SidebarItemLink v-if="theOnlyOneChild.meta" :to="resolvePath(theOnlyOneChild.path)">
         <el-menu-item :index="resolvePath(theOnlyOneChild.path)">
-          <svg-icon v-if="theOnlyOneChild.meta.icon" :name="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" />
           <template v-if="theOnlyOneChild.meta.title" #title>
             {{ theOnlyOneChild.meta.title }}
           </template>
@@ -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>
-        <svg-icon v-if="props.item.meta && props.item.meta.icon" :name="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,11 +101,15 @@ const resolvePath = (routePath: string) => {
 
 <style lang="scss" scoped>
 .svg-icon {
-  margin-right: 20px;
+  margin-right: 8px;
   min-width: 1em;
   font-size: 16px;
 }
-
+.el-icon {
+  width: 1em;
+  height: 1em;
+  margin-right: 8px;
+}
 .simple-mode {
   &.first-level {
     :deep(.el-sub-menu) {

src/main.ts

@@ -7,6 +7,7 @@ import App from "./App.vue"
 import ElementPlus from "element-plus"
 import loadSvg from "@/icons"
 import * as directives from "@/directives"
+import * as ElementPlusIconsVue from "@element-plus/icons-vue"
 
 import "uno.css"
 import "normalize.css"
@@ -23,5 +24,9 @@ loadSvg(app)
 Object.keys(directives).forEach((key) => {
   app.directive(key, (directives as { [key: string]: Directive })[key])
 })
+/** Element Plus Icons */
+for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
+  app.component(key, component)
+}
 
 app.use(store).use(router).mount("#app")

src/router/index.ts

@@ -50,7 +50,7 @@ export const constantRoutes: RouteRecordRaw[] = [
         name: "Dashboard",
         meta: {
           title: "首页",
-          icon: "dashboard",
+          svgIcon: "dashboard",
           affix: true
         }
       }
@@ -67,7 +67,7 @@ export const constantRoutes: RouteRecordRaw[] = [
         name: "UnoCSS",
         meta: {
           title: "unocss",
-          icon: "unocss"
+          svgIcon: "unocss"
         }
       }
     ]
@@ -82,7 +82,7 @@ export const constantRoutes: RouteRecordRaw[] = [
         name: "Link",
         meta: {
           title: "外链",
-          icon: "link"
+          svgIcon: "link"
         }
       }
     ]
@@ -94,7 +94,7 @@ export const constantRoutes: RouteRecordRaw[] = [
     name: "Menu",
     meta: {
       title: "多级菜单",
-      icon: "menu"
+      svgIcon: "menu"
     },
     children: [
       {
@@ -102,20 +102,26 @@ export const constantRoutes: RouteRecordRaw[] = [
         component: () => import("@/views/menu/menu1/index.vue"),
         redirect: "/menu/menu1/menu1-1",
         name: "Menu1",
-        meta: { title: "menu1" },
+        meta: {
+          title: "menu1"
+        },
         children: [
           {
             path: "menu1-1",
             component: () => import("@/views/menu/menu1/menu1-1/index.vue"),
             name: "Menu1-1",
-            meta: { title: "menu1-1" }
+            meta: {
+              title: "menu1-1"
+            }
           },
           {
             path: "menu1-2",
             component: () => import("@/views/menu/menu1/menu1-2/index.vue"),
             redirect: "/menu/menu1/menu1-2/menu1-2-1",
             name: "Menu1-2",
-            meta: { title: "menu1-2" },
+            meta: {
+              title: "menu1-2"
+            },
             children: [
               {
                 path: "menu1-2-1",
@@ -162,7 +168,7 @@ export const asyncRoutes: RouteRecordRaw[] = [
     name: "Permission",
     meta: {
       title: "权限管理",
-      icon: "lock",
+      svgIcon: "lock",
       roles: ["admin", "editor"], // 可以在根路由中设置角色
       alwaysShow: true // 将始终显示根菜单
     },

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 的时候该路由不会在侧边栏出现
      */