An SVG is no longer rendered correctly after the update

[eae-christian]

Hi, after updating from react-native-svg-transformer 0.13.0 to 0.14.0 at the moment one of the svg that I have in the application is not rendering well, in the previous version everything was perfect.

Attached photos

My environment:
"@svgr/core": "^4.3.3",
"react": "16.11.0",
"react-native": "0.61.4",
"react-native-svg-transformer": "^0.14.0",

My application is only in iOS, I don't know if Android has the same behavior

with 0.13.0

with 0.14.0

I do the import and render this way:

import UserIcon from '../../assets/icons/ico-user.svg';

< UserIcon width={11} height={11} />

Thanks

[kristerkari]

Yeah, that's something that broke by enabling SVGO minifier as it removes the viewBox attribute. I'm going to release a patch release to fix that, but in the meantime you can just continue using 0.13.0.

[kristerkari]

@eae-christian could you please test if version 0.14.1 fixes the issue for you?

https://github.com/kristerkari/react-native-svg-transformer/releases/tag/0.14.1

[NickHackman]

0.14.1 fixed the issue for me, thanks a lot!

[eae-christian]

sorry, yes! fixed :)
Thanks

[rphlmr]

Hello :)

There is one more problem related to this bug.
Before this version, if we didn't set a width it was set to 100% (I guess).
Without width, the icon no longer display.
Maybe it's wanted ?

Works before :
<Icon height={20} fill={myColor} />

Now :
<Icon width="100%" height={20} fill={myColor} />

[kristerkari]

@rphlmr are you using the latest 0.14.1 version? If yes, could you provide me the SVG, so I can have a look at it.

[rphlmr]

@kristerkari Yes i'm on the latest version.

<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 14 10" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><path d="M13.207,7.319l-2.325,-2.325c-0.192,-0.192 -0.447,-0.298 -0.719,-0.298c-0.011,0 -0.023,0 -0.035,0l0,-0.557c0.133,-0.064 0.225,-0.2 0.225,-0.357l0,-1.585c0,-0.218 -0.178,-0.396 -0.396,-0.396l-1.992,0l0,-1.074c0,-0.262 -0.136,-0.497 -0.363,-0.629c-0.228,-0.131 -0.499,-0.131 -0.726,0l-1.329,0.767c-0.238,-0.096 -0.503,-0.096 -0.741,0l-1.329,-0.767c-0.227,-0.131 -0.499,-0.131 -0.726,0c-0.227,0.132 -0.363,0.367 -0.363,0.629l0,1.074l-1.992,0c-0.218,0 -0.396,0.178 -0.396,0.396l0,1.585c0,0.219 0.178,0.396 0.396,0.396l3.592,0l0,5.15l-3.169,0c-0.109,0 -0.198,-0.089 -0.198,-0.198l0,-4.357c0,-0.11 -0.089,-0.199 -0.198,-0.199c-0.11,0 -0.198,0.089 -0.199,0.198l0,4.358c0,0.159 0.062,0.308 0.175,0.421c0.112,0.112 0.261,0.174 0.42,0.174l3.223,0c0.068,0.118 0.196,0.198 0.342,0.198l1.585,0c0.146,0 0.274,-0.08 0.342,-0.198l3.223,0c0.328,0 0.594,-0.267 0.594,-0.595l0,-0.159l0.714,0.713c0.203,0.204 0.474,0.316 0.762,0.316c0.288,0 0.558,-0.112 0.762,-0.316l0.841,-0.84c0.203,-0.204 0.315,-0.475 0.315,-0.763c0,-0.287 -0.112,-0.558 -0.315,-0.762Zm-3.25,-5.122l0,1.585l-3.592,0l0,-1.585l3.592,0Zm-0.225,1.981l0,0.518c-0.23,-0.001 -0.437,-0.001 -0.572,-0.001c-0.162,0.001 -0.32,0.045 -0.461,0.128c-0.117,-0.197 -0.191,-0.415 -0.218,-0.645l1.251,0Zm-4.84,-2.916c0.181,-0.1 0.398,-0.094 0.57,0c0.136,0.075 0.235,0.198 0.281,0.341l-1.132,0c0.046,-0.142 0.146,-0.267 0.281,-0.341Zm-0.904,2.52l-3.592,0l0,-1.585l3.592,0l0,1.585Zm0.259,-2.341l-0.77,-0.444c-0.094,-0.055 -0.216,-0.023 -0.27,0.072c-0.055,0.095 -0.022,0.216 0.072,0.271l0.772,0.445c-0.003,0.006 -0.006,0.011 -0.009,0.016l-1.258,0l0,-1.074c0,-0.119 0.062,-0.226 0.165,-0.285c0.104,-0.06 0.227,-0.06 0.33,0l1.167,0.673c-0.087,0.095 -0.155,0.206 -0.199,0.326Zm1.722,0.558l0,1.783l-1.004,0c-0.109,0 -0.198,0.089 -0.198,0.198c0,0.11 0.089,0.198 0.198,0.198l1.004,0l0,5.348l-1.585,0l0,-7.527l1.585,0Zm0.342,-0.198c-0.003,-0.005 -0.006,-0.01 -0.009,-0.016l0.772,-0.445c0.094,-0.055 0.127,-0.176 0.072,-0.271c-0.055,-0.095 -0.176,-0.127 -0.271,-0.073l-0.77,0.445c-0.044,-0.12 -0.111,-0.231 -0.198,-0.326l1.167,-0.673c0.103,-0.06 0.226,-0.06 0.33,0c0.103,0.059 0.165,0.166 0.165,0.285l0,1.074l-1.258,0Zm3.223,7.527l-3.169,0l0,-5.15l1.717,0c0.031,0.329 0.141,0.641 0.318,0.915c-0.118,0.161 -0.182,0.349 -0.182,0.545c0,0 0.001,0 0.001,0c-0.001,0.22 -0.001,0.645 0,1.003c0,0.271 0.106,0.526 0.297,0.718l1.216,1.216l0,0.555l0,0c0,0.11 -0.089,0.198 -0.198,0.198Zm3.393,-0.765l-0.841,0.841c-0.129,0.129 -0.3,0.2 -0.482,0.2c-0.182,0 -0.354,-0.071 -0.482,-0.2l-1.052,-1.051c0,0 0,0 0,0l-1.273,-1.274c-0.118,-0.117 -0.183,-0.273 -0.183,-0.439c0,-0.359 -0.001,-0.782 0,-1.001c0,-0.075 0.018,-0.149 0.05,-0.218c0.003,0.004 0.006,0.007 0.01,0.011l0.257,0.257c0.039,0.038 0.089,0.058 0.14,0.058c0.051,0 0.101,-0.02 0.14,-0.058c0.077,-0.078 0.077,-0.203 0,-0.281l-0.257,-0.257c-0.003,-0.003 -0.006,-0.006 -0.01,-0.01c0.069,-0.032 0.142,-0.049 0.217,-0.049c0.196,-0.001 0.737,0 1.002,0c0.166,0 0.321,0.065 0.438,0.182l2.326,2.325c0.128,0.129 0.199,0.3 0.199,0.482c0,0.183 -0.071,0.354 -0.199,0.482Z" style="fill-rule:nonzero;"/></svg>

[kristerkari]

Thanks @rphlmr ! I have a fix that disables a setting from SVGO, and I'm making a patch release soon.

[kristerkari]

@rphlmr
https://github.com/kristerkari/react-native-svg-transformer/releases/tag/0.14.2

[rphlmr]

@kristerkari It works :) 🥇