feat: 动态引入icon

src/icons/about.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1713020573889" class="icon" viewBox="0 0 1026 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15777" xmlns:xlink="http://www.w3.org/1999/xlink" width="200.390625" height="200"><path d="M505.448517 0.043084a511.978458 511.978458 0 1 0 518.441019 502.643647A511.978458 511.978458 0 0 0 505.448517 0.043084z m56.726926 170.180778a58.881113 58.881113 0 0 1 67.497861 67.497861 86.167482 86.167482 0 0 1-89.039732 80.422983c-49.546302 0-71.806235-25.132182-71.806235-67.497861A87.603607 87.603607 0 0 1 562.893505 170.223862z m-134.995722 660.617365c-35.903118 0-61.753362-21.541871-36.62118-116.326101L433.642282 546.488535c6.462561-27.286369 7.898686-38.057305 0-38.057305a270.709507 270.709507 0 0 0-84.013296 37.339242l-17.233496-28.722494a473.203091 473.203091 0 0 1 229.779953-114.889976c35.903118 0 40.929554 41.647617 23.696058 106.99129l-46.674053 176.643339c-7.898686 30.876681-5.026436 41.647617 0 41.647617a183.823963 183.823963 0 0 0 79.704921-40.211492l20.105746 27.28637A371.238237 371.238237 0 0 1 433.642282 830.841227z" fill="#00b42a" p-id="15778"></path></svg>

src/icons/classify.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1713020953397" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7918" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M0 0m349.206261 0l325.587478 0q349.206261 0 349.206261 349.206261l0 325.587478q0 349.206261-349.206261 349.206261l-325.587478 0q-349.206261 0-349.206261-349.206261l0-325.587478q0-349.206261 349.206261-349.206261Z" fill="#3271FD" p-id="7919"></path><path d="M442.189913 298.284522c9.728 0 18.053565 3.372522 24.976696 10.128695 6.912 6.745043 10.373565 14.981565 10.373565 24.731826v140.566261c0 9.750261-3.450435 18.086957-10.373565 25.021218a34.003478 34.003478 0 0 1-24.976696 10.395826H301.924174a33.090783 33.090783 0 0 1-24.698435-10.395826A34.626783 34.626783 0 0 1 267.130435 473.711304V333.145043c0-9.750261 3.361391-17.986783 10.095304-24.742956 6.733913-6.745043 14.970435-10.117565 24.698435-10.117565h140.265739zM442.189913 579.417043c9.728 0 18.053565 3.372522 24.976696 10.128696 6.912 6.733913 10.373565 14.981565 10.373565 24.731826v141.133913c0 9.73913-3.450435 17.986783-10.373565 24.731826-6.92313 6.745043-15.248696 10.128696-24.976696 10.128696H301.924174c-9.728 0-17.964522-3.383652-24.698435-10.128696C270.491826 773.398261 267.130435 765.150609 267.130435 755.400348V614.266435c0-9.73913 3.361391-17.986783 10.095304-24.731826 6.733913-6.745043 14.970435-10.128696 24.698435-10.128696h140.265739zM723.311304 579.417043c9.71687 0 17.953391 3.372522 24.687305 10.128696 6.733913 6.733913 10.095304 14.981565 10.095304 24.731826v141.133913c0 9.73913-3.361391 17.986783-10.095304 24.731826-6.733913 6.745043-14.970435 10.128696-24.687305 10.128696H583.034435a34.482087 34.482087 0 0 1-24.976696-10.128696 33.224348 33.224348 0 0 1-10.373565-24.742956V614.266435c0-9.73913 3.450435-17.986783 10.373565-24.731826a34.482087 34.482087 0 0 1 24.976696-10.128696h140.276869z" fill="#FFFFFF" p-id="7920"></path><path d="M667.826087 243.287534m23.611218 23.611218l110.185682 110.185682q23.611218 23.611218 0 47.222436l-110.185682 110.185683q-23.611218 23.611218-47.222436 0l-110.185683-110.185683q-23.611218-23.611218 0-47.222436l110.185683-110.185682q23.611218-23.611218 47.222436 0Z" fill="#FFFFFF" fill-opacity=".7" p-id="7921"></path></svg>

