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

1.npm install vite-plugin-svg-icons -D

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

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

3.在main.ts中加

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://www.w3.org/2000/svg">
<g id="Frame 427320716">
<path id="Vector"  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>