search

jhamlet / svg-react-loader

Webpack SVG to React Component Loader
MIT License
559 stars 82 forks source link

Two SVGs on the same page interfering #102

Open emptycrown opened 6 years ago

emptycrown commented 6 years ago

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 commented 6 years ago

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 commented 5 years ago

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

jhamlet commented 5 years ago

@SilverFox70 Do you want to contribute a pull request?

SilverFox70 commented 5 years ago

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 commented 4 years ago

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 commented 3 years ago

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