增加svg插件

package.json

@@ -19,6 +19,7 @@
     "js-cookie": "^3.0.5",
     "mockjs": "^1.1.0",
     "pinia": "^2.1.7",
+    "vite-plugin-svg-icons": "^2.0.1",
     "vue": "^3.4.21",
     "vue-echarts": "^6.6.9",
     "vue-router": "^4.3.0"

src/App.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import "virtual:svg-icons-register";
 import {  RouterView } from 'vue-router'
 
 </script>

src/assets/icons/back.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1711604673322" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5054" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M444.458667 300.928a42.666667 42.666667 0 1 0-60.373334-60.373333l-241.322666 241.365333a42.538667 42.538667 0 0 0 0 60.373333l241.322666 241.322667a42.666667 42.666667 0 1 0 60.373334-60.330667l-211.2-211.2 211.2-211.2z" fill="#000000" p-id="5055"></path><path d="M170.666667 512a42.666667 42.666667 0 0 1 42.666666-42.666667h640a42.666667 42.666667 0 1 1 0 85.333334H213.333333a42.666667 42.666667 0 0 1-42.666666-42.666667z" fill="#000000" p-id="5056"></path></svg>

src/components/QSvg/index.vue

@@ -0,0 +1,29 @@
+<template>
+  <svg aria-hidden="true">
+    <use :xlink:href="symbolId" :fill="color" />
+  </svg>
+</template>
+
+<script setup name="QSvg" lang="ts">
+const props = defineProps({
+  prefix: {
+    type: String,
+    default: 'icon',
+  },
+  name: {
+    type: String,
+    required: false,//页面刷新的时候，请求数据返回慢，会报一个类型错误
+    default: 'buy'
+  },
+  color: {
+    type: String,
+    default: '#333',
+  },
+});
+const symbolId = computed(() => `#${props.prefix}-${props.name}`);
+defineExpose({
+  symbolId: symbolId,
+});
+</script>
+
+<style lang="less" scoped></style>

vite.config.ts

@@ -6,6 +6,7 @@ import { resolve } from "path";
 import AutoImport from 'unplugin-auto-import/vite'
 import Components from 'unplugin-vue-components/vite'
 import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
+import { createSvgIconsPlugin } from 'vite-plugin-svg-icons';
 //https://github.com/element-plus/unplugin-element-plus/blob/HEAD/README.zh-CN.md
 import ElementPlus from 'unplugin-element-plus/vite'
 export default defineConfig(({ command, mode }: ConfigEnv): UserConfig => {
@@ -27,8 +28,16 @@ export default defineConfig(({ command, mode }: ConfigEnv): UserConfig => {
       dts: './auto-imports.d.ts'
 
     }),
+    createSvgIconsPlugin({
+      // 指定需要缓存的图标文件夹
+      iconDirs: [resolve(process.cwd(), 'src/assets/icons')],
+      // 指定symbolId格式
+      symbolId: 'icon-[dir]-[name]',
+    }),
     Components({
       resolvers: [ElementPlusResolver()],
+      // 指定自动导入的组件位置，默认是 src/components
+      dirs: ['src/components','src/otherComponents'],
     }),
     ElementPlus({
       // useSource: true