全局注册icon组件

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')