src/icons/github.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1713020459632" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11989" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M512.416 15.072C229.056 15.072 0 242.848 0 524.608 0 749.856 146.784 940.512 350.368 1008c25.44 5.056 34.784-10.976 34.784-24.48 0-11.808-0.864-52.288-0.864-94.496-142.528 30.368-172.224-60.736-172.224-60.736-22.912-59.04-56.832-74.24-56.832-74.24-46.656-31.2 3.392-31.2 3.392-31.2 51.744 3.36 78.912 52.288 78.912 52.288 45.824 77.6 119.616 55.68 149.312 42.176 4.256-32.896 17.824-55.68 32.224-68.32-113.696-11.808-233.312-55.68-233.312-251.392 0-55.68 20.352-101.248 52.608-136.672-5.088-12.64-22.912-64.96 5.088-134.976 0 0 43.264-13.504 140.832 52.32 40.736-10.976 84.832-16.864 128.096-16.864s87.392 5.92 128.096 16.864c97.568-65.792 140.832-52.32 140.832-52.32 28 70.016 10.176 122.336 5.088 134.976 33.088 35.424 52.608 80.992 52.608 136.672 0 195.712-119.616 238.752-234.144 251.392 18.656 16.032 34.784 46.4 34.784 94.496 0 68.32-0.832 123.168-0.832 140.032 0 13.504 9.344 29.536 34.784 24.48 203.616-67.488 350.368-258.144 350.368-483.392C1024.8 242.848 794.912 15.072 512.384 15.072z" fill="#00b42a" p-id="11990"></path><path d="M192.64 746.656c-0.768 2.624-4.576 3.488-7.648 1.76s-5.344-5.248-3.808-7.84c0.768-2.624 4.576-3.488 7.648-1.76s4.576 5.248 3.808 7.84z m18.304 23.552c-2.304 2.624-6.88 0.864-9.152-2.624-3.04-3.488-3.808-8.736-1.536-11.36s6.112-0.864 9.152 2.624c3.04 4.352 3.808 9.6 1.536 11.36z m18.336 30.56c-3.04 2.624-7.648 0-9.92-4.352-3.04-4.352-3.04-10.464 0-12.224 3.04-2.624 7.648 0 9.92 4.352 3.04 4.352 3.04 9.6 0 12.224z m25.184 29.664c-2.304 3.488-7.648 2.624-12.224-1.76-3.808-4.352-5.344-10.464-2.304-13.088 2.304-3.488 7.648-2.624 12.224 1.76 3.808 3.488 4.576 9.6 2.304 13.088z m34.336 16.576c-0.768 4.352-6.112 6.112-11.456 4.352s-8.384-6.976-7.648-10.464c0.768-4.352 6.112-6.112 11.456-4.352s8.384 6.112 7.648 10.464z m37.408 3.488c0 4.352-4.576 7.84-9.92 7.84s-9.92-3.488-9.92-7.84 4.576-7.84 9.92-7.84 9.92 3.488 9.92 7.84z m35.104-6.976c0.768 4.352-3.04 8.736-8.384 9.6s-9.92-1.76-10.688-6.112c-0.768-4.352 3.04-8.736 8.384-9.6s9.92 1.76 10.688 6.112z" fill="#00b42a" p-id="11991"></path></svg>

src/layout/components/Menu/icon-common.vue

@@ -0,0 +1,21 @@
+<template>
+  <div>
+    <SvgIcon v-if="props.svgIcon" :name="props.svgIcon" :size="25" />
+    <component v-else-if="props.icon" :is="props.icon"></component>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  svgIcon: {
+    type: String,
+    default: ""
+  },
+  icon: {
+    type: String,
+    default: ""
+  }
+});
+</script>
+
+<style lang="scss" scoped></style>

src/layout/components/Menu/index.vue

@@ -7,8 +7,8 @@
 <script setup lang="ts">
 import MenuItem from "@/layout/components/Menu/menu-item.vue";
 import { storeToRefs } from "pinia";
-import { useRoutesListStore } from "@/store/route-list";
 import { useThemeConfig } from "@/store/theme-config";
+import { useRoutesListStore } from "@/store/route-list";
 
 const routerStore = useRoutesListStore();
 const { routeTree } = storeToRefs(routerStore);
@@ -18,4 +18,14 @@ const { collapsed } = storeToRefs(themeStore);
 console.log("路由树", routeTree.value);
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss">
+:deep(.arco-menu-pop .arco-menu-pop-header .arco-menu-has-icon) {
+  padding: 0 !important;
+}
+:deep(.arco-menu-vertical .arco-menu-pop-header) {
+  padding: 0 !important;
+}
+:deep(.arco-menu-vertical .arco-menu-item) {
+  padding: 0 !important;
+}
+</style>

