How to inherit svg's css properties using vue svg loader

Question

I am using vue-svg-loader to use my svg files as a component in Vue project. When I am rendering those svgs I am losing default css properties that are inside of the svg file. I can add those css properties inside of my component where I am rendering svg files, but that kind of violates the idea of reusable components since each svg file has its own property. Is there a way to inherit their css?

'''

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
     viewBox="0 0 612 792" style="enable-background:new 0 0 612 792;" xml:space="preserve">
<style type="text/css">
    .st0{fill:#FFFFFF;}
    .st1{fill:none;}
    .st2{fill:#FFFFFF;stroke:#000000;stroke-width:2;stroke-miterlimit:10;stroke-dasharray:10;}
    .st3{font-family:'ArialMT';}
    .st4{font-size:32px;}
</style>
<font horiz-adv-x="2048">

'''

Answer 1

Likely what is happening is that all of your SVG files use the same class names (st0, st1, etc). They are overriding each other. You'll need to:

1. manually rename the classes in each file, so they use different names, or

2. That file looks like it came from Illustrator. Assuming they all did, then load the SVGs back into Illustrator, and re-export them. This time change which method AI uses to set the element styles. I don't have AI handy right now, but there will probably be three options (I don't recall exactly what they are called):

   • Internal CSS - what the file above is using
   • Style attributes - uses the style="..." attrinbute
   • Attributes - uses attributes like fill="#ff0000"

If you need to style the SVGs with CSS in your page, you'll probably want to use the last option. That's because style attributes have a higher priority than CSS, so you would need to use the CSS !important flag, which is not generally recommended.