Closed joshuaaron closed 3 years ago
I have same issues during bump up some libraries.
so i just downgrade babel-plugin-inline-react-svg
version ^1.1.2
. it work normally.
or if you want using latest version, change attribute name params
to active
https://github.com/svg/svgo/releases/tag/v2.0.0
"plugins": [
[
"inline-react-svg",
{
"svgo": {
"plugins": [
{
"name": "removeViewBox",
"active": false
}
]
}
}
],
}
then will work fine.
Same problem for me.
Sounds like https://github.com/airbnb/babel-plugin-inline-react-svg/issues/107#issuecomment-840413948 is the solution; @joshuaaron, can you confirm this fixes it?
Sounds like #107 (comment) is the solution; @joshuaaron, can you confirm this fixes it?
I went with the latter, and changed "params" => "active" and it seems to work now yes. Big thanks @art-1st
@joshuaaron Can you give a bit more explanation? I copied @art-1st code piece and it's not working for me.
@nikola1970 I didn't really change much, outside the params property from my original answer, if it helps, my .babelrc looks like this:
{
"presets": ["next/babel"],
"plugins": [
["inline-react-svg", { "svgo": { "plugins": [ {
"name": "removeViewBox",
"active": false
}]}}],
[ "styled-components", { "ssr": true }]
],
"env": {
"production": {
"plugins": ["babel-plugin-jsx-remove-data-test-id"]
}
}
}
Now when I view my SVGs in the browser, the viewBox is being rendered correctly. Still using
"babel-plugin-inline-react-svg": "2.0.1",
"next": "10.2.0",
Here's how we solved it, and then it worked fine.
[
'inline-react-svg',
{
svgo: {
plugins: [
{
name: 'preset-default',
params: {
overrides: {
removeViewBox: false,
},
},
},
'removeDimensions',
'convertStyleToAttrs',
],
},
},
],
Recently noticed the viewBox attribute has been stripped from our rendered SVG elements. I've attempted to use the plugins option inside the svgo property as
plugins: [{ "removeViewBox": false }]
but it throws an error on compilation for 'Plugin name should be specified' so I believe this setup should work?Currently using
.babelrc:
svg element:
output: