feat: svg解析

package.json

@@ -31,6 +31,7 @@
     "typescript": "^4.5.4",
     "vite": "^2.9.9",
     "vite-plugin-eslint": "^1.6.1",
+    "vite-plugin-svg-icons": "^2.0.1",
     "vite-plugin-windicss": "^1.8.6",
     "vue-eslint-parser": "^9.0.3",
     "vue-tsc": "^0.34.7",

src/components/svg-analysis/index.vue

@@ -0,0 +1,15 @@
+<template>
+  <svg aria-hidden="true">
+    <use :xlink:href="symbolId" />
+  </svg>
+</template>
+<script setup lang="ts">
+  import { computed } from 'vue';
+  const props = defineProps({
+    name: {
+      type: String,
+      required: true
+    }
+  });
+  const symbolId = computed(() => `#svg-${props.name}`);
+</script>

src/main.ts

@@ -2,6 +2,7 @@ import { createApp } from 'vue';
 import App from './App.vue';
 import router from './router/index';
 import 'virtual:windi.css';
+import 'virtual:svg-icons-register';
 const app = createApp(App);
 app.use(router);
 app.mount('#app');

vite.config.ts

@@ -1,7 +1,9 @@
 import { defineConfig } from 'vite';
 import vue from '@vitejs/plugin-vue';
+import { resolve } from 'path';
 import eslintPlugin from 'vite-plugin-eslint';
 import WindiCSS from 'vite-plugin-windicss';
+import { createSvgIconsPlugin } from 'vite-plugin-svg-icons';
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [
@@ -10,6 +12,12 @@ export default defineConfig({
       cache: false,
       include: ['src/**/*.vue', 'src/**/*.ts', 'src/**/*.tsx'] // 检查的文件
     }),
-    WindiCSS()
+    WindiCSS(),
+    createSvgIconsPlugin({
+      // 指定需要缓存的图标文件夹
+      iconDirs: [resolve(process.cwd(), 'src/assets/svgs')],
+      // 指定symbolId格式
+      symbolId: 'svg-[name]'
+    })
   ]
 });