vue3使用svg 动态修改颜色（记录：修改fill无效）

install vite-plugin-svg-icons -D     npm install fast-glob --save-dev

2.在中加配置（我的文件放在public下）

  import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'

  import path from 'path'

  plugins: [
    createSvgIconsPlugin({
      iconDirs: [((), 'public/image/sysimg')],
      symbolId: 'icon-[dir]-[name]',
    }),
  ],

3.在中加

import 'virtual:svg-icons-register'

4.直接使用

<svg >
       <use :xlink:href="'#icon-'+文件名"  />
 </svg>

5.像动态修改颜色直接给svg标签设置css(注意：如果修改fill无效 需要把svg文件内容进行修改，加上fill="currentColor")

如：

<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http:///2000/svg">
<g >
<path   5.19115 10.1276 5.19065C10.2163 5.19014 10.3017 5.22465 10.3651 5.28667C11.0384 5.96087 11.4166 6.87473 11.4166 7.82754C11.4166 8.78035 11.0384 9.6942 10.3651 10.3684V10.3703Z" fill="currentColor"/>
</g>
</svg>