Svgr: React Native: JSX namespace error thrown

[kristerkari]

🐛 Bug Report

Bug when rendering this file: ember.svg

I have created an SVG transformer for React Native.

When I use svgr to render the images inside the transformer file, React Native throws an error during the transform:

SyntaxError: /Users/kristerkari/Git/SVGDemo/logos/ember.svg: 
Namespace tags are not supported by default. 
React's JSX doesn't support namespace tags. 
You can turn on the 'throwIfNamespace' flag to bypass this warning.

This happens because of the xmlns:svg="http://www.w3.org/2000/svg" attribute on the ember.svg image. If I remove that attribute, then the error is not thrown. The svg->svgr transform should probably take of that.

Link to repl or repo (highly encouraged)

App that I use for testing: https://github.com/kristerkari/react-native-svg-example
Images that I want to render: https://github.com/kristerkari/react-native-svg-example/tree/master/logos

Run npx envinfo --system --binaries --npmPackages @svgr/core,@svgr/cli,@svgr/webpack,@svgr/rollup --markdown --clipboard

Paste the results here:

## System:
 - OS: macOS High Sierra 10.13.6
 - CPU: x64 Intel(R) Core(TM) i7-7567U CPU @ 3.50GHz
 - Memory: 675.03 MB / 16.00 GB
 - Shell: 2.7.1 - /usr/local/bin/fish
## Binaries:
 - Node: 8.11.4 - /usr/local/bin/node
 - Yarn: 1.12.1 - /usr/local/bin/yarn
 - npm: 6.4.0 - /usr/local/bin/npm
 - Watchman: 4.9.0 - /usr/local/bin/watchman
## npmPackages:
 - @svgr/core: ^4.0.3 => 4.0.3 
 - @svgr/webpack: ^4.0.0 => 4.0.0 

[gregberge]

Thanks for the issue. I don't have time to work on it. Anyone is welcome.

[danilofuchs]

Also happens when dealing with inkscape svgs

[christian-nils]

@danilofuchs, when you save the SVG in Inkscape as an "Optimized SVG", you do not get this error.

[danilofuchs]

That's a solution, but I wish svgr just ignored the tags

[gregberge]

I think the error is clear enough, namespaces are not supported in React Native.

[kristerkari]

@neoziro Shouldn't this be fixed in SVGR? It's transforming SVG images to a format that throws an error.

[gregberge]

We can't handle it. I think it is not supported by react-native-svg.

[kristerkari]

But the error is not coming from react-native-svg, but from React.

The same error will be thrown even if you don't use React Native.

[gregberge]

Yeah it is because of JSX, it does not support namespace tag. What should we do? SVGO takes care of removing them.

[kristerkari]

What should we do? SVGO takes care of removing them.

It could be changed to:

<svg xmlns="http://www.w3.org/2000/svg">
  <!-- more tags here -->
</svg>

https://developer.mozilla.org/en-US/docs/Web/SVG/Namespaces_Crash_Course#Declaring_namespaces

The namespace declaration is provided by the xmlns attribute. This attribute says that the