SVGs override each others CSS-style

Question

I am working with Vue.js and try to place some SVG Icons I made in Illustrator for my Webapp. I loaded the icons with Webpacks "require". It is not possible to access the svg's with their source (src attribute of img tag) so we insert them with vue like that:

<div class="section-icon" v-html="getIconForEvent(event)"></div>

This displays the right icons at the right place, but I ran into some problems with this approach.

The SVGs are all styled with a style-tag within the svgs. So the last SVG overwrites the style of all previous SVGs because they somehow all have the same class. In the Chrome Devtools this looks like this.

What can I do to not let the style of SVGs overwrite each others classes? I didnt put the style tags there myself, those are just the style that the SVG had itself. Thanks!

Answer 1

There is nothing you can do other than modifying the class names in each SVG so that they don't clash.

It looks like you are using Illustrator to produce those SVGs. To work around the problem, make sure you tell Illustrator, when you save the SVG, to not use <style> elements for element styling.

When you save, use File > Save As > SVG, then click on "More Options" and change the "CSS Properties" setting. If it is set to "Style Elements", change it to one of the other options. If you do that, it won't use classes and your SVGs won't clash with one another.

To fix your current SVGs, you should be able to load them in, then resave them using the method above.