Vue中SVGIcon的fill被转为_fill后渲染为黑色的解决方法

这个坑我之前在Vue项目里踩过！大概率是你的SVG加载工具（比如svg-sprite-loader、vue-svg-loader这类）自带的SVG优化工具（一般是svgo）把fill属性当成动态绑定属性处理了，或者Vue模板编译器自动把它转成了_fill（防止和Vue的动态属性绑定冲突）。给你几个亲测有效的解决办法：

1. 调整SVG加载器的SVGO配置 #

SVGO是大多数SVG加载器默认集成的优化工具，它有时候会自动修改或移除fill属性，我们可以手动配置让它保留fill：

如果你用的是Vue CLI（vue.config.js） #

module.exports = {
  chainWebpack: config => {
    // 先清除默认的svg规则
    const svgRule = config.module.rule('svg');
    svgRule.uses.clear();
    
    // 重新配置svg-sprite-loader（根据你实际用的加载器调整）
    svgRule
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]',
        svgo: {
          plugins: [
            // 禁用会移除/修改fill的插件
            { removeAttrs: false },
            // 或者更精准：只移除除了fill之外的其他不需要的属性
            { removeAttrs: { attrs: '(?!fill|opacity|fill-rule)' } }
          ]
        }
      });
  }
};

如果你用的是Vite（vite.config.js） #

Vite默认用vite-plugin-svg-icons，配置类似：

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

export default {
  plugins: [
    createSvgIconsPlugin({
      iconDirs: [path.resolve(process.cwd(), 'src/icons')],
      symbolId: 'icon-[dir]-[name]',
      svgoOptions: {
        plugins: [
          {
            name: 'removeAttrs',
            params: { attrs: '(?!fill|opacity|fill-rule)' }
          }
        ]
      }
    })
  ]
};

2. 手动修改SVG文件绕过编译转换 #

如果不想改配置，直接处理SVG源文件也能解决：

• 把SVG里的fill="#d39f86"改成内联style：style="fill: #d39f86;"，Vue编译器不会把style属性当成动态绑定，也就不会转成_style。
• 或者直接删掉SVG里的fill属性，然后在使用SVGIcon的地方用CSS控制颜色：

/* 假设你的SVGIcon组件根元素有.svg-icon类 */
.svg-icon path {
  fill: #d39f86;
}

这种方法还能让你动态修改图标颜色，比如通过父组件传props控制：

<SVGIcon class="custom-icon" />

.custom-icon path {
  fill: var(--icon-color);
}

3. 用Vue指令跳过编译（应急方案） #

如果你的SVG是直接写在Vue模板里的，可以给SVG元素加v-pre指令，让Vue跳过对这个元素的编译，这样fill属性就不会被修改：

<svg v-pre>
  <path pid="1" opacity=".991" fill-rule="evenodd" fill="#d39f86" d="M877.5..."/>
</svg>

不过这个方法只适合静态SVG，如果你用的是封装好的SVGIcon组件，这个方案可能不太适用。

内容的提问来源于stack exchange，提问作者bmayank