Is there an option to pass in svgo options to the svgr/webpack loader ? I want to remove the width & height attributes and keep the viewbox, by default it removes those.
{
test: /\.svg$/,
use: ['@svgr/webpack'],
options : {
svgo: { // Something like this ?
mergePaths: false,
removeViewbox: false,
removeAttrs: true,
}}
},
It has a little confusing syntax with nested parameters. Here is what I'm using to disable prefixing ids and classnames. I suppose, in your case it will be something like mergePaths.active = false
, removeViewbox.active = false
.
loader: '@svgr/webpack',
options: {
svgoConfig: {
plugins: [{
prefixIds: {
prefixIds: false,
prefixClassNames: false
}
}]
}
}
I did not test, but I suppose it would look like this (or similar, you might play with it a bit to get the syntax right):
loader: '@svgr/webpack',
options: {
svgoConfig: {
plugins: [{
removePaths: {
active: false,
}
},{
removeViewbox: {
active: false,
}
},{
removeAttrs: {
active: true,
}
}]
}
}
Look into the code here, where you can figure out what props are actually being exported: https://github.com/svg/svgo
I could not find a way of passing arguments through svgr to svgo so I switched to react-svg-loader
which has documentation on how to achieve that :
{
test: /\.svg$/,
use: [
'babel-loader',
{
loader: 'react-svg-loader',
options: {
svgo: {
plugins: [{ removeDimensions: true, removeViewBox: false }],
floatPrecision: 2,
},
},
},
],
},
Based on https://react-svgr.com/docs/options/ , the answer is as follows:
{
loader: "@svgr/webpack",
options: {
dimensions: false
}
},
In my case I got errors that:
plugins
should be an array; name
propertySo here is what worked for me:
use: {
loader: '@svgr/webpack',
options: {
svgoConfig: {
plugins: [
{
name: 'removeViewBox',
active: false
}
]
}
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.