svgr: Bugs in the React Native rendering

Thanks for the great library! I have created an SVG transformer for React Native.

It’s currently using react-native-svg-loader to transform SVG images to a format that React Native can understand.

I am currently trying to switch to use SVGR instead, because the output is cleaner, the code of the library is easier to understand and the project is maintained.

This is my the setup that I’m using:

"@svgr/core": "^4.0.3",
"@svgr/webpack": "^4.0.0",
"react-native-svg": "^8.0.8",

const svgr = require("@svgr/core").default;
svgr(src, { native: true })

🐛 Bug Report

1) Bug when rendering this file: ember.svg

When I switch to 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.

2) Bug when rendering this file: ember.svg

The ember.svg image is using <use xlink:href="#D_3_" overflow="visible" /> which throws an error during runtime:

TypeError: undefined is not an object (evaluating 'href.match')

This error is located at:
    in Use (at ember.svg:4)
    in RNSVGClipPath (at ClipPath.js:11)
    in ClipPath (at ember.svg:4)
    in RNSVGGroup (at G.js:23)
    in G (at ember.svg:4)
    in RNSVGGroup (at G.js:23)
    in G (at Svg.js:109)
    in RNSVGSvgView (at Svg.js:90)
    in Svg (at ember.svg:4)
    in SvgComponent (at App.js:37)
    in RCTScrollContentView (at ScrollView.js:852)
    in RCTScrollView (at ScrollView.js:977)
    in ScrollView (at App.js:29)
    in RCTSafeAreaView (at SafeAreaView.ios.js:35)
    in SafeAreaView (at App.js:28)
    in App (at renderApplication.js:34)
    in RCTView (at View.js:44)
    in RCTView (at View.js:44)
    in AppContainer (at renderApplication.js:33)

If change the element to be <use href="#D_1_" overflow="visible" />, the image will render.

Note: SVG 2 removed the need for the xlink namespace, so instead of xlink:href you should use href.

• https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/xlink:href

3) Inconsistent rendering when width and height props are omitted between @svgr/core + React Native and @svgr/webpack.

Actual:

When I have this code <RubyMine width={256} height={256} style={styles.logo} /> the image renders the same way in the browser (using @svgr/webpack) and in React Native with @svgr/core.

However, if I remove the width and height props, then it still displays the same way in browser but is not rendered at all in React Native.

Expected:

The SVG image should render in React Native without width and height props on the React element, and using the width and height of the image.

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 

@neoziro