After upgrading from 0.14.3 to 1.5.0 some linear gradients stopped working due to ids containing french accents (my SVG files where exported from Figma).
An easy workaround is to remove those special characters but the issue could be documented if not fixed.
A simple example:
<svg height="150" width="400" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="Dégradé_sans_nom" x1="0%" x2="100%" y1="0%" y2="0%">
<stop offset="0%" stop-color="yellow"/>
<stop offset="100%" stop-color="red"/>
</linearGradient>
</defs>
<ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#Dégradé_sans_nom)"/>
</svg>The gradient does not work and is black on Android and transparent on iOS:
When looking at the component it looks like the defs and linear gradient is not created. When translating the SVG online with SVGR the gradient works well.
After upgrading from 0.14.3 to 1.5.0 some linear gradients stopped working due to ids containing french accents (my SVG files where exported from Figma).
An easy workaround is to remove those special characters but the issue could be documented if not fixed.
A simple example:
The gradient does not work and is black on Android and transparent on iOS:
When looking at the component it looks like the defs and linear gradient is not created. When translating the SVG online with SVGR the gradient works well.