feat: 去除unplugin-icons插件相关逻辑，引入vite-plugin-svg-icons插件封装SvgIcon组件

config/unplugin/auto-import.ts

@@ -1,14 +1,9 @@
-/*
- * @Author: RenXiaoDong
- * @Date: 2025-06-24 16:29:10
- */
 /**
  * 自动引入API
  * */
 import AutoImport from 'unplugin-auto-import/vite';
 
 import { ArcoResolver } from 'unplugin-vue-components/resolvers';
-import IconsResolver from 'unplugin-icons/resolver';
 
 import { layoutsResolver } from '../utils';
 
@@ -31,9 +26,6 @@ export function configAutoImport() {
           enable: true,
         },
       }),
-      IconsResolver({
-        enabledCollections: [],
-      }),
       layoutsResolver(),
     ],
     eslintrc: {

config/unplugin/component.ts

@@ -5,7 +5,6 @@ import { kebabCase } from 'unplugin-vue-components';
 import Components from 'unplugin-vue-components/vite';
 
 import { ArcoResolver } from 'unplugin-vue-components/resolvers';
-import IconsResolver from 'unplugin-icons/resolver';
 
 import { getSep, getPath, setResolve, layoutsResolver } from '../utils';
 
@@ -20,11 +19,6 @@ export function configComponents() {
         },
         sideEffect: true,
       }),
-      IconsResolver({
-        prefix: false,
-        customCollections: ['i'],
-        enabledCollections: [],
-      }),
       layoutsResolver(),
       {
         type: 'component',

config/unplugin/icons.ts

@@ -1,14 +1,14 @@
-/**
+// /**
- * 自动引入 svg 图标
+//  * 自动引入 svg 图标
- * */
+//  * */
-import Icons from 'unplugin-icons/vite';
+import { resolve } from '../utils';
-import { FileSystemIconLoader } from 'unplugin-icons/loaders';
+
+import { createSvgIconsPlugin } from "vite-plugin-svg-icons";
 
 export function configIcons() {
-  return Icons({
+  return createSvgIconsPlugin({
-    compiler: 'vue3',
+    iconDirs: [resolve( "src/assets/svg")],
-    customCollections: {
+    symbolId: "icon-[dir]-[name]",
-      i: FileSystemIconLoader('./src/assets', (svg) => svg.replace(/^<svg /, '<svg class="eo-i" ')),
+  })
-    },
+};
-  });
+
-}

package.json

@@ -69,6 +69,7 @@
     "vite": "^4.0.4",
     "vite-plugin-compression": "^0.5.1",
     "vite-plugin-progress": "^0.0.6",
+    "vite-plugin-svg-icons": "^2.0.1",
     "vue-eslint-parser": "^9.1.0",
     "vue-tsc": "^1.0.24"
   },

src/assets/svg/svg-taskCenter.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+  <path d="M9.2041 2.32617C11.6897 2.32617 13.7595 4.10156 14.2178 6.45312C15.2902 7.15513 16 8.36571 16 9.74316C16 11.9142 14.2393 13.6738 12.0684 13.6738H3.93066C1.75983 13.6736 3.83345e-05 11.9141 0 9.74316C0 9.63068 0.00538693 9.51927 0.0146484 9.40918C0.00563418 9.29576 7.49779e-06 9.18117 0 9.06543C0 6.69938 1.91817 4.78127 4.28418 4.78125C4.46476 4.78126 4.64268 4.79275 4.81738 4.81445C5.70979 3.32391 7.34052 2.32633 9.2041 2.32617ZM9.2041 3.52539C7.77983 3.52555 6.53145 4.28786 5.84668 5.43164L5.44531 6.10156L4.66992 6.00586C4.53994 5.9897 4.41129 5.98048 4.28418 5.98047C2.6345 5.98048 1.28692 7.27669 1.2041 8.90625L1.2002 9.06543C1.2002 9.14467 1.20305 9.22752 1.20996 9.31445L1.21777 9.41211L1.20996 9.50977L1.2002 9.74316C1.20023 11.2514 2.42259 12.4744 3.93066 12.4746H12.0684C13.5297 12.4746 14.7226 11.3265 14.7959 9.88379L14.7998 9.74316C14.7998 8.78847 14.3094 7.94732 13.5605 7.45703L13.1377 7.17969L13.04 6.68262C12.6894 4.8834 11.104 3.52539 9.2041 3.52539ZM6.79688 6.74121C6.93478 6.61179 7.13694 6.57633 7.31055 6.65137C7.48407 6.72651 7.59654 6.89783 7.59668 7.08691V10.749C7.59642 11.0109 7.38396 11.2235 7.12207 11.2236C6.86013 11.2236 6.64772 11.0109 6.64746 10.749V8.18457L6.05859 8.73828C5.86754 8.91775 5.5662 8.90785 5.38672 8.7168C5.20757 8.52576 5.21736 8.2253 5.4082 8.0459L6.79688 6.74121ZM8.87793 6.6123C9.14003 6.61235 9.35254 6.82578 9.35254 7.08789V9.65137L9.94141 9.09863C10.1325 8.91917 10.4338 8.92809 10.6133 9.11914C10.7925 9.31017 10.7827 9.61061 10.5918 9.79004L9.20312 11.0947C9.0652 11.2242 8.86308 11.2596 8.68945 11.1846C8.51588 11.1094 8.40339 10.9382 8.40332 10.749V7.08789C8.40332 6.82582 8.61588 6.61241 8.87793 6.6123Z" fill="currentColor"/>
+</svg>

