feat(projects): refactor icon system, unify icon usage [重构图标系统，统一图标用法]

src/layouts/common/GlobalHeader/components/MessageList.vue

@@ -10,8 +10,7 @@
         <n-thing class="px-15px" :class="{ 'opacity-30': item.isRead }">
           <template #avatar>
             <n-avatar v-if="item.avatar" :src="item.avatar" />
-            <svg-icon v-else-if="item.svgIcon" class="text-34px text-primary" :icon="item.svgIcon" />
-            <Icon v-else-if="item.icon" class="text-34px text-primary" :icon="item.icon" />
+            <svg-icon v-else class="text-34px text-primary" :icon="item.icon" :local-icon="item.svgIcon" />
           </template>
           <template #header>
             <n-ellipsis :line-clamp="1">
@@ -36,8 +35,6 @@
   </n-scrollbar>
 </template>
 <script lang="ts" setup>
-import { Icon } from '@iconify/vue';
-
 defineOptions({ name: 'MessageList' });
 
 interface Props {

src/layouts/common/GlobalHeader/components/UserAvatar.vue

@@ -1,7 +1,7 @@
 <template>
   <n-dropdown :options="options" @select="handleDropdown">
     <hover-container class="px-12px" :inverted="theme.header.inverted">
-      <icon-custom-avatar class="text-32px" />
+      <icon-local-avatar class="text-32px" />
       <span class="pl-8px text-16px font-medium">{{ auth.userInfo.userName }}</span>
     </hover-container>
   </n-dropdown>
@@ -10,18 +10,19 @@
 <script lang="ts" setup>
 import type { DropdownOption } from 'naive-ui';
 import { useAuthStore, useThemeStore } from '@/store';
-import { iconifyRender } from '@/utils';
+import { useIconRender } from '@/composables';
 
 defineOptions({ name: 'UserAvatar' });
 
 const auth = useAuthStore();
 const theme = useThemeStore();
+const { iconRender } = useIconRender();
 
 const options: DropdownOption[] = [
   {
     label: '用户中心',
     key: 'user-center',
-    icon: iconifyRender('carbon:user-avatar')
+    icon: iconRender({ icon: 'carbon:user-avatar' })
   },
   {
     type: 'divider',
@@ -30,7 +31,7 @@ const options: DropdownOption[] = [
   {
     label: '退出登录',
     key: 'logout',
-    icon: iconifyRender('carbon:logout')
+    icon: iconRender({ icon: 'carbon:logout' })
   }
 ];
 

src/layouts/common/GlobalSearch/components/SearchResult.vue

@@ -11,7 +11,7 @@
           @click="handleTo"
           @mouseenter="handleMouse(item)"
         >
-          <Icon :icon="item.meta?.icon ?? 'mdi:bookmark-minus-outline'" />
+          <svg-icon :icon="item.meta.icon" :local-icon="item.meta.localIcon" />
           <span class="flex-1 ml-5px">{{ item.meta?.title }}</span>
           <icon-ant-design-enter-outlined class="icon text-20px p-2px mr-3px" />
         </div>
@@ -22,7 +22,6 @@
 
 <script lang="ts" setup>
 import { computed } from 'vue';
-import { Icon } from '@iconify/vue';
 import { useThemeStore } from '@/store';
 
 defineOptions({ name: 'SearchResult' });

src/layouts/common/GlobalTab/components/TabDetail/components/ContextMenu.vue

@@ -14,7 +14,7 @@
 import { computed } from 'vue';
 import type { DropdownOption } from 'naive-ui';
 import { useAppStore, useTabStore } from '@/store';
-import { iconifyRender } from '@/utils';
+import { useIconRender } from '@/composables';
 
 defineOptions({ name: 'ContextMenu' });
 
@@ -42,6 +42,7 @@ const emit = defineEmits<Emits>();
 
 const app = useAppStore();
 const tab = useTabStore();
+const { iconRender } = useIconRender();
 
 const dropdownVisible = computed({
   get() {
@@ -66,33 +67,33 @@ const options = computed<Option[]>(() => [
     label: '重新加载',
     key: 'reload-current',
     disabled: props.currentPath !== tab.activeTab,
-    icon: iconifyRender('ant-design:reload-outlined')
+    icon: iconRender({ icon: 'ant-design:reload-outlined' })
   },
   {
     label: '关闭',
     key: 'close-current',
     disabled: props.currentPath === tab.homeTab.fullPath,
-    icon: iconifyRender('ant-design:close-outlined')
+    icon: iconRender({ icon: 'ant-design:close-outlined' })
   },
   {
     label: '关闭其他',
     key: 'close-other',
-    icon: iconifyRender('ant-design:column-width-outlined')
+    icon: iconRender({ icon: 'ant-design:column-width-outlined' })
   },
   {
     label: '关闭左侧',
     key: 'close-left',
-    icon: iconifyRender('mdi:format-horizontal-align-left')
+    icon: iconRender({ icon: 'mdi:format-horizontal-align-left' })
   },
   {
     label: '关闭右侧',
     key: 'close-right',
-    icon: iconifyRender('mdi:format-horizontal-align-right')
+    icon: iconRender({ icon: 'mdi:format-horizontal-align-right' })
   },
   {
     label: '关闭所有',
     key: 'close-all',
-    icon: iconifyRender('ant-design:line-outlined')
+    icon: iconRender({ icon: 'ant-design:line-outlined' })
   }
 ]);
 

src/layouts/common/GlobalTab/components/TabDetail/index.vue

@@ -13,7 +13,11 @@
       @close="tab.removeTab(item.fullPath)"
       @contextmenu="handleContextMenu($event, item.fullPath)"
     >
-      <Icon v-if="item.meta.icon" :icon="item.meta.icon" class="inline-block align-text-bottom mr-4px text-16px" />
+      <svg-icon
+        :icon="item.meta.icon"
+        :local-icon="item.meta.localIcon"
+        class="inline-block align-text-bottom mr-4px text-16px"
+      />
       {{ item.meta.title }}
     </component>
   </div>
@@ -29,7 +33,6 @@
 <script setup lang="ts">
 import { computed, nextTick, reactive, ref, watch } from 'vue';
 import { ButtonTab, ChromeTab } from '@soybeanjs/vue-admin-tab';
-import { Icon } from '@iconify/vue';
 import { useTabStore, useThemeStore } from '@/store';
 import { ContextMenu } from './components';