feat(projects): 本地svg动态渲染图标

ISSUES CLOSED: #61

.eslintrc.js

@@ -182,7 +182,7 @@ module.exports = {
         pathGroupsExcludedImportTypes: ['vue', 'vue-router', 'vuex', 'pinia', 'naive-ui']
       }
     ],
-    'import/no-unresolved': ['error', { ignore: ['uno.css', '~icons/*'] }],
+    'import/no-unresolved': ['error', { ignore: ['uno.css', '~icons/*', 'virtual:svg-icons-register'] }],
     'import/prefer-default-export': 'off',
     'max-classes-per-file': 'off',
     'no-param-reassign': [

build/index.ts

@@ -1,2 +1,3 @@
 export * from './plugins';
 export * from './config';
+export * from './utils';

build/plugins/index.ts

@@ -10,10 +10,9 @@ import compress from './compress';
 /**
  * vite插件
  * @param viteEnv - 环境变量配置
- * @param srcPath - src路径
  */
-export function setupVitePlugins(viteEnv: ImportMetaEnv, srcPath: string): (PluginOption | PluginOption[])[] {
-  const plugins = [...vue, html(viteEnv), ...unplugin(srcPath), unocss, mock];
+export function setupVitePlugins(viteEnv: ImportMetaEnv): (PluginOption | PluginOption[])[] {
+  const plugins = [...vue, html(viteEnv), ...unplugin, unocss, mock];
 
   if (viteEnv.VITE_VISUALIZER === 'true') {
     plugins.push(visualizer);

build/plugins/unplugin.ts

@@ -4,22 +4,32 @@ import IconsResolver from 'unplugin-icons/resolver';
 import Components from 'unplugin-vue-components/vite';
 import { NaiveUiResolver } from 'unplugin-vue-components/resolvers';
 import { FileSystemIconLoader } from 'unplugin-icons/loaders';
+import { createSvgIconsPlugin } from 'vite-plugin-svg-icons';
+import { getSrcPath } from '../utils';
 
-export default (srcPath: string) => {
-  return [
-    DefineOptions(),
-    Icons({
-      compiler: 'vue3',
-      customCollections: {
-        custom: FileSystemIconLoader(`${srcPath}/assets/svg`)
-      },
-      scale: 1,
-      defaultClass: 'inline-block'
-    }),
-    Components({
-      dts: 'src/typings/components.d.ts',
-      types: [{ from: 'vue-router', names: ['RouterLink', 'RouterView'] }],
-      resolvers: [NaiveUiResolver(), IconsResolver({ customCollections: ['custom'], componentPrefix: 'icon' })]
-    })
-  ];
-};
+const srcPath = getSrcPath();
+
+const customIconPath = `${srcPath}/assets/svg`;
+
+export default [
+  DefineOptions(),
+  Icons({
+    compiler: 'vue3',
+    customCollections: {
+      custom: FileSystemIconLoader(customIconPath)
+    },
+    scale: 1,
+    defaultClass: 'inline-block'
+  }),
+  Components({
+    dts: 'src/typings/components.d.ts',
+    types: [{ from: 'vue-router', names: ['RouterLink', 'RouterView'] }],
+    resolvers: [NaiveUiResolver(), IconsResolver({ customCollections: ['custom'], componentPrefix: 'icon' })]
+  }),
+  createSvgIconsPlugin({
+    iconDirs: [customIconPath],
+    symbolId: 'icon-custom-[dir]-[name]',
+    inject: 'body-last',
+    customDomId: '__CUSTOM_SVG_ICON__'
+  })
+];

build/utils/index.ts

@@ -0,0 +1,20 @@
+import path from 'path';
+
+/**
+ * 获取项目根路径
+ * @descrition 结尾不带斜杠
+ */
+export function getRootPath() {
+  return path.resolve(process.cwd());
+}
+
+/**
+ * 获取项目src路径
+ * @param srcName - src目录名称(默认: "src")
+ * @descrition 结尾不带斜杠
+ */
+export function getSrcPath(srcName = 'src') {
+  const rootPath = getRootPath();
+
+  return `${rootPath}/${srcName}`;
+}

mock/model/route.ts

@@ -250,7 +250,7 @@ export const routeModel: Record<Auth.RoleType, AuthRoute.Route[]> = {
           meta: {
             title: '图标',
             requiresAuth: true,
-            icon: 'ic:baseline-insert-emoticon'
+            customIcon: 'custom-icon'
           }
         },
         {
@@ -709,7 +709,7 @@ export const routeModel: Record<Auth.RoleType, AuthRoute.Route[]> = {
           meta: {
             title: '图标',
             requiresAuth: true,
-            icon: 'ic:baseline-insert-emoticon'
+            customIcon: 'custom-icon'
           }
         },
         {

package.json

@@ -1,11 +1,11 @@
 {
   "name": "soybean-admin",
   "version": "0.9.5",
-	"author": {
-		"name": "Soybean",
-		"email": "honghuangdc@gmail.com",
-		"url": "https://github.com/honghuangdc"
-	},
+  "author": {
+    "name": "Soybean",
+    "email": "honghuangdc@gmail.com",
+    "url": "https://github.com/honghuangdc"
+  },
   "scripts": {
     "dev": "cross-env VITE_ENV_TYPE=dev vite",
     "dev:test": "cross-env VITE_ENV_TYPE=test vite",
@@ -103,15 +103,16 @@
     "vite-plugin-compression": "^0.5.1",
     "vite-plugin-html": "^3.2.0",
     "vite-plugin-mock": "^2.9.6",
+    "vite-plugin-svg-icons": "^2.0.1",
     "vue-eslint-parser": "^9.0.2",
     "vue-tsc": "^0.37.8"
   },
-	"homepage": "https://github.com/honghuangdc/soybean-admin",
-	"repository": {
-		"url": "https://github.com/honghuangdc/soybean-admin.git"
-	},
-	"bugs": {
-		"url": "https://github.com/honghuangdc/soybean-admin/issues"
-	},
+  "homepage": "https://github.com/honghuangdc/soybean-admin",
+  "repository": {
+    "url": "https://github.com/honghuangdc/soybean-admin.git"
+  },
+  "bugs": {
+    "url": "https://github.com/honghuangdc/soybean-admin/issues"
+  },
   "license": "MIT"
 }