src/components/_base/navbar/components/right-side/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="right-wrap">
-    <!-- 下载中心 -->
+    <SvgIcon
-    <icon-download
+      name="svg-taskCenter"
       size="16"
       class="cursor-pointer color-#737478 hover:color-#6D4CFE mr-12px"
       @click="openDownloadCenter"

src/components/svg-icon/index.vue

@@ -0,0 +1,35 @@
+<template>
+    <svg
+      aria-hidden="true"
+      class="svg-icon"
+      :width="props.size"
+      :height="props.size"
+    >
+      <use :xlink:href="symbolId" :fill="props.color" />
+    </svg>
+  </template>
+  
+  <script setup>
+  import { computed } from "vue";
+  const props = defineProps({
+    prefix: {
+      type: String,
+      default: "icon",
+    },
+    name: {
+      type: String,
+      required: true,
+    },
+    color: {
+      type: String,
+      default: "#333",
+    },
+    size: {
+      type: String,
+      default: "12",
+    },
+  });
+  
+  const symbolId = computed(() => `#${props.prefix}-${props.name}`);
+  </script>
+  

src/main.ts

@@ -5,18 +5,25 @@
 import App from './App.vue';
 import router from './router';
 import store from './stores';
-import NoData from '@/components/no-data';
-import '@/api/index';
 
+import NoData from '@/components/no-data';
+import SvgIcon from "@/components/svg-icon";
+
+import '@/api/index';
 import '@arco-design/web-vue/dist/arco.css'; // Arco 默认样式
 import './core';
 
 import 'normalize.css';
 import 'uno.css';
+import 'virtual:svg-icons-register'
+
 // import '@/styles/vars.css'; // 优先加载
 
 const app = createApp(App);
+
+app.component('NoData', NoData);
+app.component('SvgIcon', SvgIcon);
+
 app.use(store);
 app.use(router);
-app.component('NoData', NoData);
 app.mount('#app');

src/router/routes/modules/propertyMarketing.ts

@@ -5,10 +5,10 @@
 import type { AppRouteRecordRaw } from '../types';
 import { MENU_GROUP_IDS } from '@/router/constants';
 
-import IconRepository from '@/assets/svg/icon-repository.svg';
+import IconRepository from '@/assets/svg/svg-repository.svg';
-import IconMediaAccount from '@/assets/svg/icon-mediaAccount.svg';
+import IconMediaAccount from '@/assets/svg/svg-mediaAccount.svg';
-import IconPutAccount from '@/assets/svg/icon-putAccount.svg';
+import IconPutAccount from '@/assets/svg/svg-putAccount.svg';
-import IconIntelligentSolution from '@/assets/svg/icon-intelligentSolution.svg';
+import IconIntelligentSolution from '@/assets/svg/svg-intelligentSolution.svg';
 
 const COMPONENTS: AppRouteRecordRaw[] = [
   {

tsconfig.json

@@ -16,7 +16,7 @@
     "paths": {
       "@/*": ["src/*"]
     },
-    "types": ["unplugin-icons/types/vue", "unplugin-vue-define-options/macros-global"]
+    "types": ["unplugin-vue-define-options/macros-global"]
   },
 
   "references": [