title: SVGs override each others CSS-style
body: <p>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:</p>
  
  <pre><code>&lt;div class="section-icon" v-html="getIconForEvent(event)"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>This displays the right icons at the right place, but I ran into some problems with this approach.</p>
  
  <p>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
  <a href="https://i.stack.imgur.com/5pe5X.png" rel="noreferrer">this</a>. </p>
  
  <p>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!</p>