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": "[email protected]",
- "url": "https:/honghuangdc"
- },
+ "author": {
+ "name": "Soybean",
+ "email": "[email protected]",
+ "url": "https:/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:/honghuangdc/soybean-admin",
- "repository": {
- "url": "https:/honghuangdc/soybean-admin.git"
- },
- "bugs": {
- "url": "https:/honghuangdc/soybean-admin/issues"
- },
+ "homepage": "https:/honghuangdc/soybean-admin",
+ "repository": {
+ "url": "https:/honghuangdc/soybean-admin.git"
+ },
+ "bugs": {
+ "url": "https:/honghuangdc/soybean-admin/issues"
+ },
  "license": "MIT"
 }