从 svgr/webpack 向内置 svgo 传递选项
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,
},
},
},
],
},
{
test: /\.svg$/,
use: [{
loader: '@svgr/webpack',
options: {
svgoConfig: {
plugins: [
{ mergePaths: false },
{ removeViewbox: false },
{ removeAttrs: true },
],
},
},
}],
}
https://react-svgr.com/docs/options/
答案如下...
{
装载机:“@svgr/webpack”,
选项: {
尺寸:假
}
},
就我而言,我遇到的错误是:
plugins
应该是一个数组;
- 每个插件对象需要一个
name
属性
所以这对我有用:
use: {
loader: '@svgr/webpack',
options: {
svgoConfig: {
plugins: [
{
name: 'removeViewBox',
active: false
}
]
}
}
}
是否有将 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,
},
},
},
],
},
{
test: /\.svg$/,
use: [{
loader: '@svgr/webpack',
options: {
svgoConfig: {
plugins: [
{ mergePaths: false },
{ removeViewbox: false },
{ removeAttrs: true },
],
},
},
}],
}
https://react-svgr.com/docs/options/
答案如下... { 装载机:“@svgr/webpack”, 选项: { 尺寸:假 } },
就我而言,我遇到的错误是:
plugins
应该是一个数组;- 每个插件对象需要一个
name
属性
所以这对我有用:
use: {
loader: '@svgr/webpack',
options: {
svgoConfig: {
plugins: [
{
name: 'removeViewBox',
active: false
}
]
}
}
}