refactor: 重构图标模块，使用@iconify/json替换不再维护更新的@iconify-icons/*依赖，优化使用体验，确保图标库可持续更新并支持Tree-shaking (#1202)

refactor: 重构图标模块，使用`@iconify/json`替换不再维护更新的`@iconify-icons/*`依赖，优化使用体验，确保图标库可持续更新并支持`Tree-shaking`

build/optimize.ts

@@ -57,8 +57,8 @@ const include = [
 
 /**
  * 在预构建中强制排除的依赖项
- * 温馨提示：所有以 `@iconify-icons/` 开头引入的的本地图标模块，都应该加入到下面的 `exclude` 里，因为平台推荐的使用方式是哪里需要哪里引入而且都是单个的引入，不需要预构建，直接让浏览器加载就好
+ * 温馨提示：平台推荐的使用方式是哪里需要哪里引入而且都是单个的引入，不需要预构建，直接让浏览器加载就好
  */
-const exclude = ["@iconify-icons/ep", "@iconify-icons/ri"];
+const exclude = ["@iconify/json"];
 
 export { include, exclude };

build/plugins.ts

@@ -3,6 +3,7 @@ import vue from "@vitejs/plugin-vue";
 import { pathResolve } from "./utils";
 import { viteBuildInfo } from "./info";
 import svgLoader from "vite-svg-loader";
+import Icons from "unplugin-icons/vite";
 import type { PluginOption } from "vite";
 import vueJsx from "@vitejs/plugin-vue-jsx";
 import { configCompressPlugin } from "./compress";
@@ -57,6 +58,11 @@ export function getPluginsList(
     }),
     // svg组件化支持
     svgLoader(),
+    // 自动按需加载图标
+    Icons({
+      compiler: "vue3",
+      scale: 1
+    }),
     VITE_CDN ? cdn : null,
     configCompressPlugin(VITE_COMPRESSION),
     // 线上环境删除console

package.json

@@ -54,7 +54,7 @@
     "@logicflow/extension": "^1.2.28",
     "@pureadmin/descriptions": "^1.2.1",
     "@pureadmin/table": "^3.2.1",
-    "@pureadmin/utils": "^2.5.0",
+    "@pureadmin/utils": "^2.6.0",
     "@vue-flow/background": "^1.3.2",
     "@vue-flow/core": "^1.42.1",
     "@vueuse/core": "^12.5.0",
@@ -119,8 +119,7 @@
     "@commitlint/types": "^19.5.0",
     "@eslint/js": "^9.20.0",
     "@faker-js/faker": "^9.5.0",
-    "@iconify-icons/ep": "^1.2.12",
+    "@iconify/json": "^2.2.319",
-    "@iconify-icons/ri": "^1.2.10",
     "@iconify/vue": "4.2.0",
     "@intlify/unplugin-vue-i18n": "^6.0.3",
     "@types/codemirror": "^5.60.15",
@@ -166,6 +165,7 @@
     "svgo": "^3.3.2",
     "tailwindcss": "3.4.17",
     "typescript": "^5.7.3",
+    "unplugin-icons": "^22.1.0",
     "vite": "^6.1.0",
     "vite-plugin-cdn-import": "^1.0.1",
     "vite-plugin-compression": "^0.5.1",

pnpm-lock.yaml

@@ -30,8 +30,8 @@ importers:
         specifier: ^3.2.1
         version: 3.2.1(element-plus@2.9.4(vue@3.5.13(typescript@5.7.3)))(typescript@5.7.3)
       '@pureadmin/utils':
-        specifier: ^2.5.0
+        specifier: ^2.6.0
-        version: 2.5.0(echarts@5.6.0)(vue@3.5.13(typescript@5.7.3))
+        version: 2.6.0(echarts@5.6.0)(vue@3.5.13(typescript@5.7.3))
       '@vue-flow/background':
         specifier: ^1.3.2
         version: 1.3.2(@vue-flow/core@1.42.1(vue@3.5.13(typescript@5.7.3)))(vue@3.5.13(typescript@5.7.3))
@@ -219,12 +219,9 @@ importers:
       '@faker-js/faker':
         specifier: ^9.5.0
         version: 9.5.0
-      '@iconify-icons/ep':
+      '@iconify/json':
-        specifier: ^1.2.12
+        specifier: ^2.2.319
-        version: 1.2.12
+        version: 2.2.319
-      '@iconify-icons/ri':
-        specifier: ^1.2.10
-        version: 1.2.10
       '@iconify/vue':
         specifier: 4.2.0
         version: 4.2.0(vue@3.5.13(typescript@5.7.3))
@@ -360,6 +357,9 @@ importers:
       typescript:
         specifier: ^5.7.3
         version: 5.7.3
+      unplugin-icons:
+        specifier: ^22.1.0
+        version: 22.1.0(@vue/compiler-sfc@3.5.13)
       vite:
         specifier: ^6.1.0
         version: 6.1.0(@types/node@20.17.19)(jiti@2.4.2)(sass@1.85.0)(yaml@2.7.0)
@@ -401,6 +401,12 @@ packages:
     resolution: {integrity: sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==}
     engines: {node: '>=6.0.0'}
 
+  '@antfu/install-pkg@1.0.0':
+    resolution: {integrity: sha512-xvX6P/lo1B3ej0OsaErAjqgFYzYVcJpamjLAFLYh9vRJngBrMoUG7aVnrGTeqM7yxbyTD5p3F2+0/QUEh8Vzhw==}
+
+  '@antfu/utils@8.1.1':
+    resolution: {integrity: sha512-Mex9nXf9vR6AhcXmMrlz/HVgYYZpVGJ6YlPgwl7UnaFpnshXs6EK/oa5Gpf3CzENMjkvEx2tQtntGnb7UtSTOQ==}
+
   '@babel/code-frame@7.26.2':
     resolution: {integrity: sha512-RJlIHRueQgwWitWgF8OdFYGZX328Ax5BCemNGlqHfplnRT9ESi8JkFlvaVYbS+UubVY6dpv87Fs2u5M29iNFVQ==}
     engines: {node: '>=6.9.0'}
@@ -934,15 +940,15 @@ packages:
     resolution: {integrity: sha512-c7hNEllBlenFTHBky65mhq8WD2kbN9Q6gk0bTk8lSBvc554jpXSkST1iePudpt7+A/AQvuHs9EMqjHDXMY1lrA==}
     engines: {node: '>=18.18'}
 
-  '@iconify-icons/ep@1.2.12':
+  '@iconify/json@2.2.319':
-    resolution: {integrity: sha512-8EJULn048sQq3fvytpQ5j40omnVOdBKpo+sXdYM35NRrqCe1BihxBesMcCOLWaocqkWia6uTQ3cnRHff4ZA11w==}
+    resolution: {integrity: sha512-ZGX8O3PXDxXdgltuW2JlXa7IuZ6uc34qKVIBRyPNo63fxjbw7rSOox7HKi3fJyhXqoL3aN0AtK1yOb5Cgcte8w==}
-
-  '@iconify-icons/ri@1.2.10':
-    resolution: {integrity: sha512-wNaXsQYK55WDUWCbcjvnwnODV4Jtsp+VC0duPanibEVu876TUYf6kdgTGtH7/GErBCNdJuJJbncG7vbOaeQi7w==}
 
   '@iconify/types@2.0.0':
     resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==}
 
+  '@iconify/utils@2.3.0':
+    resolution: {integrity: sha512-GmQ78prtwYW6EtzXRU1rY+KwOKfz32PD7iJh6Iyqw68GiKuoZ2A6pRtzWONz5VQJbp50mEjXh/7NkumtrAgRKA==}
+
   '@iconify/vue@4.2.0':
     resolution: {integrity: sha512-CMynoz9BDWugDO2B7LU/s8L99dHCiqDGCjCki6bhVx5etZhw9x0BTV7wWRdj82jtl1yQTc+QQRcHQmSvUY6R+g==}
     peerDependencies:
@@ -970,16 +976,12 @@ packages:
     resolution: {integrity: sha512-bb8gZvoeKExCI2r/NVCK9E4YyOkvYGaSCPxVZe8T0jz8aX+dHEOZWxK06Z/Y9mWRkJfBiCH4aOhDF1yr1t5J8Q==}
     engines: {node: '>= 16'}
 
-  '@intlify/message-compiler@11.0.0-rc.1':
-    resolution: {integrity: sha512-TGw2uBfuTFTegZf/BHtUQBEKxl7Q/dVGLoqRIdw8lFsp9g/53sYn5iD+0HxIzdYjbWL6BTJMXCPUHp9PxDTRPw==}
-    engines: {node: '>= 16'}
-
   '@intlify/message-compiler@11.1.1':
     resolution: {integrity: sha512-4iEsUZ3aF7jXY19CJFN5VP+pPyLITD9FVsjB13z9TU1UxaZLlFsmNhvRxlPDSOfHAP5RpNF2QKKdZ3DHVf4Yzw==}
     engines: {node: '>= 16'}
 
-  '@intlify/shared@11.0.0-rc.1':
+  '@intlify/message-compiler@12.0.0-alpha.2':
-    resolution: {integrity: sha512-8tR1xe7ZEbkabTuE/tNhzpolygUn9OaYp9yuYAF4MgDNZg06C3Qny80bes2/e9/Wm3aVkPUlCw6WgU7mQd0yEg==}
+    resolution: {integrity: sha512-PD9C+oQbb7BF52hec0+vLnScaFkvnfX+R7zSbODYuRo/E2niAtGmHd0wPvEMsDhf9Z9b8f/qyDsVeZnD/ya9Ug==}
     engines: {node: '>= 16'}
 
   '@intlify/shared@11.1.1':
