gilbarbara/react-inlinesvg

Uniquify class names

robrechtme opened this issue · 4 comments

robrechtme commented

My SVGs are filled with a style tag inside, and some general classnames to choose a fill color.
This causes conflicts when multiple SVGs are loaded on one page.

gilbarbara commented

Meaning?

robrechtme commented

Duplicate of #83 , sorry.
This means that one SVG its fill color is overwritten by the other SVG. Obviously you can just pick better classnames for each color, but Illustrator exports SVGs by default like the example in #83.

I thought uniquifying the classnames (in the elements but also in the style tag) would be a good solution. Inlining all CSS of each SVG is also a possibility.

gilbarbara commented

So uniquifyIDs won't help in this case, right?
This isn't something I want to support since Illustrator is really bad at exporting SVGs.
It would just bloat the library.

robrechtme commented

Thanks for your quick response. Correct, I need something similar for classnames.

Right now I'm solving it with a CSS inliner tool, which gets the job done too.

  • 👍1