如何让vite的svgr插件自动封装的svg，批量删除内部path的fill属性？不是修改成fill=‘none’ ！

Question

如何让vite的svgr插件自动封装的svg，批量删除内部path的fill属性？

过程是这样的：
1）我希望，antd 的 type=‘text’ 按钮，在hover时，不仅背景变亮，icon也变亮（需要手动添加）。
2）经过浏览器inspect一段时间，发现这个逻辑是，没hover时的color是白色透明度0.45，当hover时叠加背景变亮效果。
3）我是在浏览器里通过手动删除 “ antd-btn svg path ”的 fill属性来确认的，也确认了修改成fill=‘none’ 和直接删除时不一样，会直接图标不显示。

4）这个 fill 会弹智能补全，但报错看不懂。但这也只是增加，而不是我上面实验后，想要的删除。

官方文档没说怎么用属性：

Answer 1

该回答引用ChatGPT

请参考下面的解决方案，如果有帮助，还请点击采纳，感谢支持！

可以使用postcss-svgo插件来实现该功能。该插件可以将SVG代码优化，并删除特定的属性。
步骤如下：
1、安装postcss-svgo插件

npm install postcss-svgo

2、在您的项目中配置postcss-svgo插件，例如使用postcss-loader：

module: {
    rules: [
        {
            test: /\.css$/,
            use: [
                'style-loader',
                'css-loader',
                {
                    loader: 'postcss-loader',
                    options: {
                        plugins: [
                            require('postcss-svgo')({
                                plugins: [
                                    {removeAttrs: {attrs: ['fill']}},
                                ]
                            })
                        ]
                    }
                }
            ],
        }
    ]
}

以上是配置postcss-svgo的示例代码。请确保您的postcss-loader版本正确，并且您的webpack配置文件中没有其他错误。

然后，您就可以在您的项目中使用SVG，并在每次编译时自动删除fill属性。