@@ -990,6 +992,10 @@ packages:
     resolution: {integrity: sha512-dF2iMMy8P9uKVHV/20LA1ulFLL+MKSbfMiixSmn6fpwqzvix38OIc7ebgnFbBqElvghZCW9ACtzKTGKsTGTWGA==}
     engines: {node: '>= 16'}
 
+  '@intlify/shared@12.0.0-alpha.2':
+    resolution: {integrity: sha512-P2DULVX9nz3y8zKNqLw9Es1aAgQ1JGC+kgpx5q7yLmrnAKkPR5MybQWoEhxanefNJgUY5ehsgo+GKif59SrncA==}
+    engines: {node: '>= 16'}
+
   '@intlify/unplugin-vue-i18n@6.0.3':
     resolution: {integrity: sha512-9ZDjBlhUHtgjRl23TVcgfJttgu8cNepwVhWvOv3mUMRDAhjW0pur1mWKEUKr1I8PNwE4Gvv2IQ1xcl4RL0nG0g==}
     engines: {node: '>= 18'}
@@ -1311,8 +1317,8 @@ packages:
     peerDependencies:
       element-plus: ^2.0.0
 
-  '@pureadmin/utils@2.5.0':
+  '@pureadmin/utils@2.6.0':
-    resolution: {integrity: sha512-DJyHBqxQo9Uo4GDEMbLD9xDNIn+VrOMBOyS6bgArY1a1iv4ffpDf0tA1tQ2HRFMiIcERC5abLWAASpgITM5LOQ==}
+    resolution: {integrity: sha512-xPncBQ4DZUstKrljsHxr3yuYacEZmvEilSfrZ6vpWNgJtPnViJ24Lf7gl7c1Y1RKYm/kXxjrhI7x69S2oN1Pvg==}
     peerDependencies:
       echarts: '*'
       vue: '*'
@@ -3007,6 +3013,10 @@ packages:
     resolution: {integrity: sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==}
     engines: {node: '>=18'}
 
+  globals@15.15.0:
+    resolution: {integrity: sha512-7ACyT3wmyp3I61S4fG682L0VA2RGD9otkqGJIwNUMF1SWUombIIk+af1unuDYgMm082aHYwD+mzJvv9Iu8dsgg==}
+    engines: {node: '>=18'}
+
   globby@11.1.0:
     resolution: {integrity: sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==}
     engines: {node: '>=10'}
@@ -3524,6 +3534,9 @@ packages:
   known-css-properties@0.35.0:
     resolution: {integrity: sha512-a/RAk2BfKk+WFGhhOCAYqSiFLc34k8Mt/6NWRI4joER0EYUzXIcFivjjnoD3+XU1DggLn/tZc3DOAgke7l8a4A==}
 
+  kolorist@1.8.0:
+    resolution: {integrity: sha512-Y+60/zizpJ3HRH8DCss+q95yr6145JXZo46OTpFvDZWLfRCE4qChOyk1b26nMaNpfHHgxagk9dXT5OP0Tfe+dQ==}
+
   launch-ide@1.0.2:
     resolution: {integrity: sha512-h7U48fgoAdgIs2LLYHdwyL9xPGvWkVVAKo7U9PlLnNHR6UNp150hinAJBVWzd43gJ+GSqcvdbajdkKicx+cStQ==}
 
@@ -3939,6 +3952,9 @@ packages:
   package-json-from-dist@1.0.1:
     resolution: {integrity: sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==}
 
+  package-manager-detector@0.2.11:
+    resolution: {integrity: sha512-BEnLolu+yuz22S56CU1SUKq3XC3PkwD5wv4ikR4MfGvnRVcmzXR9DwSlW2fEamyTPyXHomBJRzgapeuBvRNzJQ==}
+
   parent-module@1.0.1:
     resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==}
     engines: {node: '>=6'}
@@ -4368,6 +4384,9 @@ packages:
     resolution: {integrity: sha512-YWWTjgABSKcvs/nWBi9PycY/JiPJqOD4JA6o9Sej2AtvSGarXxKC3OQSk4pAarbdQlKAh5D4FCQkJNkW+GAn3w==}
     engines: {node: '>=0.6'}
 
+  quansync@0.2.8:
+    resolution: {integrity: sha512-4+saucphJMazjt7iOM27mbFCk+D9dd/zmgMDCzRZ8MEoBfYp7lAvoN38et/phRQF6wOPMy/OROBGgoWeSKyluA==}
+
   querystringify@2.2.0:
     resolution: {integrity: sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==}
 
@@ -4995,6 +5014,29 @@ packages:
     resolution: {integrity: sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==}
     engines: {node: '>= 10.0.0'}
 
+  unplugin-icons@22.1.0:
+    resolution: {integrity: sha512-ect2ZNtk1Zgwb0NVHd0C1IDW/MV+Jk/xaq4t8o6rYdVS3+L660ZdD5kTSQZvsgdwCvquRw+/wYn75hsweRjoIA==}
+    peerDependencies:
+      '@svgr/core': '>=7.0.0'
+      '@svgx/core': ^1.0.1
+      '@vue/compiler-sfc': ^3.0.2 || ^2.7.0
+      svelte: ^3.0.0 || ^4.0.0 || ^5.0.0
+      vue-template-compiler: ^2.6.12
+      vue-template-es2015-compiler: ^1.9.0
+    peerDependenciesMeta:
+      '@svgr/core':
+        optional: true
+      '@svgx/core':
+        optional: true
+      '@vue/compiler-sfc':
+        optional: true
+      svelte:
+        optional: true
+      vue-template-compiler:
+        optional: true
+      vue-template-es2015-compiler:
+        optional: true
+
   unplugin-utils@0.2.4:
     resolution: {integrity: sha512-8U/MtpkPkkk3Atewj1+RcKIjb5WBimZ/WSLhhR3w6SsIj8XJuKTacSP8g+2JhfSGw0Cb125Y+2zA/IzJZDVbhA==}
     engines: {node: '>=18.12.0'}
@@ -5430,6 +5472,13 @@ snapshots:
       '@jridgewell/gen-mapping': 0.3.8
       '@jridgewell/trace-mapping': 0.3.25
 
+  '@antfu/install-pkg@1.0.0':
+    dependencies:
+      package-manager-detector: 0.2.11
+      tinyexec: 0.3.2
+
+  '@antfu/utils@8.1.1': {}
+
   '@babel/code-frame@7.26.2':
     dependencies:
       '@babel/helper-validator-identifier': 7.25.9
@@ -5964,16 +6013,26 @@ snapshots:
 
   '@humanwhocodes/retry@0.4.1': {}
 
-  '@iconify-icons/ep@1.2.12':
+  '@iconify/json@2.2.319':
-    dependencies:
-      '@iconify/types': 2.0.0
-
-  '@iconify-icons/ri@1.2.10':
     dependencies:
       '@iconify/types': 2.0.0
+      pathe: 1.1.2
 
   '@iconify/types@2.0.0': {}
 
+  '@iconify/utils@2.3.0':
+    dependencies:
+      '@antfu/install-pkg': 1.0.0
+      '@antfu/utils': 8.1.1
+      '@iconify/types': 2.0.0
+      debug: 4.4.0
+      globals: 15.15.0
+      kolorist: 1.8.0
+      local-pkg: 1.0.0
+      mlly: 1.7.4
+    transitivePeerDependencies:
+      - supports-color
+
   '@iconify/vue@4.2.0(vue@3.5.13(typescript@5.7.3))':
     dependencies:
       '@iconify/types': 2.0.0
@@ -5989,8 +6048,8 @@ snapshots:
 
   '@intlify/bundle-utils@10.0.0(vue-i18n@11.1.1(vue@3.5.13(typescript@5.7.3)))':
     dependencies:
-      '@intlify/message-compiler': 11.0.0-rc.1
+      '@intlify/message-compiler': 12.0.0-alpha.2
-      '@intlify/shared': 11.0.0-rc.1
+      '@intlify/shared': 12.0.0-alpha.2
       acorn: 8.14.0
       escodegen: 2.1.0
       estree-walker: 2.0.2
@@ -6006,22 +6065,22 @@ snapshots:
       '@intlify/message-compiler': 11.1.1
       '@intlify/shared': 11.1.1
 
-  '@intlify/message-compiler@11.0.0-rc.1':
-    dependencies:
-      '@intlify/shared': 11.0.0-rc.1
-      source-map-js: 1.2.1
-
   '@intlify/message-compiler@11.1.1':
     dependencies:
       '@intlify/shared': 11.1.1
       source-map-js: 1.2.1
 
-  '@intlify/shared@11.0.0-rc.1': {}
+  '@intlify/message-compiler@12.0.0-alpha.2':
+    dependencies:
+      '@intlify/shared': 12.0.0-alpha.2
+      source-map-js: 1.2.1
 
   '@intlify/shared@11.1.1': {}
 
   '@intlify/shared@11.1.2': {}
 
+  '@intlify/shared@12.0.0-alpha.2': {}
+
   '@intlify/unplugin-vue-i18n@6.0.3(@vue/compiler-dom@3.5.13)(eslint@9.20.1(jiti@2.4.2))(rollup@4.34.6)(typescript@5.7.3)(vue-i18n@11.1.1(vue@3.5.13(typescript@5.7.3)))(vue@3.5.13(typescript@5.7.3))':
     dependencies:
       '@eslint-community/eslint-utils': 4.4.1(eslint@9.20.1(jiti@2.4.2))
@@ -6422,7 +6481,7 @@ snapshots:
   '@pureadmin/descriptions@1.2.1(echarts@5.6.0)(element-plus@2.9.4(vue@3.5.13(typescript@5.7.3)))(typescript@5.7.3)':
     dependencies:
       '@element-plus/icons-vue': 2.3.1(vue@3.5.13(typescript@5.7.3))
