Unexpected token error, around {fill-rule:evenodd;clip-rule:evenodd}

[andyklimczak]

Hey, I'm running the generator on cryptoicon SVGs for a react native project, and this icon is giving me an error: Unexpected token, expected } (769:175) on .st0{fill-rule:evenodd;clip-rule:evenodd}

Steps to reproduce:

git clone https://github.com/AllienWorks/cryptocoins
cd cryptocoins
svg-icon-generate --svgDir ./SVG --destination ./Icon.js --native

then I try to import and use Icon.js into my project, and I see the error

Thanks!

[janmarsicek]

Hi @andyklimczak,

could you share the generated Icon.js please? The line with BTCP-alt icon could be enough.

Do you have the latest version of the react-svg-icon-generator installed? I was trying to reproduce your issue and it works fine for me.

Alternatively, try to remove <style> tag from your svg:

<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="-678 877.2 226.8 226.8"><switch><g><path d="M-516.3 1008.2c-5.5.9-8.2 1.3-13.7 1.6-2.5.2-5.1.3-7.6.4 7.3 5 12 11.9 9.6 21.5-4.4 17.9-27.8 15.5-45 11.6l-5.8 23.8-.3 1-7.6 30.9 19.4 4.8 8.1-32.4c33.3 6.3 58.3 3.8 68.8-26.4 6.6-18.7 1.8-33.1-8.3-42.1l-.6.3c-4.8 1.9-11.4 4.1-17 5"/><path d="M-522.5 924.3l8-32.1-19.5-4.9-7.8 31.2c-5.1-1.3-10.4-2.5-15.6-3.7l7.8-31.4-19.5-4.9-8 32.1c-4.2-1-8.4-1.9-12.5-2.9l-26.9-6.8-5.2 20.9s14.5 3.3 14.2 3.5c7.9 2 9.3 7.2 9.1 11.4l-5.8 23.4-5.1 20.4-11 44.1c-1 2.4-3.4 6-8.9 4.6.2.3-14.2-3.5-14.2-3.5l-9.7 22.4 25.4 6.3c4.7 1.2 9.3 2.4 13.9 3.6l-8.1 32.4 19.5 4.9 8-32.1 6.3-23.5 10.7-43c2.3.5 4.5 1 7.1 1.6 7.9 1.8 16.1 2.5 24.2 3.1 4.9.4 9.9.6 14.8.6 7.4-.1 14.9-1.5 21.9-3.8 5.9-2 12.8-4.5 17.2-9.1 5.1-5.4 7.6-12.6 8.7-19.8 3.6-23.8-14.4-36.5-39-45zm.5 45.1c-5.5 22.1-39.4 10.9-50.5 8.1l9.7-39c11.1 2.8 46.6 7.9 40.8 30.9z"/></g></switch></svg>

[andyklimczak]

Sorry, I should have included this initially.

<Svg id="Layer_1" {...rest} height={height || size} width={width || size} style={style} viewBox="-678 877.2 226.8 226.8"><Style>.st0{fill-rule:evenodd;clip-rule:evenodd}</Style><Switch><G><Path fill={color} d="M-516.3 1008.2c-5.5.9-8.2 1.3-13.7 1.6-2.5.2-5.1.3-7.6.4 7.3 5 12 11.9 9.6 21.5-4.4 17.9-27.8 15.5-45 11.6l-5.8 23.8-.3 1-7.6 30.9 19.4 4.8 8.1-32.4c33.3 6.3 58.3 3.8 68.8-26.4 6.6-18.7 1.8-33.1-8.3-42.1l-.6.3c-4.8 1.9-11.4 4.1-17 5"/><Path fill={color} d="M-522.5 924.3l8-32.1-19.5-4.9-7.8 31.2c-5.1-1.3-10.4-2.5-15.6-3.7l7.8-31.4-19.5-4.9-8 32.1c-4.2-1-8.4-1.9-12.5-2.9l-26.9-6.8-5.2 20.9s14.5 3.3 14.2 3.5c7.9 2 9.3 7.2 9.1 11.4l-5.8 23.4-5.1 20.4-11 44.1c-1 2.4-3.4 6-8.9 4.6.2.3-14.2-3.5-14.2-3.5l-9.7 22.4 25.4 6.3c4.7 1.2 9.3 2.4 13.9 3.6l-8.1 32.4 19.5 4.9 8-32.1 6.3-23.5 10.7-43c2.3.5 4.5 1 7.1 1.6 7.9 1.8 16.1 2.5 24.2 3.1 4.9.4 9.9.6 14.8.6 7.4-.1 14.9-1.5 21.9-3.8 5.9-2 12.8-4.5 17.2-9.1 5.1-5.4 7.6-12.6 8.7-19.8 3.6-23.8-14.4-36.5-39-45zm.5 45.1c-5.5 22.1-39.4 10.9-50.5 8.1l9.7-39c11.1 2.8 46.6 7.9 40.8 30.9z"/></G></Switch></Svg>

Thinking about it more, maybe it's not an issue here, but an issue with expo svg. Though they claim that it uses react-native-svg (what the readme here recommends)

I also should have clarified that I didn't see an error until I tried to import the icon component into my project (project created with CRNA). Not during the conversion.

[janmarsicek]

Definitely there should not be this part <Style>.st0{fill-rule:evenodd;clip-rule:evenodd}</Style> as style tags are either replaced during cleanup... 🤔 and also there is no Style component in react-native-svg

As I already suggested, try to replace code in your svg with this:

<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="-678 877.2 226.8 226.8"><switch><g><path d="M-516.3 1008.2c-5.5.9-8.2 1.3-13.7 1.6-2.5.2-5.1.3-7.6.4 7.3 5 12 11.9 9.6 21.5-4.4 17.9-27.8 15.5-45 11.6l-5.8 23.8-.3 1-7.6 30.9 19.4 4.8 8.1-32.4c33.3 6.3 58.3 3.8 68.8-26.4 6.6-18.7 1.8-33.1-8.3-42.1l-.6.3c-4.8 1.9-11.4 4.1-17 5"/><path d="M-522.5 924.3l8-32.1-19.5-4.9-7.8 31.2c-5.1-1.3-10.4-2.5-15.6-3.7l7.8-31.4-19.5-4.9-8 32.1c-4.2-1-8.4-1.9-12.5-2.9l-26.9-6.8-5.2 20.9s14.5 3.3 14.2 3.5c7.9 2 9.3 7.2 9.1 11.4l-5.8 23.4-5.1 20.4-11 44.1c-1 2.4-3.4 6-8.9 4.6.2.3-14.2-3.5-14.2-3.5l-9.7 22.4 25.4 6.3c4.7 1.2 9.3 2.4 13.9 3.6l-8.1 32.4 19.5 4.9 8-32.1 6.3-23.5 10.7-43c2.3.5 4.5 1 7.1 1.6 7.9 1.8 16.1 2.5 24.2 3.1 4.9.4 9.9.6 14.8.6 7.4-.1 14.9-1.5 21.9-3.8 5.9-2 12.8-4.5 17.2-9.1 5.1-5.4 7.6-12.6 8.7-19.8 3.6-23.8-14.4-36.5-39-45zm.5 45.1c-5.5 22.1-39.4 10.9-50.5 8.1l9.7-39c11.1 2.8 46.6 7.9 40.8 30.9z"/></g></switch></svg>

[andyklimczak]

Gotcha, that works but I've run into a different error, and could use your help understanding it.

I'll create a new issue so that this issue is not polluted. I'll leave it up to you if you want to close this or not. Thank you!