feat: Router 集成 Element Plus 的 icon.

src/layout/components/Sidebar/SidebarItem.vue

@@ -71,8 +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" />
           <template v-if="theOnlyOneChild.meta.title" #title>
+            <component v-if="theOnlyOneChild.meta.icon" class="svg-icon" :is="theOnlyOneChild.meta.icon" />
             {{ theOnlyOneChild.meta.title }}
           </template>
         </el-menu-item>
@@ -80,7 +80,7 @@ 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" />
+        <component v-if="props.item.meta && props.item.meta.icon" class="svg-icon" :is="props.item.meta.icon" />
         <span v-if="props.item.meta && props.item.meta.title">{{ props.item.meta.title }}</span>
       </template>
       <template v-if="props.item.children">
@@ -99,11 +99,10 @@ const resolvePath = (routePath: string) => {
 
 <style lang="scss" scoped>
 .svg-icon {
-  margin-right: 20px;
-  min-width: 1em;
-  font-size: 16px;
+  width: 1em;
+  height: 1em;
+  margin-right: 8px;
 }
-
 .simple-mode {
   &.first-level {
     ::v-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

@@ -52,7 +52,7 @@ export const constantRoutes: RouteRecordRaw[] = [
         name: "UnoCSS",
         meta: {
           title: "unocss",
-          icon: "unocss"
+          icon: "Female"
         }
       }
     ]
@@ -67,7 +67,7 @@ export const constantRoutes: RouteRecordRaw[] = [
         name: "Link",
         meta: {
           title: "外链",
-          icon: "link"
+          icon: "Link"
         }
       }
     ]
@@ -87,7 +87,10 @@ export const constantRoutes: RouteRecordRaw[] = [
         component: () => import("@/views/menu/menu1/index.vue"),
         redirect: "/menu/menu1/menu1-1",
         name: "Menu1",
-        meta: { title: "menu1" },
+        meta: {
+          title: "menu1",
+          icon: "Operation"
+        },
         children: [
           {
             path: "menu1-1",
@@ -100,7 +103,10 @@ export const constantRoutes: RouteRecordRaw[] = [
             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",
+              icon: "Tools"
+            },
             children: [
               {
                 path: "menu1-2-1",