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

如何让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 会弹智能补全,但报错看不懂。但这也只是增加,而不是我上面实验后,想要的删除。

img

img

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

img

该回答引用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属性。