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

src/components/business/LoadingEmptyWrapper.vue

@@ -7,13 +7,13 @@
       </div>
       <div v-show="isEmpty" class="absolute-center">
         <div class="relative">
-          <icon-custom-empty-data :class="iconClass" />
+          <icon-local-empty-data :class="iconClass" />
           <p class="absolute-lb w-full text-center" :class="descClass">{{ emptyDesc }}</p>
         </div>
       </div>
       <div v-show="!network" class="absolute-center">
         <div class="relative" :class="{ 'cursor-pointer': showNetworkReload }" @click="handleReload">
-          <icon-custom-network-error :class="iconClass" />
+          <icon-local-network-error :class="iconClass" />
           <p class="absolute-lb w-full text-center" :class="descClass">{{ networkErrorDesc }}</p>
         </div>
       </div>

src/components/common/ExceptionBase.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="flex-col-center wh-full">
     <div class="text-400px text-primary">
-      <icon-custom-no-permission v-if="type === '403'" />
-      <icon-custom-not-found v-if="type === '404'" />
-      <icon-custom-service-error v-if="type === '500'" />
+      <icon-local-no-permission v-if="type === '403'" />
+      <icon-local-not-found v-if="type === '404'" />
+      <icon-local-service-error v-if="type === '500'" />
     </div>
     <router-link :to="{ name: routeHomePath }">
       <n-button type="primary">回到首页</n-button>

src/components/common/SystemLogo.vue

@@ -1,6 +1,6 @@
 <template>
-  <icon-custom-logo-fill v-if="fill" />
-  <icon-custom-logo v-else />
+  <icon-local-logo-fill v-if="fill" />
+  <icon-local-logo v-else />
 </template>
 
 <script lang="ts" setup>

src/components/custom/IconSelect.vue

@@ -3,7 +3,7 @@
     <template #trigger>
       <n-input v-model:value="modelValue" readonly placeholder="点击选择图标">
         <template #suffix>
-          <Icon :icon="modelValue ? modelValue : emptyIcon" class="text-30px p-5px" />
+          <svg-icon :icon="selectedIcon" class="text-30px p-5px" />
         </template>
       </n-input>
     </template>
@@ -12,10 +12,10 @@
     </template>
     <div v-if="iconsList.length > 0" class="grid grid-cols-9 h-auto overflow-auto">
       <template v-for="iconItem in iconsList" :key="iconItem">
-        <Icon
+        <svg-icon
           :icon="iconItem"
           class="border-1px border-[#d9d9d9] text-30px m-2px p-5px"
-          :style="{ 'border-color': modelValue === iconItem ? theme.themeColor : '' }"
+          :class="{ 'border-primary': modelValue === iconItem }"
           @click="handleChange(iconItem)"
         />
       </template>
@@ -26,8 +26,6 @@
 
 <script lang="ts" setup>
 import { computed, ref } from 'vue';
-import { Icon } from '@iconify/vue';
-import { useThemeStore } from '@/store';
 
 defineOptions({ name: 'IconSelect' });
 
@@ -50,11 +48,6 @@ interface Emits {
 
 const emit = defineEmits<Emits>();
 
-const theme = useThemeStore();
-
-const searchValue = ref('');
-const iconsList = computed(() => props.icons.filter(v => v.includes(searchValue.value)));
-
 const modelValue = computed({
   get() {
     return props.value;
@@ -64,6 +57,12 @@ const modelValue = computed({
   }
 });
 
+const selectedIcon = computed(() => modelValue.value || props.emptyIcon);
+
+const searchValue = ref('');
+
+const iconsList = computed(() => props.icons.filter(v => v.includes(searchValue.value)));
+
 function handleChange(iconItem: string) {
   modelValue.value = iconItem;
 }

src/components/custom/SvgIcon.vue

@@ -1,26 +1,53 @@
 <template>
-  <svg aria-hidden="true" width="1em" height="1em">
-    <use :xlink:href="symbolId" fill="currentColor" />
-  </svg>
+  <template v-if="renderLocalIcon">
+    <svg aria-hidden="true" width="1em" height="1em" v-bind="bindAttrs">
+      <use :xlink:href="symbolId" fill="currentColor" />
+    </svg>
+  </template>
+  <template v-else>
+    <Icon :icon="icon" v-bind="bindAttrs" />
+  </template>
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed, useAttrs } from 'vue';
+import { Icon } from '@iconify/vue';
 
 defineOptions({ name: 'SvgIcon' });
 
+/**
+ * 图标组件
+ * - 支持iconify和本地svg图标
+ * - 同时传递了icon和localIcon，localIcon会优先渲染
+ */
 interface Props {
-  /** 前缀 */
-  prefix?: string;
-  /** 图标名称(图片的文件名) */
-  icon: string;
+  /** 图标名称 */
+  icon?: string;
+  /** 本地svg的文件名 */
+  localIcon?: string;
 }
 
-const props = withDefaults(defineProps<Props>(), {
-  prefix: 'icon-custom'
+const props = defineProps<Props>();
+
+const attrs = useAttrs();
+
+const bindAttrs = computed<{ class: string; style: string }>(() => ({
+  class: (attrs.class as string) || '',
+  style: (attrs.style as string) || ''
+}));
+
+const symbolId = computed(() => {
+  const { VITE_ICON_LOCAL_PREFFIX: preffix } = import.meta.env;
+
+  const defaultLocalIcon = 'no-icon';
+
+  const icon = props.localIcon || defaultLocalIcon;
+
+  return `#${preffix}-${icon}`;
 });
 
-const symbolId = computed(() => `#${props.prefix}-${props.icon}`);
+/** 渲染本地icon */
+const renderLocalIcon = computed(() => props.localIcon || !props.icon);
 </script>
 
 <style scoped></style>