问题描述：
    有时前端需要要图标根据不同的状态展示不同的样式，或者是个动态资源。前端就需要保存大量的图片做资源替换，造成资源浪费，同时svg图片非常小，放大不会失真。

    vue3中使用svg图和vue2不相同。此处为vue3的svg图使用方法
    xxx是svg图片的文件名称
    示例：

    1.首先安装 vite-plugin-svg-icons 编辑的时候自动用于生成 svg 精灵图

    1. yarn add vite-plugin-svg-icons/npm i vite-plugin-svg-icons

    2.在vite.config中添加svg配置信息
    public：在vue3中，静态资源统一放置在publish文件夹下。

    1. import viteSvgIcons from 'vite-plugin-svg-icons'
    2. import path from 'path'
    4.  plugins: [
    5.       viteSvgIcons({
    6.         // svg图标放置的位置
    7.         iconDirs: [path.resolve(process.cwd(), 'public/svgIcons')],
    8.         symbolId:'icon-[dir]-[name]',
    9.       })
    10.     ],

    3.在main.ts中进行全局注入

    1. import 'vite-plugin-svg-icons/register'
    2. import svgIcon from'@/components/SvgIcon/index.vue'
    3. // 注册全局svg组件
    4. app.component('SvgIcon', svgIcon)

    4.在components文件加下增加SvgIcon文件放置svg组件

    1. <template>
    2.   <svg :class="svgClass" aria-hidden="true">
    3.     <use :xlink:href="name"  :fill="color" />
    4.   </svg>
    5. </template>
    6. <script lang="ts">
    7. import { computed, defineComponent } from'vue'
    8. export default defineComponent({
    9.   props: {
    10.     // svgicon图标的文件名称
    11.     iconName: {
    12.       type:String,
    13.       required:true
    14.     },
    15.     // svg图标的样式
    16.     className: {
    17.       type:String,
    18.       default:''
    19.     },
    20.     // icon的填充颜色
    21.     color: {
    22.       type:String,
    23.       default:'#fff'
    24.     }
    25.   },
    26.   setup(props) {
    27.     return {
    28.       name: computed(() =>`#icon-${props.iconName}`),
    29.       svgClass: computed(() => {
    30.         if (props.className) {
    31.           return `svg-icon ${props.className}`
    32.         }
    33.         return 'svg-icon'
    34.       })
    35.     }
    36.   }
    37. })
    38. </script>
    39. <style scope>
    40. .svg-icon {
    41.   width: 20px;
    42.   height: 20px;
    43.   fill: currentColor;
    44.   vertical-align: middle;
    45. }
    46. </style>

    注意事项：
    1.如果svg图标无法通过color更改颜色，需要更改svg文件的stroke=”currentColor”，采用当前颜色
    2.如果svg有一个固定的填充色，一直无法改变，需要修改
    可以删除或者添加一个初始填充值

    svg资源示例：

    1. <?xml version="1.0" encoding="UTF-8"?>
    2. <svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    3.     <title>直播</title>
    4.     <g id="直播售车" stroke="currentColor" stroke-width="1" fill="none" fill-rule="evenodd">
    5.         <g id="巨量-直播中控备份" transform="translate(-16.000000, -83.000000)" fill-rule="nonzero">
    6.             <g id="编组-6" transform="translate(8.000000, 81.000000)">
    7.                 <g id="编组-4" transform="translate(8.000000, 0.000000)">
    8.                     <g id="直播" transform="translate(0.000000, 2.000000)">
    9.                         <rect id="矩形" opacity="0" x="0" y="0" width="16" height="16"></rect>
    10.                         <path d="M9.5,3.16666667 C10.5125,3.16666667 11.3333333,3.9875 11.3333333,5 L11.3333333,5.6925 L12.98,4.87283333 C13.3416383,4.69277099 13.7706917,4.71261251 14.1141681,4.9252828 C14.4576445,5.13795308 14.6666667,5.51318066 14.6666667,5.91716667 L14.6666667,10.1388333 C14.6666667,10.5467046 14.4535947,10.9249447 14.1048106,11.1363889 C13.7560265,11.3478331 13.3221418,11.361778 12.9605,11.1731667 L11.3333333,10.3246667 L11.3333333,11 C11.3333333,12.0125 10.5125,12.8333333 9.5,12.8333333 L3.16666667,12.8333333 C2.15416667,12.8333333 1.33333333,12.0125 1.33333333,11 L1.33333333,5 C1.33333333,3.9875 2.15416666,3.16666667 3.16666667,3.16666667 L9.5,3.16666667 Z M13.4256667,5.768 L11.3333333,6.80966667 L11.3333333,9.19666667 L13.423,10.2863333 C13.4746425,10.3132353 13.5365808,10.3112345 13.5863794,10.2810556 C13.6361779,10.2508767 13.6666154,10.1968961 13.6666667,10.1386667 L13.6666667,5.91716667 C13.6666667,5.85944494 13.6367966,5.80583364 13.5877157,5.77545504 C13.5386347,5.74507644 13.4773295,5.74225611 13.4256667,5.768 Z M4.5,5.33333333 C3.94771525,5.33333333 3.5,5.78104858 3.5,6.33333333 C3.5,6.88561808 3.94771525,7.33333333 4.5,7.33333333 C5.05228475,7.33333333 5.5,6.88561808 5.5,6.33333333 C5.5,5.78104858 5.05228475,5.33333333 4.5,5.33333333 Z" id="形状结合"></path>
    11.                     </g>
    12.                 </g>
    13.             </g>
    14.         </g>
    15.     </g>
    16. </svg>

    参考文档：https://blog.csdn.net/weixin_45952652/article/details/116449330