vue3+vite svg图标的使用

这个基本纯属靠大佬，毕竟不会写插件这边就写写过程。

首先安装svg相应的开发插件

npm install svg-sprite-loader -D

 然后我们使用svg按照vue的开发文档上说都是先封装一个svg组件

<script setup lang="ts">
import { computed } from '@vue/reactivity';

 
 const props=defineProps({
     name:{
         type: String,
         required:true
     },
     color:{
         type:String,
         default:''
     }
 })

 const iconName=computed(()=>`#icon-${props.name}`);
 const svgClass=computed(()=>{
     if(props.name){
         return `svg-icon icon-${props.name}`
     }
     return `svg-icon`
 })

</script>
 
<template>
<svg :class="svgClass" v-bind="$attrs" :style="{color: color}">
    <use :xlink:href="iconName"/>
</svg>
</template>
 
<style lang="less" scoped>
.svg-icon {
        width