Not catching the style/classes correctly (Black shape)

Hi, I have an SVG file with <style> tags, and the conversion is not going well. That renders as a black shape of the SVG. I think that it doesn’t catch the <styles> tag well… what I can do? I have so much SVG Files…

SVG File:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 23.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 96 96" style="enable-background:new 0 0 96 96;" xml:space="preserve">
<style type="text/css">
	.st0{fill:#FFFFFF;}
	.st1{fill:#222FFF;}
</style>
<path class="st0" d="M48,96c26.5,0,48-21.5,48-48S74.5,0,48,0S0,21.5,0,48S21.5,96,48,96"/>
<path class="st0" d="M48,95c26,0,47-21,47-47S74,1,48,1S1,22,1,48S22,95,48,95"/>
<g>
	<g id="Navigation">
		<g>
			<path class="st1" d="M24,30.9h48.6c1.8,0,3.2-1.5,3.2-3.3c0-1.8-1.4-3.3-3.2-3.3H24c-1.8,0-3.2,1.5-3.2,3.3
				C20.8,29.4,22.2,30.9,24,30.9z M72.6,44.3H24c-1.8,0-3.2,1.5-3.2,3.3c0,1.8,1.4,3.3,3.2,3.3h48.6c1.8,0,3.2-1.5,3.2-3.3
				C75.8,45.7,74.3,44.3,72.6,44.3z M72.6,64.2H24c-1.8,0-3.2,1.5-3.2,3.3c0,1.8,1.4,3.3,3.2,3.3h48.6c1.8,0,3.2-1.5,3.2-3.3
				C75.8,65.6,74.3,64.2,72.6,64.2z"/>
		</g>
	</g>
</g>
</svg>

Thanks.

[kristerkari]

@alamothe New version is out that adds support for the SVGR config file: https://github.com/kristerkari/react-native-svg-transformer/releases/tag/0.13.0

[kristerkari]

Thanks @manelsanz!

There are still features that react-native-svg does not support when compared what the web browsers support related to SVG rendering.

I haven’t tested, but my guess is the same as yours that the <style> tag is not supported. Could you instead change the svg file to have the fill attribute in the path elements instead of the <style> tag?