Two SVGs on the same page interfering

[emptycrown]

In some cases, when I import two different SVGs onto the same page, their styles interfere, and one image becomes distorted (or there's an extra shadow, etc.).

For example:

import Tree from '-!svg-react-loader!../../images/tree.svg';
import Mountain from '-!svg-react-loader!../../images/mountain.svg';

The components are then rendered inline. Does anyone know how to make sure the SVGs don't interfere with each other?

[SilverFox70]

Yes! I had the same problem and the underlying cause has to do with the IDs in the SVGs. I have a created a fork of this that solves this problem and is very easy to use. One caveat: if you have two or more SVGs with the same exact name you will still get ID collisions and issues. Check it out here: https://github.com/SilverFox70/svg-react-loader

[ianhowe76]

I had a similar issue - the fix by @SilverFox70 works for me

[jhamlet]

@SilverFox70 Do you want to contribute a pull request?

[SilverFox70]

Hi Jerry, I had meant to submit a PR a while ago but got sidetracked. Let me take a look to see if it needs any cleaning up/commenting and then I'll submit.

[Strangehill]

In trying to troubleshoot this issue, I reproduced the problem here

Isn't the classIdPrefix query parameter mentioned in the README meant to address just this issue?

[0xferit]

Any updates on this? I am having the same issue.