search

kristerkari / react-native-svg-transformer

Import SVG files in your React Native project the same way that you would in a Web application.
MIT License
1.6k stars 116 forks source link

Icon from undraw.co doesn't work. #161

Closed ghost closed 2 years ago

ghost commented 2 years ago

Bug

When I try to add an icon from undraw.co the app breaks. Screenshot_90

The app is working with different icons.

kristerkari commented 2 years ago

The icon might have some properties that either svgr or react-native-svg don't know how to handle.

kristerkari commented 2 years ago

Could you link the SVG file in question here?

ghost commented 2 years ago

Here it is, undraw_job_hunt.zip

bfricka commented 2 years ago

-darkreaderInlineFill is not a valid style. Like the error screenshot you linked is doing a pretty good job of showing you the offending token, and if you did a little searching you'd find it's not a valid style attribute. This style is using a prefix - and the translation of the style attribute to a prop should transform this without error, although even if it did, React is going throw an error immediately because it's not a valid style prop.

On the one hand, if this project were to update to the latest SVGR, you'd no longer have this syntax error (you can try this on the SVGR Playground, and it transforms style="-darkreaderInlineFill: #1d2223" to style={{ DarkreaderInlineFill: '#1d2223' }}).

But you'd still have the React error to immediately contend with. You need to clean your input SVGs of any garbage if you want this to work properly.

kristerkari commented 2 years ago

I will try to get a new version of the transformer out with a newer SVGR soon.

ghost commented 2 years ago

Thank you all.

kristerkari commented 2 years ago

This is now fixed in the latest version.