Not catching the style/classes correctly (Black shape)

[manelsanz]

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]

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?

[manelsanz]

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?

Yes @kristerkari , this way works fine.
I see that in your example project (https://github.com/kristerkari/react-native-svg-example) you have a webpack.config.js that I don't have. And you have installed the package @svgr/webpack. It's really necessary?

Thank you.

[kristerkari]

I see that in your example project (https://github.com/kristerkari/react-native-svg-example) you have a webpack.config.js that I don't have. And you have installed the package @svgr/webpack. It's really necessary?

It's not strictly necessary, but it makes it possible to use the exact same code to render the SVG on both Web and React Native as they both are processed with the same library.

[alamothe]

@kristerkari It should be possible to inline styles with a plugin, please check: gregberge/svgr#245

By the way, is there a way to customize .svgrrc for transformer? Thanks!

[alamothe]

...I tried to create a custom .svgrrc but it wasn't picked up.

I succeeded by patching react-native-svg-transformer like this:

    var jsCode = svgr.sync(
      src,
      {
        native: true,
        plugins: ['@svgr/plugin-svgo', '@svgr/plugin-jsx'],
        "svgoConfig": {
          "plugins": [
            {
              // Inline styles
              // 
              // https://github.com/smooth-code/svgr/issues/245
              "inlineStyles": {
                "onlyMatchedOnce": false
              },
            },

Hope this helps.

Do you maybe know why custom config is not being picked up? Thanks!

[kristerkari]

Thanks for the example @alamothe.

I'll look into adding the feature of reading the user provided SVGR configuration inside the transformer.

Here are the docs for SVGR configs:
https://github.com/smooth-code/svgr/blob/master/website/src/pages/docs/configuration-files.mdx

[kristerkari]

I opened a Pull Request that adds support for reading SVGR config:
#19

[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

[alamothe]

Thank you!

[gablorquet]

i've added the .svgrrc file but i still only get black shapes, do I need to have other components installed ?

[gablorquet]

found it, you need to add install @svgr/plugin-svgo

[kristerkari]

@gablorquet I think that your problem was not related to the .svgrrc file, but to the fact that some SVG images don't render correctly with React Native. The @svgr/plugin-svgo helps because it removes some stuff that is not compatible with React Native.

[Cazs03]

I'm using expo.io, can tellme how can add this configuration? im bit confuse @kristerkari