refactor: 重构图标使用方式，集成自定应图标

src/layout/components/header/components/FullScreen.vue

@@ -1,12 +1,11 @@
 <template>
   <n-icon mr20 size="18" style="cursor: pointer" @click="toggle">
-    <IconFullscreenExit v-if="isFullscreen" />
-    <IconFullscreen v-else />
+    <icon-ant-design:fullscreen-outlined v-if="isFullscreen" />
+    <icon-ant-design:fullscreen-outlined v-else />
   </n-icon>
 </template>
 
 <script setup>
-import { IconFullscreen, IconFullscreenExit } from '@/components/AppIcons'
 import { useFullscreen } from '@vueuse/core'
 
 const { isFullscreen, toggle } = useFullscreen()

src/layout/components/header/components/GithubSite.vue

@@ -1,11 +1,10 @@
 <template>
   <n-icon mr20 size="18" style="cursor: pointer" @click="handleLinkClick">
-    <IconGithub />
+    <icon-mdi:github />
   </n-icon>
 </template>
 
 <script setup>
-import { IconGithub } from '@/components/AppIcons'
 function handleLinkClick() {
   window.open('https://github.com/zclzone/vue-naive-admin')
 }

src/layout/components/header/components/MenuCollapse.vue

@@ -1,12 +1,11 @@
 <template>
   <n-icon size="20" style="cursor: pointer" @click="appStore.switchCollapsed">
-    <IconMenuExpand v-if="appStore.collapsed" />
-    <IconMenuCollapse v-else />
+    <icon-mdi:format-indent-increase v-if="appStore.collapsed" />
+    <icon-mdi:format-indent-decrease v-else />
   </n-icon>
 </template>
 
 <script setup>
-import { IconMenuCollapse, IconMenuExpand } from '@/components/AppIcons'
 import { useAppStore } from '@/store/modules/app'
 
 const appStore = useAppStore()

src/layout/components/header/components/UserAvatar.vue

@@ -9,7 +9,6 @@
 
 <script setup>
 import { useUserStore } from '@/store/modules/user'
-import { IconExit } from '@/components/AppIcons'
 import { renderIcon } from '@/utils/icon'
 
 const userStore = useUserStore()
@@ -18,7 +17,7 @@ const options = [
   {
     label: '退出登录',
     key: 'logout',
-    icon: renderIcon(IconExit, { size: '14px' }),
+    icon: renderIcon('mdi:exit-to-app', { size: '14px' }),
   },
 ]
 

src/layout/components/sidebar/components/SideLogo.vue

@@ -1,8 +1,6 @@
 <template>
   <router-link h-60 f-c-c to="/">
-    <n-icon size="36" color="#316c72">
-      <IconLogo />
-    </n-icon>
+    <icon-custom-logo text-36></icon-custom-logo>
     <h2 v-show="!appStore.collapsed" ml-10 color-primary text-16 font-bold max-w-140 flex-shrink-0>
       {{ title }}
     </h2>
@@ -10,7 +8,6 @@
 </template>
 
 <script setup>
-import { IconLogo } from '@/components/AppIcons'
 import { useAppStore } from '@/store/modules/app'
 const title = import.meta.env.VITE_APP_TITLE
 

src/layout/components/sidebar/components/SideMenu.vue

@@ -16,8 +16,6 @@ import { useRouter } from 'vue-router'
 import { computed } from 'vue'
 import { usePermissionStore } from '@/store/modules/permission'
 
-import { IconCircle } from '@/components/AppIcons'
-
 import { isExternal } from '@/utils/is'
 import { useAppStore } from '@/store/modules/app'
 import { renderIcon } from '@/utils/icon'
@@ -47,7 +45,7 @@ function getMenuItem(route, basePath = '') {
     label: (route.meta && route.meta.title) || route.name,
     key: route.name,
     path: resolvePath(basePath, route.path),
-    icon: route.meta?.icon ? renderIcon(route.meta?.icon, { size: 16 }) : renderIcon(IconCircle, { size: 8 }),
+    icon: route.meta?.icon ? renderIcon(route.meta?.icon, { size: 16 }) : renderIcon('mdi:circle-outline', { size: 8 }),
     index: route.meta?.index || 0,
   }
 
@@ -64,7 +62,7 @@ function getMenuItem(route, basePath = '') {
       path: resolvePath(menuItem.path, singleRoute.path),
       icon: singleRoute.meta?.icon
         ? renderIcon(singleRoute.meta?.icon, { size: 16 })
-        : renderIcon(IconCircle, { size: 8 }),
+        : renderIcon('mdi:circle-outline', { size: 8 }),
       index: menuItem.index,
     }
     const visibleItems = singleRoute.children ? singleRoute.children.filter((item) => item.name && !item.isHidden) : []

src/layout/components/tags/ContextMenu.vue

@@ -13,7 +13,6 @@
 <script setup>
 import { computed } from 'vue'
 import { useTagsStore } from '@/store/modules/tags'
-import { IconRefresh, IconClose, IconExpand, IconExpandLeft, IconExpandRight } from '@/components/AppIcons'
 import { renderIcon } from '@/utils/icon'
 import { useAppStore } from '@/store/modules/app'
 
@@ -46,31 +45,31 @@ const options = computed(() => [
     label: '重新加载',
     key: 'reload',
     disabled: props.currentPath !== tagsStore.activeTag,
-    icon: renderIcon(IconRefresh, { size: '14px' }),
+    icon: renderIcon('mdi:refresh', { size: '14px' }),
   },
   {
     label: '关闭',
     key: 'close',
     disabled: tagsStore.tags.length <= 1,
-    icon: renderIcon(IconClose, { size: '14px' }),
+    icon: renderIcon('mdi:close', { size: '14px' }),
   },
   {
     label: '关闭其他',
     key: 'close-other',
     disabled: tagsStore.tags.length <= 1,
-    icon: renderIcon(IconExpand, { size: '14px' }),
+    icon: renderIcon('mdi:arrow-expand-horizontal', { size: '14px' }),
   },
   {
     label: '关闭左侧',
     key: 'close-left',
     disabled: tagsStore.tags.length <= 1 || props.currentPath === tagsStore.tags[0].path,
-    icon: renderIcon(IconExpandLeft, { size: '14px' }),
+    icon: renderIcon('mdi:arrow-expand-left', { size: '14px' }),
   },
   {
     label: '关闭右侧',
     key: 'close-right',
     disabled: tagsStore.tags.length <= 1 || props.currentPath === tagsStore.tags[tagsStore.tags.length - 1].path,
-    icon: renderIcon(IconExpandRight, { size: '14px' }),
+    icon: renderIcon('mdi:arrow-expand-right', { size: '14px' }),
   },
 ])