jacobmischka/gatsby-plugin-react-svg

Two SVGs on the same page interfering

ernestosotelo opened this issue · 3 comments

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 jhamlet/svg-react-loader#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?

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.

@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 ! :)

Thank you for being understanding, you too!