SVG - React Native Transform Breaks the SVG

[superKalo]

🐛 Bug Report

Transforming an SVG to React Native breaks the SVG.

To Reproduce

Here's 2 problematic SVGs:

<svg xmlns="http://www.w3.org/2000/svg" width="14" height="8" viewBox="0 0 14 8"><g><g><path fill="#1ea2b1" d="M13.71.261A.835.835 0 0 0 13.096 0H.873A.835.835 0 0 0 .26.261.85.85 0 0 0 0 .881a.85.85 0 0 0 .26.619l6.11 6.164a.836.836 0 0 0 .615.262.835.835 0 0 0 .614-.262L13.71 1.5a.85.85 0 0 0 .26-.62.851.851 0 0 0-.26-.619z"/></g></g></svg>

<svg width="33px" height="59px" viewBox="0 0 33 59" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="6-oAuth-and-On-boarding" transform="translate(-171.000000, -323.000000)" fill="#000000" fill-rule="nonzero">
            <g id="app-nav" transform="translate(32.000000, 293.000000)">
                <g id="nav">
                    <path d="M182.184061,51.6167996 L144.452809,51.5689301 L144.451438,46.3251648 C144.45418,45.1831346 143.765964,44.1546235 142.710333,43.7169592 C141.653332,43.2779272 140.434558,43.5172749 139.625699,44.3255861 L127.100711,56.8195339 C125.637908,58.2747677 125.632425,60.6436256 127.088372,62.1070656 L139.550296,74.6639276 C140.356414,75.4790774 141.572446,75.7197927 142.630818,75.2903346 C143.689191,74.8581412 144.448696,73.8323655 144.452809,72.6862321 L144.452809,67.4479376 L182.144304,67.4958072 C182.894213,67.4958072 183.613961,67.2003838 184.144518,66.6724512 C184.675075,66.1445187 184.973942,65.4278434 184.976684,64.6810787 L185,54.4465728 C185.004103,52.8873938 183.744201,51.6195351 182.184061,51.6167996 Z" id="Path-Copy" transform="translate(155.500000, 59.500000) rotate(90.000000) translate(-155.500000, -59.500000) "></path>
                </g>
            </g>
        </g>
    </g>
</svg>

Here's how they like in the browser or in Sketch:

Expected behavior

To be able to transform this SVG to a React Native component.

Link to repl or repo (highly encouraged)

I copied my SVG and pasted it in the playground, marking React Native. That's the SVG component it outputs:

import React from 'react'
import Svg, { Path } from 'react-native-svg'

const SvgComponent = props => (
  <Svg width={14} height={8} {...props}>
    <Path
      fill="#1ea2b1"
      d="M13.71.261A.835.835 0 0013.096 0H.873A.835.835 0 00.26.261a.85.85 0 00-.26.62.85.85 0 00.26.619l6.11 6.164a.836.836 0 00.615.262.835.835 0 00.614-.262L13.71 1.5a.85.85 0 00.26-.62.851.851 0 00-.26-.619z"
    />
  </Svg>
)

export default SvgComponent

import React from 'react'
import Svg, { Path } from 'react-native-svg'

const SvgComponent = props => (
  <Svg width={33} height={59} {...props}>
    <Path
      d="M24.383 56.184l.048-37.731 5.244-.002a2.83 2.83 0 002-4.826L19.18 1.102a3.74 3.74 0 00-5.287-.013L1.336 13.55a2.832 2.832 0 00-.626 3.08c.432 1.06 1.458 1.819 2.604 1.823h5.238l-.048 37.691a2.825 2.825 0 002.815 2.832L21.553 59a2.821 2.821 0 002.83-2.816z"
      fill="#000"
      fillRule="nonzero"
    />
  </Svg>
)

export default SvgComponent
<img width="61" alt="Screenshot 2019-07-24 at 12 10 45" src="https://user-images.githubusercontent.com/2548061/61781131-7d81a600-ae0c-11e9-9620-ea6fed7d1f84.png">

However, they're broken. Instead of my icon, here's what I get... nothing displayed.

Something breaks the converter... it this a bug or I am doing something wrong?

My app runs on Expo SDK 33.0.0, React Native 0.59.8

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

## System:
 - OS: macOS 10.14.5
 - CPU: (4) x64 Intel(R) Core(TM) i5-6600 CPU @ 3.30GHz
 - Memory: 28.58 MB / 8.00 GB
 - Shell: 5.3 - /bin/zsh
## Binaries:
 - Node: 10.2.0 - ~/Sites/node_modules/.bin/node
 - Yarn: 1.16.0 - ~/.nvm/versions/node/v12.3.1/bin/yarn
 - npm: 2.15.12 - ~/Sites/node_modules/.bin/npm
 - Watchman: 4.9.0 - /usr/local/bin/watchman

[hatemalimam]

Something indeed is wrong, it feels that it omits some elements, which were before included.

[superKalo]

@hatemalimam do you know if there is any workaround, while waiting for a fix?

[RDardelet]

@hatemalimam do you know if there is any workaround, while waiting for a fix?

You can probably fix your icons by copying the d="..." attribute from the web svg version to your react-native <Path> component, worked in my case.

[superKalo]

@RDardelet thanks! That works 👍

[Stonelinks]

noticing this too... perhaps related to this new issue on svgo: svg/svgo#1137

would love the option of specifying a custom version of svgo as a peer dependency to guard against this in the future

[gregberge]

Hello, yes I think we will have to fix the version of SVGO if SVGO team don't fix the problem on their side.

[TrySound]

I think we may only pass correct default without sticking version

[StefKors]

I think I'm running into the same issue

I ran this command and it completely mangled my svg text.
"icons": "svgr --native -d ./components/Icons ./icons-svg"

Is there already a fix or workaround for this?

[TrySound]

@StefKors Yes svg/svgo#1137 (comment)

[StefKors]

@TrySound in which file should noSpaceAfterFlags be added?

[TrySound]

https://www.smooth-code.com/open-source/svgr/docs/configuration-files/#svgo

[StefKors]

so in .svgrrc.yml I should add:

plugins: 
  - convertPathData:
      noSpaceAfterFlags: false

When I run svgr with: svgr --native -d ./components/Icons ./icons-svg

I get:
Error: Invalid plugin "[object Object]"

[TrySound]

no, svgorc

[StefKors]

Thanks! that worked!