全局注册icon组件

components.d.ts

@@ -17,6 +17,7 @@ declare module '@vue/runtime-core' {
     IconTooling: typeof import('./src/components/icons/IconTooling.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
+    SvgIcon: typeof import('./src/components/SvgIcon/index.vue')['default']
     TheWelcome: typeof import('./src/components/TheWelcome.vue')['default']
     WelcomeItem: typeof import('./src/components/WelcomeItem.vue')['default']
   }

package.json

@@ -44,6 +44,7 @@
     "unplugin-auto-import": "^0.15.3",
     "unplugin-vue-components": "^0.24.1",
     "vite": "^4.1.4",
+    "vite-plugin-svg-icons": "^2.0.1",
     "vue-tsc": "^1.2.0"
   },
   "lint-staged": {

src/components/SvgIcon/index.vue

@@ -0,0 +1,49 @@
+<template>
+  <div class="c-svg">
+    <svg
+      :class="svgClass"
+      v-bind="$attrs"
+      :style="{ color: color, fontSize: size/10 + 'rem' }"
+    >
+      <use :href="iconName"></use>
+    </svg>
+  </div>
+</template>
+
+<script setup>
+import { computed } from "vue";
+const props = defineProps({
+  name: {
+    type: String,
+    required: true,
+  },
+  color: {
+    type: String,
+    default: "",
+  },
+  size: {
+    type: [Number, String],
+    default: 16,
+  },
+});
+const iconName = computed(() => `#icon-${props.name}`);
+const svgClass = computed(() => {
+  if (props.name) return `svg-icon icon-${props.name}`;
+  return "svg-icon";
+});
+</script>
+
+<style scoped>
+.svg-icon {
+  width: 1em;
+  height: 1em;
+  fill: currentColor;
+}
+.c-svg {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+</style>

src/main.ts

@@ -6,6 +6,8 @@ import router from './router'
 import store from './stores/index'
 import 'normalize.css/normalize.css'
 import './assets/css/style.css'
+import SvgIcon from "@/component/SvgIcon/index.vue";
+
 
 import flexible from "./utils/flexible.js";
 
@@ -27,6 +29,8 @@ const app = createApp(App)
 // app.use(ElementPlus)
 app.use(router)
 app.use(store)
+app.component("SvgIcon", SvgIcon)
+
 flexible();
 
 app.mount('#app')

vite.config.ts

@@ -5,6 +5,7 @@ import vue from '@vitejs/plugin-vue'
 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";
 import path from "path";
 
 // console.log(process)
@@ -21,6 +22,13 @@ export default defineConfig({
     }),
     Components({
       resolvers: [ElementPlusResolver()],
+    }),
+	createSvgIconsPlugin({
+        // 指定需要缓存的图标文件夹
+        iconDirs: [path.resolve(process.cwd(), "src/assets/icons")],
+        // 指定symbolId格式
+        symbolId: "icon-[dir]-[name]",
+        inject: "body-last", // 注入位置优化
     }),
   ],
   css: {