src/layout/components/Menu/menu-item.vue

@@ -1,20 +1,24 @@
 <template>
   <template v-for="item in props.routeTree" :key="item.name">
     <a-sub-menu v-if="item.children && item.children.length > 0" :key="item.name">
-      <template #icon><SvgIcon :name="item.meta.icon" :size="25" /></template>
+      <template #icon v-if="item.meta.svgIcon || item.meta.icon">
+        <IconCommon :svg-icon="item.meta.svgIcon" :icon="item.meta.icon" />
+      </template>
       <template #title>{{ item.meta.title }}</template>
       <MenuItem :route-tree="item.children" />
     </a-sub-menu>
     <a-menu-item v-else :key="item.name">
-      <template #icon><SvgIcon :name="item.meta.icon" :size="25" /></template>
+      <template #icon v-if="item.meta.svgIcon || item.meta.icon">
+        <IconCommon :svg-icon="item.meta.svgIcon" :icon="item.meta.icon" />
+      </template>
       <div>{{ item.meta.title }}</div>
     </a-menu-item>
   </template>
 </template>
 
 <script setup lang="ts">
+import IconCommon from "@/layout/components/Menu/icon-common.vue";
 defineOptions({ name: "MenuItem" });
-// 通过defineProps接收父组件的值
 const props = defineProps({
   routeTree: {
     type: Array,

src/main.ts

@@ -7,6 +7,8 @@ import pinia from "@/store/index";
 import piniaPluginPersist from "pinia-plugin-persist";
 import "virtual:svg-icons-register";
 import "@arco-design/web-vue/dist/arco.css";
+// 额外引入图标库
+import ArcoVueIcon from "@arco-design/web-vue/es/icon";
 
 pinia.use(piniaPluginPersist);
 const app = createApp(App);
@@ -14,6 +16,7 @@ app.use(ArcoVue, {
   // 用于改变使用组件时的前缀名称
   componentPrefix: "arco"
 });
+app.use(ArcoVueIcon);
 app.use(pinia);
 app.use(router);
 app.mount("#app");

src/router/route.ts

@@ -44,7 +44,7 @@ export const dynamicRoutes = [
           isLink: "", // 是否外链
           isIframe: false, // 是否内嵌窗口
           roles: ["admin", "common"], // 路由权限
-          icon: "home" // 菜单图标
+          svgIcon: "home" // 菜单图标
         }
       },
       {
@@ -59,7 +59,7 @@ export const dynamicRoutes = [
           isLink: "", // 是否外链
           isIframe: false, // 是否内嵌窗口
           roles: ["common"], // 路由权限
-          icon: "home" // 菜单图标
+          svgIcon: "home" // 菜单图标
         }
       },
       {
@@ -75,7 +75,7 @@ export const dynamicRoutes = [
           isAffix: true,
           isIframe: false,
           roles: ["admin"],
-          icon: "set"
+          svgIcon: "set"
         },
         children: [
           {
@@ -90,7 +90,7 @@ export const dynamicRoutes = [
               isAffix: false,
               isIframe: false,
               roles: ["admin"],
-              icon: "common"
+              icon: "icon-menu"
             }
           }
         ]
@@ -108,7 +108,7 @@ export const dynamicRoutes = [
           isAffix: true,
           isIframe: false,
           roles: ["admin"],
-          icon: "switch"
+          svgIcon: "switch"
         },
         children: [
           {
@@ -123,7 +123,7 @@ export const dynamicRoutes = [
               isAffix: false,
               isIframe: false,
               roles: ["admin"],
-              icon: "common"
+              icon: "icon-menu"
             },
             children: [
               {
@@ -138,12 +138,27 @@ export const dynamicRoutes = [
                   isAffix: false,
                   isIframe: false,
                   roles: ["admin"],
-                  icon: "common"
+                  icon: "icon-menu"
                 }
               }
             ]
           }
         ]
+      },
+      {
+        path: "/about-project",
+        name: "about-project",
+        component: () => import("@/views/about-project/about-project.vue"),
+        meta: {
+          title: "about-project",
+          isHide: false,
+          isKeepAlive: true,
+          isAffix: true,
+          isLink: "",
+          isIframe: false,
+          roles: ["admin", "common"],
+          svgIcon: "about"
+        }
       }
     ]
   }

src/views/about-project/about-project.vue

@@ -0,0 +1,7 @@
+<template>
+  <div>关于项目</div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style lang="scss" scoped></style>