如何让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 会弹智能补全,但报错看不懂。但这也只是增加,而不是我上面实验后,想要的删除。
官方文档没说怎么用属性:
该回答引用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属性。