-      '@pureadmin/utils': 2.5.0(echarts@5.6.0)(vue@3.5.13(typescript@5.7.3))
+      '@pureadmin/utils': 2.6.0(echarts@5.6.0)(vue@3.5.13(typescript@5.7.3))
       element-plus: 2.9.4(vue@3.5.13(typescript@5.7.3))
       vue: 3.5.13(typescript@5.7.3)
     transitivePeerDependencies:
@@ -6436,7 +6495,7 @@ snapshots:
     transitivePeerDependencies:
       - typescript
 
-  '@pureadmin/utils@2.5.0(echarts@5.6.0)(vue@3.5.13(typescript@5.7.3))':
+  '@pureadmin/utils@2.6.0(echarts@5.6.0)(vue@3.5.13(typescript@5.7.3))':
     optionalDependencies:
       echarts: 5.6.0
       vue: 3.5.13(typescript@5.7.3)
@@ -8387,6 +8446,8 @@ snapshots:
 
   globals@14.0.0: {}
 
+  globals@15.15.0: {}
+
   globby@11.1.0:
     dependencies:
       array-union: 2.1.0
@@ -9102,6 +9163,8 @@ snapshots:
 
   known-css-properties@0.35.0: {}
 
+  kolorist@1.8.0: {}
+
   launch-ide@1.0.2:
     dependencies:
       chalk: 4.1.1
@@ -9152,7 +9215,6 @@ snapshots:
     dependencies:
       mlly: 1.7.4
       pkg-types: 1.3.1
-    optional: true
 
   localforage@1.10.0:
     dependencies:
@@ -9512,6 +9574,10 @@ snapshots:
 
   package-json-from-dist@1.0.1: {}
 
+  package-manager-detector@0.2.11:
+    dependencies:
+      quansync: 0.2.8
+
   parent-module@1.0.1:
     dependencies:
       callsites: 3.1.0
@@ -9895,6 +9961,8 @@ snapshots:
     dependencies:
       side-channel: 1.1.0
 
+  quansync@0.2.8: {}
+
   querystringify@2.2.0: {}
 
   queue-microtask@1.2.3: {}
@@ -10587,6 +10655,18 @@ snapshots:
 
   universalify@2.0.1: {}
 
+  unplugin-icons@22.1.0(@vue/compiler-sfc@3.5.13):
+    dependencies:
+      '@antfu/install-pkg': 1.0.0
+      '@iconify/utils': 2.3.0
+      debug: 4.4.0
+      local-pkg: 1.0.0
+      unplugin: 2.2.0
+    optionalDependencies:
+      '@vue/compiler-sfc': 3.5.13
+    transitivePeerDependencies:
+      - supports-color
+
   unplugin-utils@0.2.4:
     dependencies:
       pathe: 2.0.3
@@ -10602,7 +10682,6 @@ snapshots:
     dependencies:
       acorn: 8.14.0
       webpack-virtual-modules: 0.6.2
-    optional: true
 
   untyped@1.5.2:
     dependencies:

src/components/ReDialog/index.vue

@@ -8,8 +8,8 @@ import {
 } from "./index";
 import { ref, computed } from "vue";
 import { isFunction } from "@pureadmin/utils";
