feat: 配合unplugin-icons集成iconify图标解决方案

src/components/AppIcons/IconLogo.vue

@@ -0,0 +1,9 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 448 512">
+    <path
+      d="M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm-92.2 312.9c-63.4 0-85.4-28.6-97.1-64.1c-16.3-51-21.5-84.3-63-84.3c-22.4 0-45.1 16.1-45.1 61.2c0 35.2 18 57.2 43.3 57.2c28.6 0 47.6-21.3 47.6-21.3l11.7 31.9s-19.8 19.4-61.2 19.4c-51.3 0-79.9-30.1-79.9-85.8c0-57.9 28.6-92 82.5-92c73.5 0 80.8 41.4 100.8 101.9c8.8 26.8 24.2 46.2 61.2 46.2c24.9 0 38.1-5.5 38.1-19.1c0-19.9-21.8-22-49.9-28.6c-30.4-7.3-42.5-23.1-42.5-48c0-40 32.3-52.4 65.2-52.4c37.4 0 60.1 13.6 63 46.6l-36.7 4.4c-1.5-15.8-11-22.4-28.6-22.4c-16.1 0-26 7.3-26 19.8c0 11 4.8 17.6 20.9 21.3c32.7 7.1 71.8 12 71.8 57.5c.1 36.7-30.7 50.6-76.1 50.6z"
+    ></path>
+  </svg>
+</template>
+
+<script setup name="IconLogo"></script>

src/components/AppIcons/index.js

@@ -0,0 +1,12 @@
+export { default as IconGitee } from '~icons/simple-icons/gitee'
+
+export { default as IconChart } from '~icons/mdi/chart-bar'
+export { default as IconGithub } from '~icons/mdi/github'
+export { default as IconVue } from '~icons/mdi/vuejs'
+export { default as IconHome } from '~icons/mdi/home'
+export { default as IconLink } from '~icons/mdi/link-variant'
+export { default as IconAlert } from '~icons/mdi/alert-circle-outline'
+export { default as IconCircle } from '~icons/mdi/circle-outline'
+export { default as IconMenu } from '~icons/mdi/menu'
+
+export { default as IconLogo } from './IconLogo.vue'

src/layout/components/sidebar/SideLogo.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="logo">
     <n-icon size="36" color="#316c72">
-      <LastfmSquare />
+      <IconLogo />
     </n-icon>
     <router-link to="/">
       <n-gradient-text type="primary">{{ title }}</n-gradient-text>
@@ -10,7 +10,7 @@
 </template>
 
 <script setup>
-import { LastfmSquare } from '@vicons/fa'
+import { IconLogo } from '@/components/AppIcons'
 const title = import.meta.env.VITE_APP_TITLE
 </script>
 

src/layout/components/sidebar/SideMenu.vue

@@ -16,7 +16,7 @@ import { computed, h } from 'vue'
 import { usePermissionStore } from '@/store/modules/permission'
 
 import { NIcon } from 'naive-ui'
-import { ListAlt, CircleRegular } from '@vicons/fa'
+import { IconCircle, IconMenu } from '@/components/AppIcons'
 
 import { isExternal } from '@/utils/is'
 
@@ -68,10 +68,10 @@ function generateOptions(routes, basePath) {
         path: resolvePath(basePath, route.path),
       }
       if (route.children && route.children.length) {
-        curOption.icon = renderIcon(route.meta?.icon || ListAlt, { size: 16 })
+        curOption.icon = renderIcon(route.meta?.icon || IconMenu, { size: 16 })
         curOption.children = generateOptions(route.children, resolvePath(basePath, route.path))
       } else {
-        curOption.icon = (route.meta?.icon && renderIcon(route.meta?.icon)) || renderIcon(CircleRegular, { size: 8 })
+        curOption.icon = (route.meta?.icon && renderIcon(route.meta?.icon)) || renderIcon(IconCircle, { size: 8 })
       }
       options.push(curOption)
     }

src/router/routes/index.js

@@ -1,6 +1,7 @@
 import Layout from '@/layout/index.vue'
 import Home from '@/views/dashboard/index.vue'
-import { ChartBar, Dove, Github, HouseDamage, LastfmSquare, Link, TimesCircle } from '@vicons/fa'
+
+import { IconAlert, IconChart, IconGitee, IconGithub, IconHome, IconLink, IconVue } from '@/components/AppIcons'
 
 export const basicRoutes = [
   {
@@ -39,7 +40,7 @@ export const basicRoutes = [
     redirect: '/home',
     meta: {
       title: 'Dashboard',
-      icon: ChartBar,
+      icon: IconChart,
     },
     children: [
       {
@@ -48,7 +49,7 @@ export const basicRoutes = [
         component: Home,
         meta: {
           title: '首页',
-          icon: HouseDamage,
+          icon: IconHome,
         },
       },
     ],
@@ -106,7 +107,7 @@ export const basicRoutes = [
     redirect: '/error-page/404',
     meta: {
       title: '错误页',
-      icon: TimesCircle,
+      icon: IconAlert,
     },
     children: [
       {
@@ -126,7 +127,7 @@ export const basicRoutes = [
     component: Layout,
     meta: {
       title: '外部链接',
-      icon: Link,
+      icon: IconLink,
     },
     children: [
       {
@@ -134,7 +135,7 @@ export const basicRoutes = [
         path: 'https://github.com/zclzone/vue-naive-admin',
         meta: {
           title: '源码 - github',
-          icon: Github,
+          icon: IconGithub,
         },
       },
       {
@@ -142,7 +143,7 @@ export const basicRoutes = [
         path: 'https://gitee.com/zclzone/vue-naive-admin',
         meta: {
           title: '源码 - gitee',
-          icon: LastfmSquare,
+          icon: IconGitee,
         },
       },
       {
@@ -150,7 +151,7 @@ export const basicRoutes = [
         path: 'https://zclzone.github.io/vue-naive-admin-docs',
         meta: {
           title: '文档 - vuepress',
-          icon: LastfmSquare,
+          icon: IconVue,
         },
       },
     ],