search

jacobmischka / gatsby-plugin-react-svg

Adds svg-react-loader to gatsby webpack config
https://www.npmjs.com/package/gatsby-plugin-react-svg
MIT License
70 stars 21 forks source link

Two SVGs on the same page interfering #20

Closed ernestosotelo closed 5 years ago

ernestosotelo commented 5 years ago

SVGs are rendering very funky. Styling of my SVGs are being distorted, changed, etc. when rendering more than 1 SVG.

This issue is native to the svg-react-loader https://github.com/jhamlet/svg-react-loader/issues/102 and it remains an open issue.

Seeing as it also affects a Gatsby app...

What would be the alternative way to add SVGs in Gatsby?

Is anyone else not having the same issue?

jacobmischka commented 5 years ago

You can not include them inline, using the default url-loader configuration and an <img /> tag (or fancier equivalent, like gatsby-image).

As you mention, this is an upstream issue, and I don't really plan on working around it in this plugin. I'll leave this open for a bit for visibility and discussion, but I will likely close it eventually for cleanup reasons, apologies for that.

ernestosotelo commented 5 years ago

@jacobmischka Thanks, Jacob - This is really heart-breaking to heavy SVG users, but I definitely know it isn't an issue on your end - hopefully the native plugin gets this resolved without additional workarounds / packages.

I'll give it a shot via gatsby-image.

Yep, it's completely understandable to close it if there's no valuable resolution or feedback regarding the core issue. Have a great rest of your week ! :)

jacobmischka commented 5 years ago

Thank you for being understanding, you too!