[英]Pass options to the builtin svgo from svgr/webpack
是否可以将 svgo 选项传递给 svgr/webpack 加载器? 我想删除宽度和高度属性并保留视图框,默认情况下它会删除这些。
{
test: /\.svg$/,
use: ['@svgr/webpack'],
options : {
svgo: { // Something like this ?
mergePaths: false,
removeViewbox: false,
removeAttrs: true,
}}
},
它有一些带有嵌套参数的令人困惑的语法。 这是我用来禁用前缀 ID 和类名的内容。 我想,在您的情况下,它将类似于mergePaths.active = false
, removeViewbox.active = false
。
loader: '@svgr/webpack',
options: {
svgoConfig: {
plugins: [{
prefixIds: {
prefixIds: false,
prefixClassNames: false
}
}]
}
}
我没有测试,但我想它看起来像这样(或类似的,你可以稍微玩一下以获得正确的语法):
loader: '@svgr/webpack',
options: {
svgoConfig: {
plugins: [{
removePaths: {
active: false,
}
},{
removeViewbox: {
active: false,
}
},{
removeAttrs: {
active: true,
}
}]
}
}
查看此处的代码,您可以在其中找出实际导出的道具: https : //github.com/svg/svgo
我找不到通过 svgr 将参数传递给 svgo 的方法,所以我切换到react-svg-loader
,它有关于如何实现的文档:
{
test: /\.svg$/,
use: [
'babel-loader',
{
loader: 'react-svg-loader',
options: {
svgo: {
plugins: [{ removeDimensions: true, removeViewBox: false }],
floatPrecision: 2,
},
},
},
],
},
基于https://react-svgr.com/docs/options/ ,答案如下:
{
loader: "@svgr/webpack",
options: {
dimensions: false
}
},
就我而言,我收到以下错误:
plugins
应该是一个数组;name
属性所以这对我有用:
use: {
loader: '@svgr/webpack',
options: {
svgoConfig: {
plugins: [
{
name: 'removeViewBox',
active: false
}
]
}
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.