-import Fullscreen from "@iconify-icons/ri/fullscreen-fill";
+import Fullscreen from "~icons/ri/fullscreen-fill";
-import ExitFullscreen from "@iconify-icons/ri/fullscreen-exit-fill";
+import ExitFullscreen from "~icons/ri/fullscreen-exit-fill";
 
 defineOptions({
   name: "ReDialog"

src/components/ReIcon/src/Select.vue

@@ -2,7 +2,7 @@
 import { IconJson } from "@/components/ReIcon/data";
 import { cloneDeep, isAllEmpty } from "@pureadmin/utils";
 import { ref, computed, CSSProperties, watch } from "vue";
-import Search from "@iconify-icons/ri/search-eye-line";
+import Search from "~icons/ri/search-eye-line";
 
 type ParameterCSSProperties = (item?: string) => CSSProperties | undefined;
 

src/components/ReIcon/src/hooks.ts

@@ -1,6 +1,6 @@
 import type { iconType } from "./types";
 import { h, defineComponent, type Component } from "vue";
-import { IconifyIconOnline, IconifyIconOffline, FontIcon } from "../index";
+import { FontIcon, IconifyIconOnline, IconifyIconOffline } from "../index";
 
 /**
  * 支持 `iconfont`、自定义 `svg` 以及 `iconify` 中所有的图标
@@ -52,7 +52,7 @@ export function useRenderIcon(icon: any, attrs?: iconType): Component {
         const IconifyIcon =
           icon && icon.includes(":") ? IconifyIconOnline : IconifyIconOffline;
         return h(IconifyIcon, {
-          icon: icon,
+          icon,
           ...attrs
         });
       }

src/components/ReIcon/src/iconifyIconOffline.ts

@@ -13,6 +13,7 @@ export default defineComponent({
   render() {
     if (typeof this.icon === "object") addIcon(this.icon, this.icon);
     const attrs = this.$attrs;
+    if (typeof this.icon === "string") {
       return h(
         IconifyIcon,
         {
@@ -27,5 +28,20 @@ export default defineComponent({
           default: () => []
         }
       );
+    } else {
+      return h(
+        this.icon,
+        {
+          "aria-hidden": false,
+          style: attrs?.style
+            ? Object.assign(attrs.style, { outline: "none" })
+            : { outline: "none" },
+          ...attrs
+        },
+        {
+          default: () => []
+        }
+      );
+    }
   }
 });

src/components/ReIcon/src/offlineIcon.ts

@@ -1,70 +1,87 @@
 // 这里存放本地图标，在 src/layout/index.vue 文件中加载，避免在首启动加载
+import { getSvgInfo } from "@pureadmin/utils";
 import { addIcon } from "@iconify/vue/dist/offline";
 
+// https://icon-sets.iconify.design/ep/?keyword=ep
+import EpMenu from "~icons/ep/menu?raw";
+import EpEdit from "~icons/ep/edit?raw";
+import EpGuide from "~icons/ep/guide?raw";
+import EpSetUp from "~icons/ep/set-up?raw";
+import EpMonitor from "~icons/ep/monitor?raw";
+import EpLollipop from "~icons/ep/lollipop?raw";
+import EpHistogram from "~icons/ep/histogram?raw";
+import EpHomeFilled from "~icons/ep/home-filled?raw";
+
+// https://icon-sets.iconify.design/ri/?keyword=ri
+import RiMindMap from "~icons/ri/mind-map?raw";
+import RiAdminFill from "~icons/ri/admin-fill?raw";
+import RiTableLine from "~icons/ri/table-line?raw";
+import RiLinksFill from "~icons/ri/links-fill?raw";
+import RiAdminLine from "~icons/ri/admin-line?raw";
+import RiListCheck from "~icons/ri/list-check?raw";
+import RiSearchLine from "~icons/ri/search-line?raw";
+import RiWindowLine from "~icons/ri/window-line?raw";
+import RiUbuntuFill from "~icons/ri/ubuntu-fill?raw";
+import RiHistoryFill from "~icons/ri/history-fill?raw";
+import RiEditBoxLine from "~icons/ri/edit-box-line?raw";
+import RiCodeBoxLine from "~icons/ri/code-box-line?raw";
+import RiArtboardLine from "~icons/ri/artboard-line?raw";
+import RiMarkdownLine from "~icons/ri/markdown-line?raw";
+import RiFileInfoLine from "~icons/ri/file-info-line?raw";
+import RiBankCardLine from "~icons/ri/bank-card-line?raw";
+import RiFilePpt2Line from "~icons/ri/file-ppt-2-line?raw";
+import RiGitBranchLine from "~icons/ri/git-branch-line?raw";
+import RiSettings3Line from "~icons/ri/settings-3-line?raw";
+import RiUserVoiceLine from "~icons/ri/user-voice-line?raw";
+import RiBookmark2Line from "~icons/ri/bookmark-2-line?raw";
+import RiFileSearchLine from "~icons/ri/file-search-line?raw";
+import RiChatSearchLine from "~icons/ri/chat-search-line?raw";
+import RiInformationLine from "~icons/ri/information-line?raw";
+import RiTerminalWindowLine from "~icons/ri/terminal-window-line?raw";
+import RiCheckboxCircleLine from "~icons/ri/checkbox-circle-line?raw";
+import RiBarChartHorizontalLine from "~icons/ri/bar-chart-horizontal-line?raw";
+
+const icons = [
+  // Element Plus Icon: https://github.com/element-plus/element-plus-icons
+  ["ep/menu", EpMenu],
+  ["ep/edit", EpEdit],
+  ["ep/guide", EpGuide],
+  ["ep/set-up", EpSetUp],
+  ["ep/monitor", EpMonitor],
+  ["ep/lollipop", EpLollipop],
+  ["ep/histogram", EpHistogram],
+  ["ep/home-filled", EpHomeFilled],
+  // Remix Icon: https://github.com/Remix-Design/RemixIcon
+  ["ri/mind-map", RiMindMap],
+  ["ri/admin-fill", RiAdminFill],
+  ["ri/links-fill", RiTableLine],
+  ["ri/table-line", RiLinksFill],
+  ["ri/admin-line", RiAdminLine],
+  ["ri/list-check", RiListCheck],
+  ["ri/search-line", RiSearchLine],
+  ["ri/window-line", RiWindowLine],
+  ["ri/ubuntu-fill", RiUbuntuFill],
+  ["ri/history-fill", RiHistoryFill],
+  ["ri/edit-box-line", RiEditBoxLine],
+  ["ri/code-box-line", RiCodeBoxLine],
+  ["ri/artboard-line", RiArtboardLine],
+  ["ri/markdown-line", RiMarkdownLine],
+  ["ri/file-info-line", RiFileInfoLine],
+  ["ri/bank-card-line", RiBankCardLine],
+  ["ri/file-ppt-2-line", RiFilePpt2Line],
+  ["ri/git-branch-line", RiGitBranchLine],
+  ["ri/settings-3-line", RiSettings3Line],
+  ["ri/user-voice-line", RiUserVoiceLine],
+  ["ri/bookmark-2-line", RiBookmark2Line],
+  ["ri/file-search-line", RiFileSearchLine],
+  ["ri/chat-search-line", RiChatSearchLine],
+  ["ri/information-line", RiInformationLine],
+  ["ri/terminal-window-line", RiTerminalWindowLine],
+  ["ri/checkbox-circle-line", RiCheckboxCircleLine],
+  ["ri/bar-chart-horizontal-line", RiBarChartHorizontalLine]
+];
+
 // 本地菜单图标，后端在路由的 icon 中返回对应的图标字符串并且前端在此处使用 addIcon 添加即可渲染菜单图标
-// @iconify-icons/ep
+icons.forEach(([name, icon]) => {
-import Menu from "@iconify-icons/ep/menu";
+  addIcon(name as string, getSvgInfo(icon as string));
-import Edit from "@iconify-icons/ep/edit";
+});
-import SetUp from "@iconify-icons/ep/set-up";
-import Guide from "@iconify-icons/ep/guide";
-import Monitor from "@iconify-icons/ep/monitor";
-import Lollipop from "@iconify-icons/ep/lollipop";
-import Histogram from "@iconify-icons/ep/histogram";
-import HomeFilled from "@iconify-icons/ep/home-filled";
-addIcon("ep:menu", Menu);
-addIcon("ep:edit", Edit);
-addIcon("ep:set-up", SetUp);
-addIcon("ep:guide", Guide);
-addIcon("ep:monitor", Monitor);
-addIcon("ep:lollipop", Lollipop);
-addIcon("ep:histogram", Histogram);
-addIcon("ep:home-filled", HomeFilled);
-// @iconify-icons/ri
-import Tag from "@iconify-icons/ri/bookmark-2-line";
-import Ppt from "@iconify-icons/ri/file-ppt-2-line";
-import Card from "@iconify-icons/ri/bank-card-line";
-import Role from "@iconify-icons/ri/admin-fill";
-import Info from "@iconify-icons/ri/file-info-line";
-import Dept from "@iconify-icons/ri/git-branch-line";
-import Table from "@iconify-icons/ri/table-line";
-import Links from "@iconify-icons/ri/links-fill";
-import Search from "@iconify-icons/ri/search-line";
-import FlUser from "@iconify-icons/ri/admin-line";
-import Setting from "@iconify-icons/ri/settings-3-line";
-import MindMap from "@iconify-icons/ri/mind-map";
-import BarChart from "@iconify-icons/ri/bar-chart-horizontal-line";
-import LoginLog from "@iconify-icons/ri/window-line";
-import Artboard from "@iconify-icons/ri/artboard-line";
-import SystemLog from "@iconify-icons/ri/file-search-line";
-import ListCheck from "@iconify-icons/ri/list-check";
-import UbuntuFill from "@iconify-icons/ri/ubuntu-fill";
-import OnlineUser from "@iconify-icons/ri/user-voice-line";
-import EditBoxLine from "@iconify-icons/ri/edit-box-line";
-import OperationLog from "@iconify-icons/ri/history-fill";
-import InformationLine from "@iconify-icons/ri/information-line";
-import TerminalWindowLine from "@iconify-icons/ri/terminal-window-line";
-import CheckboxCircleLine from "@iconify-icons/ri/checkbox-circle-line";
-addIcon("ri:bookmark-2-line", Tag);
-addIcon("ri:file-ppt-2-line", Ppt);
-addIcon("ri:bank-card-line", Card);
-addIcon("ri:admin-fill", Role);
-addIcon("ri:file-info-line", Info);
-addIcon("ri:git-branch-line", Dept);
-addIcon("ri:links-fill", Links);
-addIcon("ri:table-line", Table);
-addIcon("ri:search-line", Search);
-addIcon("ri:admin-line", FlUser);
-addIcon("ri:settings-3-line", Setting);
-addIcon("ri:mind-map", MindMap);
-addIcon("ri:bar-chart-horizontal-line", BarChart);
-addIcon("ri:window-line", LoginLog);
-addIcon("ri:file-search-line", SystemLog);
-addIcon("ri:artboard-line", Artboard);
-addIcon("ri:list-check", ListCheck);
-addIcon("ri:ubuntu-fill", UbuntuFill);
-addIcon("ri:user-voice-line", OnlineUser);
-addIcon("ri:edit-box-line", EditBoxLine);
-addIcon("ri:history-fill", OperationLog);
-addIcon("ri:information-line", InformationLine);
-addIcon("ri:terminal-window-line", TerminalWindowLine);
-addIcon("ri:checkbox-circle-line", CheckboxCircleLine);

src/components/RePureTableBar/src/bar.tsx

@@ -18,8 +18,8 @@ import {
   getKeyList
 } from "@pureadmin/utils";
 
-import Fullscreen from "@iconify-icons/ri/fullscreen-fill";
+import Fullscreen from "~icons/ri/fullscreen-fill";
-import ExitFullscreen from "@iconify-icons/ri/fullscreen-exit-fill";
+import ExitFullscreen from "~icons/ri/fullscreen-exit-fill";
 import DragIcon from "@/assets/table-bar/drag.svg?component";
 import ExpandIcon from "@/assets/table-bar/expand.svg?component";
 import RefreshIcon from "@/assets/table-bar/refresh.svg?component";

src/components/ReQrcode/src/index.tsx

@@ -11,7 +11,7 @@ import "./index.scss";
 import propTypes from "@/utils/propTypes";
 import { isString, cloneDeep } from "@pureadmin/utils";
 import QRCode, { type QRCodeRenderersOptions } from "qrcode";
-import RefreshRight from "@iconify-icons/ep/refresh-right";
+import RefreshRight from "~icons/ep/refresh-right";
 
 interface QrcodeLogo {
   src?: string;

src/components/ReVxeTableBar/src/bar.tsx

@@ -12,8 +12,8 @@ import {
   getCurrentInstance
 } from "vue";
 
-import Fullscreen from "@iconify-icons/ri/fullscreen-fill";
+import Fullscreen from "~icons/ri/fullscreen-fill";
-import ExitFullscreen from "@iconify-icons/ri/fullscreen-exit-fill";
+import ExitFullscreen from "~icons/ri/fullscreen-exit-fill";
 import DragIcon from "@/assets/table-bar/drag.svg?component";
 import ExpandIcon from "@/assets/table-bar/expand.svg?component";
 import RefreshIcon from "@/assets/table-bar/refresh.svg?component";

src/layout/components/lay-navbar/index.vue

@@ -9,10 +9,10 @@ import LaySidebarBreadCrumb from "../lay-sidebar/components/SidebarBreadCrumb.vu
 import LaySidebarTopCollapse from "../lay-sidebar/components/SidebarTopCollapse.vue";
 
 import GlobalizationIcon from "@/assets/svg/globalization.svg?component";
-import AccountSettingsIcon from "@iconify-icons/ri/user-settings-line";
+import AccountSettingsIcon from "~icons/ri/user-settings-line";
-import LogoutCircleRLine from "@iconify-icons/ri/logout-circle-r-line";
+import LogoutCircleRLine from "~icons/ri/logout-circle-r-line";
-import Setting from "@iconify-icons/ri/settings-3-line";
+import Setting from "~icons/ri/settings-3-line";
-import Check from "@iconify-icons/ep/check";
+import Check from "~icons/ep/check";
 
 const {
   layout,

src/layout/components/lay-notice/index.vue

@@ -3,7 +3,7 @@ import { useI18n } from "vue-i18n";
 import { ref, computed } from "vue";
 import { noticesData } from "./data";
 import NoticeList from "./components/NoticeList.vue";
-import BellIcon from "@iconify-icons/ep/bell";
+import BellIcon from "~icons/ep/bell";
 
 const { t } = useI18n();
 const noticesNum = ref(0);

src/layout/components/lay-panel/index.vue

@@ -4,7 +4,7 @@ import { emitter } from "@/utils/mitt";
 import { onClickOutside } from "@vueuse/core";
 import { ref, computed, onMounted, onBeforeUnmount } from "vue";
 import { useDataThemeChange } from "@/layout/hooks/useDataThemeChange";
-import CloseIcon from "@iconify-icons/ep/close";
+import CloseIcon from "~icons/ep/close";
 
 const target = ref(null);
 const show = ref<Boolean>(false);

src/layout/components/lay-search/components/SearchFooter.vue

@@ -3,8 +3,8 @@ import { useI18n } from "vue-i18n";
 import { useNav } from "@/layout/hooks/useNav";
 import MdiKeyboardEsc from "@/assets/svg/keyboard_esc.svg?component";
 import EnterOutlined from "@/assets/svg/enter_outlined.svg?component";
-import ArrowUpLine from "@iconify-icons/ri/arrow-up-line";
+import ArrowUpLine from "~icons/ri/arrow-up-line";
-import ArrowDownLine from "@iconify-icons/ri/arrow-down-line";
+import ArrowDownLine from "~icons/ri/arrow-down-line";
 
 withDefaults(defineProps<{ total: number }>(), {
   total: 0

src/layout/components/lay-search/components/SearchHistoryItem.vue

@@ -2,8 +2,8 @@
 import type { optionsItem } from "../types";
 import { transformI18n } from "@/plugins/i18n";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";
-import StarIcon from "@iconify-icons/ep/star";
+import StarIcon from "~icons/ep/star";
-import CloseIcon from "@iconify-icons/ep/close";
+import CloseIcon from "~icons/ep/close";
 
 interface Props {
   item: optionsItem;

src/layout/components/lay-search/components/SearchModal.vue

@@ -13,7 +13,7 @@ import { ref, computed, shallowRef, watch } from "vue";
 import { useDebounceFn, onKeyStroke } from "@vueuse/core";
 import { usePermissionStoreHook } from "@/store/modules/permission";
 import { cloneDeep, isAllEmpty, storageLocal } from "@pureadmin/utils";
-import SearchIcon from "@iconify-icons/ri/search-line";
+import SearchIcon from "~icons/ri/search-line";
 
 interface Props {
   /** 弹窗显隐 */

src/layout/components/lay-search/index.vue

@@ -14,7 +14,7 @@ function handleSearch() {
       class="search-container w-[40px] h-[48px] flex-c cursor-pointer navbar-bg-hover"
       @click="handleSearch"
     >
-      <IconifyIconOffline icon="ri:search-line" />
+      <IconifyIconOffline icon="ri/search-line" />
     </div>
     <SearchModal v-model:value="show" />
   </div>

src/layout/components/lay-setting/index.vue

@@ -19,9 +19,9 @@ import Segmented, { type OptionsType } from "@/components/ReSegmented";
 import { useDataThemeChange } from "@/layout/hooks/useDataThemeChange";
 import { useDark, useGlobal, debounce, isNumber } from "@pureadmin/utils";
 
-import Check from "@iconify-icons/ep/check";
+import Check from "~icons/ep/check";
-import LeftArrow from "@iconify-icons/ri/arrow-left-s-line";
+import LeftArrow from "~icons/ri/arrow-left-s-line";
-import RightArrow from "@iconify-icons/ri/arrow-right-s-line";
+import RightArrow from "~icons/ri/arrow-right-s-line";
 import DayIcon from "@/assets/svg/day.svg?component";
 import DarkIcon from "@/assets/svg/dark.svg?component";
 import SystemIcon from "@/assets/svg/system.svg?component";

src/layout/components/lay-sidebar/NavHorizontal.vue

@@ -12,10 +12,10 @@ import LaySidebarItem from "../lay-sidebar/components/SidebarItem.vue";
 import LaySidebarFullScreen from "../lay-sidebar/components/SidebarFullScreen.vue";
 
 import GlobalizationIcon from "@/assets/svg/globalization.svg?component";
-import AccountSettingsIcon from "@iconify-icons/ri/user-settings-line";
+import AccountSettingsIcon from "~icons/ri/user-settings-line";
-import LogoutCircleRLine from "@iconify-icons/ri/logout-circle-r-line";
+import LogoutCircleRLine from "~icons/ri/logout-circle-r-line";
-import Setting from "@iconify-icons/ri/settings-3-line";
+import Setting from "~icons/ri/settings-3-line";
-import Check from "@iconify-icons/ep/check";
+import Check from "~icons/ep/check";
 
 const menuRef = ref();
 const showLogo = ref(

src/layout/components/lay-sidebar/NavMix.vue

@@ -13,10 +13,10 @@ import LaySidebarExtraIcon from "../lay-sidebar/components/SidebarExtraIcon.vue"
 import LaySidebarFullScreen from "../lay-sidebar/components/SidebarFullScreen.vue";
 
 import GlobalizationIcon from "@/assets/svg/globalization.svg?component";
-import AccountSettingsIcon from "@iconify-icons/ri/user-settings-line";
+import AccountSettingsIcon from "~icons/ri/user-settings-line";
-import LogoutCircleRLine from "@iconify-icons/ri/logout-circle-r-line";
+import LogoutCircleRLine from "~icons/ri/logout-circle-r-line";
-import Setting from "@iconify-icons/ri/settings-3-line";
+import Setting from "~icons/ri/settings-3-line";
-import Check from "@iconify-icons/ep/check";
+import Check from "~icons/ep/check";
 
 const menuRef = ref();
 const defaultActive = ref(null);

src/layout/components/lay-sidebar/components/SidebarCenterCollapse.vue

@@ -4,7 +4,7 @@ import { useI18n } from "vue-i18n";
 import { useGlobal } from "@pureadmin/utils";
 import { useNav } from "@/layout/hooks/useNav";
 
-import ArrowLeft from "@iconify-icons/ri/arrow-left-double-fill";
+import ArrowLeft from "~icons/ri/arrow-left-double-fill";
 
 interface Props {
   isActive: boolean;

src/layout/components/lay-sidebar/components/SidebarItem.vue

@@ -17,10 +17,10 @@ import {
   useAttrs
 } from "vue";
 
-import ArrowUp from "@iconify-icons/ep/arrow-up-bold";
+import ArrowUp from "~icons/ep/arrow-up-bold";
-import EpArrowDown from "@iconify-icons/ep/arrow-down-bold";
+import EpArrowDown from "~icons/ep/arrow-down-bold";
-import ArrowLeft from "@iconify-icons/ep/arrow-left-bold";
+import ArrowLeft from "~icons/ep/arrow-left-bold";
-import ArrowRight from "@iconify-icons/ep/arrow-right-bold";
+import ArrowRight from "~icons/ep/arrow-right-bold";
 
 const attrs = useAttrs();
 const { layout, isCollapse, tooltipEffect, getDivStyle } = useNav();

src/layout/components/lay-sidebar/components/SidebarLeftCollapse.vue

@@ -4,7 +4,7 @@ import { useI18n } from "vue-i18n";
 import { useGlobal } from "@pureadmin/utils";
 import { useNav } from "@/layout/hooks/useNav";
 
-import MenuFold from "@iconify-icons/ri/menu-fold-fill";
+import MenuFold from "~icons/ri/menu-fold-fill";
 
 interface Props {
   isActive: boolean;

src/layout/components/lay-sidebar/components/SidebarTopCollapse.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useI18n } from "vue-i18n";
-import MenuFold from "@iconify-icons/ri/menu-fold-fill";
+import MenuFold from "~icons/ri/menu-fold-fill";
-import MenuUnfold from "@iconify-icons/ri/menu-unfold-fill";
+import MenuUnfold from "~icons/ri/menu-unfold-fill";
 
 interface Props {
   isActive: boolean;

src/layout/components/lay-tag/index.vue

@@ -18,11 +18,11 @@ import {
   useResizeObserver
 } from "@pureadmin/utils";
 
-import ExitFullscreen from "@iconify-icons/ri/fullscreen-exit-fill";
+import ExitFullscreen from "~icons/ri/fullscreen-exit-fill";
-import Fullscreen from "@iconify-icons/ri/fullscreen-fill";
+import Fullscreen from "~icons/ri/fullscreen-fill";
-import ArrowDown from "@iconify-icons/ri/arrow-down-s-line";
+import ArrowDown from "~icons/ri/arrow-down-s-line";
-import ArrowRightSLine from "@iconify-icons/ri/arrow-right-s-line";
+import ArrowRightSLine from "~icons/ri/arrow-right-s-line";
-import ArrowLeftSLine from "@iconify-icons/ri/arrow-left-s-line";
+import ArrowLeftSLine from "~icons/ri/arrow-left-s-line";
 
 const {
   Close,

src/layout/hooks/useNav.ts

@@ -14,8 +14,8 @@ import { useUserStoreHook } from "@/store/modules/user";
 import { useGlobal, isAllEmpty } from "@pureadmin/utils";
 import { useEpThemeStoreHook } from "@/store/modules/epTheme";
 import { usePermissionStoreHook } from "@/store/modules/permission";
-import ExitFullscreen from "@iconify-icons/ri/fullscreen-exit-fill";
+import ExitFullscreen from "~icons/ri/fullscreen-exit-fill";
-import Fullscreen from "@iconify-icons/ri/fullscreen-fill";
+import Fullscreen from "~icons/ri/fullscreen-fill";
 
 const errorInfo =
   "The current routing configuration is incorrect, please check the configuration";

src/layout/hooks/useTag.ts

@@ -21,13 +21,13 @@ import {
   hasClass
 } from "@pureadmin/utils";
 
-import Fullscreen from "@iconify-icons/ri/fullscreen-fill";
+import Fullscreen from "~icons/ri/fullscreen-fill";
-import CloseAllTags from "@iconify-icons/ri/subtract-line";
+import CloseAllTags from "~icons/ri/subtract-line";
-import CloseOtherTags from "@iconify-icons/ri/text-spacing";
+import CloseOtherTags from "~icons/ri/text-spacing";
-import CloseRightTags from "@iconify-icons/ri/text-direction-l";
+import CloseRightTags from "~icons/ri/text-direction-l";
-import CloseLeftTags from "@iconify-icons/ri/text-direction-r";
+import CloseLeftTags from "~icons/ri/text-direction-r";
-import RefreshRight from "@iconify-icons/ep/refresh-right";
+import RefreshRight from "~icons/ep/refresh-right";
-import Close from "@iconify-icons/ep/close";
+import Close from "~icons/ep/close";
 
 export function useTags() {
   const route = useRoute();

src/layout/types.ts

@@ -1,4 +1,4 @@
-import type { IconifyIcon } from "@iconify/vue";
+import type { FunctionalComponent } from "vue";
 const { VITE_HIDE_HOME } = import.meta.env;
 
 export const routerArrays: Array<RouteConfigs> =
@@ -8,7 +8,7 @@ export const routerArrays: Array<RouteConfigs> =
           path: "/welcome",
           meta: {
             title: "menus.pureHome",
-            icon: "ep:home-filled"
+            icon: "ep/home-filled"
           }
         }
       ]
@@ -16,7 +16,7 @@ export const routerArrays: Array<RouteConfigs> =
 
 export type routeMetaType = {
   title?: string;
-  icon?: string | IconifyIcon;
+  icon?: string | FunctionalComponent;
   showLink?: boolean;
   savedPosition?: boolean;
   auths?: Array<string>;
@@ -36,7 +36,7 @@ export type multiTagsType = {
 };
 
 export type tagsViewsType = {
-  icon: string | IconifyIcon;
+  icon: string | FunctionalComponent;
   text: string;
   divided: boolean;
   disabled: boolean;

src/router/modules/able.ts

@@ -5,7 +5,7 @@ export default {
   path: "/able",
   redirect: "/able/watermark",
   meta: {
-    icon: "ri:ubuntu-fill",
+    icon: "ri/ubuntu-fill",
     title: $t("menus.pureAble"),
     rank: able
   },

src/router/modules/about.ts

@@ -5,7 +5,7 @@ export default {
   path: "/about",
   redirect: "/about/index",
   meta: {
-    icon: "ri:file-info-line",
+    icon: "ri/file-info-line",
     title: $t("menus.pureAbout"),
     rank: about
   },

src/router/modules/board.ts

@@ -6,7 +6,7 @@ export default {
   path: "/board",
   redirect: "/board/index",
   meta: {
-    icon: "ri:artboard-line",
+    icon: "ri/artboard-line",
     title: $t("menus.pureBoard"),
     rank: board
   },

src/router/modules/chatai.ts

@@ -4,7 +4,7 @@ export default {
   path: "/chatai",
   redirect: "/chatai/index",
   meta: {
-    icon: "ri:chat-search-line",
+    icon: "ri/chat-search-line",
     title: "chat-ai",
     rank: chatai
   },

src/router/modules/codemirror.ts

@@ -5,7 +5,7 @@ export default {
   path: "/codemirror",
   redirect: "/codemirror/index",
   meta: {
-    icon: "ri:code-box-line",
+    icon: "ri/code-box-line",
     title: $t("menus.pureCodeMirror"),
     rank: codemirror
   },

src/router/modules/components.ts

@@ -5,7 +5,7 @@ export default {
   path: "/components",
   redirect: "/components/dialog",
   meta: {
-    icon: "ep:menu",
+    icon: "ep/menu",
     title: $t("menus.pureComponents"),
     rank: components
   },

src/router/modules/editor.ts

@@ -5,7 +5,7 @@ export default {
   path: "/editor",
   redirect: "/editor/index",
   meta: {
-    icon: "ep:edit",
+    icon: "ep/edit",
     title: $t("menus.pureEditor"),
     rank: editor
   },

src/router/modules/error.ts

@@ -5,7 +5,7 @@ export default {
   path: "/error",
   redirect: "/error/403",
   meta: {
-    icon: "ri:information-line",
+    icon: "ri/information-line",
     // showLink: false,
     title: $t("menus.pureAbnormal"),
     rank: error

src/router/modules/flowchart.ts

@@ -5,7 +5,7 @@ export default {
   path: "/flow-chart",
   redirect: "/flow-chart/index",
   meta: {
-    icon: "ep:set-up",
+    icon: "ep/set-up",
     title: $t("menus.pureFlowChart"),
     rank: flowchart
   },

src/router/modules/form.ts

@@ -5,7 +5,7 @@ export default {
   path: "/form",
   redirect: "/form/index",
   meta: {
-    icon: "ri:edit-box-line",
+    icon: "ri/edit-box-line",
     title: $t("menus.pureSchemaForm"),
     rank: form
   },

src/router/modules/formdesign.ts

@@ -6,7 +6,7 @@ export default {
   path: "/form-design",
   redirect: "/form-design/index",
   meta: {
-    icon: "ri:terminal-window-line",
+    icon: "ri/terminal-window-line",
     title: $t("menus.pureFormDesign"),
     rank: formdesign
   },

src/router/modules/ganttastic.ts

@@ -5,7 +5,7 @@ export default {
   path: "/ganttastic",
   redirect: "/ganttastic/index",
   meta: {
-    icon: "ri:bar-chart-horizontal-line",
+    icon: "ri/bar-chart-horizontal-line",
     title: $t("menus.pureGanttastic"),
     rank: ganttastic
   },

src/router/modules/guide.ts

@@ -5,7 +5,7 @@ export default {
   path: "/guide",
   redirect: "/guide/index",
   meta: {
-    icon: "ep:guide",
+    icon: "ep/guide",
     title: $t("menus.pureGuide"),
     rank: guide
   },

src/router/modules/home.ts

@@ -9,7 +9,7 @@ export default {
   component: Layout,
   redirect: "/welcome",
   meta: {
-    icon: "ep:home-filled",
+    icon: "ep/home-filled",
     title: $t("menus.pureHome"),
     rank: home
   },

src/router/modules/list.ts

@@ -5,7 +5,7 @@ export default {
   path: "/list",
   redirect: "/list/card",
   meta: {
-    icon: "ri:list-check",
+    icon: "ri/list-check",
     title: $t("menus.pureList"),
     rank: list
   },
@@ -15,7 +15,7 @@ export default {
       name: "CardList",
       component: () => import("@/views/list/card/index.vue"),
       meta: {
-        icon: "ri:bank-card-line",
+        icon: "ri/bank-card-line",
         title: $t("menus.pureCardList"),
         showParent: true
       }

src/router/modules/markdown.ts

@@ -5,7 +5,7 @@ export default {
   path: "/markdown",
   redirect: "/markdown/index",
   meta: {
-    icon: "ri:markdown-line",
+    icon: "ri/markdown-line",
     title: $t("menus.pureMarkdown"),
     rank: markdown
   },

src/router/modules/mind.ts

@@ -6,7 +6,7 @@ export default {
   path: "/mind-map",
   redirect: "/mind-map/index",
   meta: {
-    icon: "ri:mind-map",
+    icon: "ri/mind-map",
     title: $t("menus.pureMindMap"),
     rank: mind
   },

src/router/modules/nested.ts

@@ -6,7 +6,7 @@ export default {
   redirect: "/nested/menu1/menu1-1",
   meta: {
     title: $t("menus.pureMenus"),
-    icon: "ep:histogram",
+    icon: "ep/histogram",
     rank: nested
   },
   children: [

src/router/modules/ppt.ts

@@ -5,7 +5,7 @@ export default {
   path: "/ppt",
   redirect: "/ppt/index",
   meta: {
-    icon: "ri:file-ppt-2-line",
+    icon: "ri/file-ppt-2-line",
     title: "PPT",
     rank: ppt
   },

src/router/modules/result.ts

@@ -5,7 +5,7 @@ export default {
   path: "/result",
   redirect: "/result/success",
   meta: {
-    icon: "ri:checkbox-circle-line",
+    icon: "ri/checkbox-circle-line",
     title: $t("menus.pureResult"),
     rank: result
   },

src/router/modules/table.ts

@@ -5,7 +5,7 @@ export default {
   path: "/table",
   redirect: "/table/index",
   meta: {
-    icon: "ri:table-line",
+    icon: "ri/table-line",
     title: $t("menus.pureTable"),
     rank: table
   },

src/router/modules/vueflow.ts

@@ -4,7 +4,7 @@ export default {
   path: "/vue-flow",
   redirect: "/vue-flow/index",
   meta: {
-    icon: "ep:set-up",
+    icon: "ep/set-up",
     title: "vue-flow",
     rank: vueflow
   },

src/views/able/menu-tree.vue

@@ -7,7 +7,7 @@ import { useRenderIcon } from "@/components/ReIcon/src/hooks";
 import { extractPathList, deleteChildren } from "@/utils/tree";
 import { usePermissionStoreHook } from "@/store/modules/permission";
 import type { TreeNode } from "element-plus/es/components/tree-v2/src/types";
-import NodeTree from "@iconify-icons/ri/node-tree";
+import NodeTree from "~icons/ri/node-tree";
 
 defineOptions({
   name: "MenuTree"

src/views/able/video.vue

@@ -2,7 +2,7 @@
 import { onMounted } from "vue";
 import { deviceDetection } from "@pureadmin/utils";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";
-import VideoPlay from "@iconify-icons/ep/video-play";
+import VideoPlay from "~icons/ep/video-play";
 
 import Player from "xgplayer";
 import "xgplayer/dist/index.min.css";

src/views/account-settings/components/Profile.vue

@@ -6,7 +6,7 @@ import { type UserInfo, getMine } from "@/api/user";
 import type { FormInstance, FormRules } from "element-plus";
 import ReCropperPreview from "@/components/ReCropperPreview";
 import { createFormData, deviceDetection } from "@pureadmin/utils";
-import uploadLine from "@iconify-icons/ri/upload-line";
+import uploadLine from "~icons/ri/upload-line";
 
 defineOptions({
   name: "Profile"

src/views/account-settings/index.vue

@@ -11,11 +11,11 @@ import AccountManagement from "./components/AccountManagement.vue";
 import { useDataThemeChange } from "@/layout/hooks/useDataThemeChange";
 import LaySidebarTopCollapse from "@/layout/components/lay-sidebar/components/SidebarTopCollapse.vue";
 
-import leftLine from "@iconify-icons/ri/arrow-left-s-line";
+import leftLine from "~icons/ri/arrow-left-s-line";
-import ProfileIcon from "@iconify-icons/ri/user-3-line";
+import ProfileIcon from "~icons/ri/user-3-line";
-import PreferencesIcon from "@iconify-icons/ri/settings-3-line";
+import PreferencesIcon from "~icons/ri/settings-3-line";
-import SecurityLogIcon from "@iconify-icons/ri/window-line";
+import SecurityLogIcon from "~icons/ri/window-line";
-import AccountManagementIcon from "@iconify-icons/ri/profile-line";
+import AccountManagementIcon from "~icons/ri/profile-line";
 
 defineOptions({
   name: "AccountSettings"

src/views/components/message.vue

@@ -3,7 +3,7 @@ import { h } from "vue";
 import hot from "@/assets/svg/hot.svg?component";
 import { message, closeAllMessage } from "@/utils/message";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";
-import Check from "@iconify-icons/ep/check";
+import Check from "~icons/ep/check";
 
 defineOptions({
   name: "Message"

src/views/components/segmented.vue

@@ -1,7 +1,7 @@
 <script setup lang="tsx">
 import { h, ref, watch } from "vue";
 import { message } from "@/utils/message";
-import HomeFilled from "@iconify-icons/ep/home-filled";
+import HomeFilled from "~icons/ep/home-filled";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";
 import Segmented, { type OptionsType } from "@/components/ReSegmented";
 

src/views/components/timeline.vue

@@ -3,7 +3,7 @@ import { markRaw } from "vue";
 import { randomGradient } from "@pureadmin/utils";
 import { useRenderFlicker } from "@/components/ReFlicker";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";
-import Iphone from "@iconify-icons/ep/iphone";
+import Iphone from "~icons/ep/iphone";
 
 defineOptions({
   name: "TimeLine"

src/views/components/upload/form.vue

@@ -4,7 +4,7 @@ import { formUpload } from "@/api/mock";
 import { message } from "@/utils/message";
 import { createFormData } from "@pureadmin/utils";
 
-import UploadIcon from "@iconify-icons/ri/upload-2-line";
+import UploadIcon from "~icons/ri/upload-2-line";
 
 const formRef = ref();
 const uploadRef = ref();

src/views/components/upload/index.vue

@@ -8,9 +8,9 @@ import { message } from "@/utils/message";
 import type { UploadFile } from "element-plus";
 import { getKeyList, extractFields, downloadByData } from "@pureadmin/utils";
 
-import Add from "@iconify-icons/ep/plus";
+import Add from "~icons/ep/plus";
-import Eye from "@iconify-icons/ri/eye-line";
+import Eye from "~icons/ri/eye-line";
-import Delete from "@iconify-icons/ri/delete-bin-7-line";
+import Delete from "~icons/ri/delete-bin-7-line";
 
 defineOptions({
   name: "PureUpload"

src/views/list/card/components/ListCard.vue

@@ -5,7 +5,7 @@ import laptopIcon from "@/assets/svg/laptop.svg?component";
 import serviceIcon from "@/assets/svg/service.svg?component";
 import calendarIcon from "@/assets/svg/calendar.svg?component";
 import userAvatarIcon from "@/assets/svg/user_avatar.svg?component";
-import More2Fill from "@iconify-icons/ri/more-2-fill";
+import More2Fill from "~icons/ri/more-2-fill";
 
 defineOptions({
   name: "ReCard"

src/views/list/card/index.vue

@@ -6,7 +6,7 @@ import { ref, onMounted, nextTick } from "vue";
 import ListCard from "./components/ListCard.vue";
 import ListDialogForm from "./components/ListDialogForm.vue";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";
-import AddFill from "@iconify-icons/ri/add-circle-line";
+import AddFill from "~icons/ri/add-circle-line";
 
 defineOptions({
   name: "CardList"

src/views/login/components/LoginPhone.vue

@@ -9,7 +9,8 @@ import { $t, transformI18n } from "@/plugins/i18n";
 import { useVerifyCode } from "../utils/verifyCode";
 import { useUserStoreHook } from "@/store/modules/user";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";
-import Iphone from "@iconify-icons/ep/iphone";
+import Iphone from "~icons/ep/iphone";
+import Keyhole from "~icons/ri/shield-keyhole-line";
 
 const { t } = useI18n();
 const loading = ref(false);
@@ -64,7 +65,7 @@ function onBack() {
             v-model="ruleForm.verifyCode"
             clearable
             :placeholder="t('login.pureSmsVerifyCode')"
-            :prefix-icon="useRenderIcon('ri:shield-keyhole-line')"
+            :prefix-icon="useRenderIcon(Keyhole)"
           />
           <el-button
             :disabled="isDisabled"

src/views/login/components/LoginRegist.vue

@@ -9,9 +9,10 @@ import { useVerifyCode } from "../utils/verifyCode";
 import { $t, transformI18n } from "@/plugins/i18n";
 import { useUserStoreHook } from "@/store/modules/user";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";
-import Lock from "@iconify-icons/ri/lock-fill";
+import Lock from "~icons/ri/lock-fill";
-import Iphone from "@iconify-icons/ep/iphone";
+import Iphone from "~icons/ep/iphone";
-import User from "@iconify-icons/ri/user-3-fill";
+import User from "~icons/ri/user-3-fill";
+import Keyhole from "~icons/ri/shield-keyhole-line";
 
 const { t } = useI18n();
 const checked = ref(false);
@@ -118,7 +119,7 @@ function onBack() {
             v-model="ruleForm.verifyCode"
             clearable
             :placeholder="t('login.pureSmsVerifyCode')"
-            :prefix-icon="useRenderIcon('ri:shield-keyhole-line')"
+            :prefix-icon="useRenderIcon(Keyhole)"
           />
           <el-button
             :disabled="isDisabled"

src/views/login/components/LoginUpdate.vue

@@ -9,8 +9,9 @@ import { useVerifyCode } from "../utils/verifyCode";
 import { $t, transformI18n } from "@/plugins/i18n";
 import { useUserStoreHook } from "@/store/modules/user";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";
-import Lock from "@iconify-icons/ri/lock-fill";
+import Lock from "~icons/ri/lock-fill";
-import Iphone from "@iconify-icons/ep/iphone";
+import Iphone from "~icons/ep/iphone";
+import Keyhole from "~icons/ri/shield-keyhole-line";
 
 const { t } = useI18n();
 const loading = ref(false);
@@ -88,7 +89,7 @@ function onBack() {
             v-model="ruleForm.verifyCode"
             clearable
             :placeholder="t('login.pureSmsVerifyCode')"
-            :prefix-icon="useRenderIcon('ri:shield-keyhole-line')"
+            :prefix-icon="useRenderIcon(Keyhole)"
           />
           <el-button
             :disabled="isDisabled"

src/views/login/index.vue

@@ -28,10 +28,11 @@ import { useDataThemeChange } from "@/layout/hooks/useDataThemeChange";
 import dayIcon from "@/assets/svg/day.svg?component";
 import darkIcon from "@/assets/svg/dark.svg?component";
 import globalization from "@/assets/svg/globalization.svg?component";
-import Lock from "@iconify-icons/ri/lock-fill";
+import Lock from "~icons/ri/lock-fill";
-import Check from "@iconify-icons/ep/check";
+import Check from "~icons/ep/check";
-import User from "@iconify-icons/ri/user-3-fill";
+import User from "~icons/ri/user-3-fill";
-import Info from "@iconify-icons/ri/information-line";
+import Info from "~icons/ri/information-line";
+import Keyhole from "~icons/ri/shield-keyhole-line";
 
 defineOptions({
   name: "Login"
@@ -224,7 +225,7 @@ watch(loginDay, value => {
                   v-model="ruleForm.verifyCode"
                   clearable
                   :placeholder="t('login.pureVerifyCode')"
-                  :prefix-icon="useRenderIcon('ri:shield-keyhole-line')"
+                  :prefix-icon="useRenderIcon(Keyhole)"
                 >
                   <template v-slot:append>
                     <ReImageVerify v-model:code="imgCode" />

src/views/monitor/logs/login/index.vue

@@ -5,8 +5,8 @@ import { getPickerShortcuts } from "../../utils";
 import { PureTableBar } from "@/components/RePureTableBar";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";
 
-import Delete from "@iconify-icons/ep/delete";
+import Delete from "~icons/ep/delete";
-import Refresh from "@iconify-icons/ep/refresh";
+import Refresh from "~icons/ep/refresh";
 
 defineOptions({
   name: "LoginLog"

src/views/monitor/logs/operation/index.vue

@@ -5,8 +5,8 @@ import { getPickerShortcuts } from "../../utils";
 import { PureTableBar } from "@/components/RePureTableBar";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";
 
-import Delete from "@iconify-icons/ep/delete";
+import Delete from "~icons/ep/delete";
-import Refresh from "@iconify-icons/ep/refresh";
+import Refresh from "~icons/ep/refresh";
 
 defineOptions({
   name: "OperationLog"

src/views/monitor/logs/system/hook.tsx

@@ -6,7 +6,7 @@ import type { PaginationProps } from "@pureadmin/table";
 import { type Ref, reactive, ref, onMounted, toRaw } from "vue";
 import { getKeyList, useCopyToClipboard } from "@pureadmin/utils";
 import { getSystemLogsList, getSystemLogsDetail } from "@/api/system";
-import Info from "@iconify-icons/ri/question-line";
+import Info from "~icons/ri/question-line";
 
 export function useRole(tableRef: Ref) {
   const form = reactive({

src/views/monitor/logs/system/index.vue

@@ -5,9 +5,9 @@ import { getPickerShortcuts } from "../../utils";
 import { PureTableBar } from "@/components/RePureTableBar";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";
 
-import View from "@iconify-icons/ep/view";
+import View from "~icons/ep/view";
-import Delete from "@iconify-icons/ep/delete";
+import Delete from "~icons/ep/delete";
-import Refresh from "@iconify-icons/ep/refresh";
+import Refresh from "~icons/ep/refresh";
 
 defineOptions({
   name: "SystemLog"

src/views/monitor/online/index.vue

@@ -4,8 +4,8 @@ import { useRole } from "./hook";
 import { PureTableBar } from "@/components/RePureTableBar";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";
 
-import Plane from "@iconify-icons/ri/plane-line";
+import Plane from "~icons/ri/plane-line";
-import Refresh from "@iconify-icons/ep/refresh";
+import Refresh from "~icons/ep/refresh";
 
 defineOptions({
   name: "OnlineUser"

src/views/result/columns.tsx

@@ -1,5 +1,5 @@
-import ArrowRightSLine from "@iconify-icons/ri/arrow-right-s-line";
+import ArrowRightSLine from "~icons/ri/arrow-right-s-line";
-import CloseCircleLine from "@iconify-icons/ri/close-circle-line";
+import CloseCircleLine from "~icons/ri/close-circle-line";
 
 export function useColumns() {
   const columns = [

src/views/system/dept/index.vue

@@ -4,10 +4,10 @@ import { useDept } from "./utils/hook";
 import { PureTableBar } from "@/components/RePureTableBar";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";
 
-import Delete from "@iconify-icons/ep/delete";
+import Delete from "~icons/ep/delete";
-import EditPen from "@iconify-icons/ep/edit-pen";
+import EditPen from "~icons/ep/edit-pen";
-import Refresh from "@iconify-icons/ep/refresh";
+import Refresh from "~icons/ep/refresh";
-import AddFill from "@iconify-icons/ri/add-circle-line";
+import AddFill from "~icons/ri/add-circle-line";
 
 defineOptions({
   name: "SystemDept"

src/views/system/menu/index.vue

@@ -5,10 +5,10 @@ import { transformI18n } from "@/plugins/i18n";
 import { PureTableBar } from "@/components/RePureTableBar";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";
 
-import Delete from "@iconify-icons/ep/delete";
+import Delete from "~icons/ep/delete";
-import EditPen from "@iconify-icons/ep/edit-pen";
+import EditPen from "~icons/ep/edit-pen";
-import Refresh from "@iconify-icons/ep/refresh";
+import Refresh from "~icons/ep/refresh";
-import AddFill from "@iconify-icons/ri/add-circle-line";
+import AddFill from "~icons/ri/add-circle-line";
 
 defineOptions({
   name: "SystemMenu"

src/views/system/role/index.vue

@@ -10,15 +10,15 @@ import {
   useResizeObserver
 } from "@pureadmin/utils";
 
-// import Database from "@iconify-icons/ri/database-2-line";
+// import Database from "~icons/ri/database-2-line";
-// import More from "@iconify-icons/ep/more-filled";
+// import More from "~icons/ep/more-filled";
-import Delete from "@iconify-icons/ep/delete";
+import Delete from "~icons/ep/delete";
-import EditPen from "@iconify-icons/ep/edit-pen";
+import EditPen from "~icons/ep/edit-pen";
-import Refresh from "@iconify-icons/ep/refresh";
+import Refresh from "~icons/ep/refresh";
-import Menu from "@iconify-icons/ep/menu";
+import Menu from "~icons/ep/menu";
-import AddFill from "@iconify-icons/ri/add-circle-line";
+import AddFill from "~icons/ri/add-circle-line";
-import Close from "@iconify-icons/ep/close";
+import Close from "~icons/ep/close";
-import Check from "@iconify-icons/ep/check";
+import Check from "~icons/ep/check";
 
 defineOptions({
   name: "SystemRole"

src/views/system/user/index.vue

@@ -5,14 +5,14 @@ import { useUser } from "./utils/hook";
 import { PureTableBar } from "@/components/RePureTableBar";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";
 
-import Upload from "@iconify-icons/ri/upload-line";
+import Upload from "~icons/ri/upload-line";
-import Role from "@iconify-icons/ri/admin-line";
+import Role from "~icons/ri/admin-line";
-import Password from "@iconify-icons/ri/lock-password-line";
+import Password from "~icons/ri/lock-password-line";
-import More from "@iconify-icons/ep/more-filled";
+import More from "~icons/ep/more-filled";
-import Delete from "@iconify-icons/ep/delete";
+import Delete from "~icons/ep/delete";
-import EditPen from "@iconify-icons/ep/edit-pen";
+import EditPen from "~icons/ep/edit-pen";
-import Refresh from "@iconify-icons/ep/refresh";
+import Refresh from "~icons/ep/refresh";
-import AddFill from "@iconify-icons/ri/add-circle-line";
+import AddFill from "~icons/ri/add-circle-line";
 
 defineOptions({
   name: "SystemUser"

src/views/system/user/tree.vue

@@ -2,11 +2,11 @@
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";
 import { ref, computed, watch, getCurrentInstance } from "vue";
 
-import Dept from "@iconify-icons/ri/git-branch-line";
+import Dept from "~icons/ri/git-branch-line";
-// import Reset from "@iconify-icons/ri/restart-line";
+// import Reset from "~icons/ri/restart-line";
-import More2Fill from "@iconify-icons/ri/more-2-fill";
+import More2Fill from "~icons/ri/more-2-fill";
-import OfficeBuilding from "@iconify-icons/ep/office-building";
+import OfficeBuilding from "~icons/ep/office-building";
-import LocationCompany from "@iconify-icons/ep/add-location";
+import LocationCompany from "~icons/ep/add-location";
 import ExpandIcon from "./svg/expand.svg?component";
 import UnExpandIcon from "./svg/unexpand.svg?component";
 

src/views/table/base/header-renderer/index.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useColumns } from "./columns";
-import Calendar from "@iconify-icons/ri/calendar-2-line";
+import Calendar from "~icons/ri/calendar-2-line";
 
 const { columns, filterTableData } = useColumns();
 </script>

src/views/table/edit/demo1/index.vue

@@ -2,8 +2,8 @@
 import { useColumns } from "./columns";
 import Empty from "../empty.svg?component";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";
-import AddFill from "@iconify-icons/ep/plus";
+import AddFill from "~icons/ep/plus";
-import Delete from "@iconify-icons/ep/delete";
+import Delete from "~icons/ep/delete";
 
 const { columns, dataList, onAdd, onDel } = useColumns();
 </script>

src/views/table/edit/demo3/columns.tsx

@@ -1,8 +1,8 @@
 import { ref, computed } from "vue";
 import { tableDataEdit } from "../data";
 
-import EditPen from "@iconify-icons/ep/edit-pen";
+import EditPen from "~icons/ep/edit-pen";
-import Check from "@iconify-icons/ep/check";
+import Check from "~icons/ep/check";
 
 export function useColumns() {
   const editMap = ref({});

src/views/welcome/components/table/columns.tsx

@@ -2,8 +2,8 @@ import { tableData } from "../../data";
 import { delay } from "@pureadmin/utils";
 import { ref, onMounted, reactive } from "vue";
 import type { PaginationProps } from "@pureadmin/table";
-import ThumbUp from "@iconify-icons/ri/thumb-up-line";
+import ThumbUp from "~icons/ri/thumb-up-line";
-import Hearts from "@iconify-icons/ri/hearts-line";
+import Hearts from "~icons/ri/hearts-line";
 import Empty from "./empty.svg?component";
 
 export function useColumns() {

src/views/welcome/data.ts

@@ -1,8 +1,8 @@
 import { dayjs, cloneDeep, getRandomIntBetween } from "./utils";
-import GroupLine from "@iconify-icons/ri/group-line";
+import GroupLine from "~icons/ri/group-line";
-import Question from "@iconify-icons/ri/question-answer-line";
+import Question from "~icons/ri/question-answer-line";
-import CheckLine from "@iconify-icons/ri/chat-check-line";
+import CheckLine from "~icons/ri/chat-check-line";
-import Smile from "@iconify-icons/ri/star-smile-line";
+import Smile from "~icons/ri/star-smile-line";
 
 const days = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
 

tsconfig.json

@@ -35,6 +35,7 @@
       "vite/client",
       "element-plus/global",
       "@pureadmin/table/volar",
+      "unplugin-icons/types/vue",
       "@pureadmin/descriptions/volar"
     ]
   },

types/router.d.ts

@@ -15,9 +15,9 @@ declare global {
     /** 菜单名称（兼容国际化、非国际化，如何用国际化的写法就必须在根目录的`locales`文件夹下对应添加） `必填` */
     title: string;
     /** 菜单图标 `可选` */
-    icon?: string | FunctionalComponent | IconifyIcon;
+    icon?: string | FunctionalComponent;
     /** 菜单名称右侧的额外图标 */
-    extraIcon?: string | FunctionalComponent | IconifyIcon;
+    extraIcon?: string | FunctionalComponent;
     /** 是否在菜单中显示（默认`true`）`可选` */
     showLink?: boolean;
     /** 是否显示父级菜单 `可选` */
@@ -91,7 +91,7 @@ declare global {
       /** 菜单名称（兼容国际化、非国际化，如何用国际化的写法就必须在根目录的`locales`文件夹下对应添加）`必填` */
       title: string;
       /** 菜单图标 `可选` */
-      icon?: string | FunctionalComponent | IconifyIcon;
+      icon?: string | FunctionalComponent;
       /** 是否在菜单中显示（默认`true`）`可选` */
       showLink?: boolean;
       /** 菜单升序排序，值越高排的越后（只针对顶级路由）`可选` */
@@ -104,5 +104,6 @@ declare global {
 
 // https://router.vuejs.org/zh/guide/advanced/meta.html#typescript
 declare module "vue-router" {
+  // eslint-disable-next-line @typescript-eslint/no-empty-object-type
   interface RouteMeta extends CustomizeRouteMeta {}
 }