Can I use <style> inside of inline svg while using vue.js?

Question

I'm rendering svgs inline on my html5 page. I'd like to have a nested style block inside of each of the svgs for convenience, rather than using presentation attributes or moving everything to the main stylesheet.

But I am also using vue.js at the current time and there seems to be a conflict.

I get an error in the browser console when trying this (and the svg initially appears, then goes black), which seems to be from the Vue loader.

In all honesty I'm not all that clear on exactly what is happening. If anyone would like to explain that would be greatly appreciated! Thanks.

Answer 1

Here's a workaround, in your SVG file, change the style tag to svg:style, eg:

<svg version="1.1" id="icon__nav-desktop_toggle" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 64 64" style="enable-background:new 0 0 64 64;" xml:space="preserve">
    <svg:style type="text/css">
        <![CDATA[
            .icon__nav-toggle_circle{fill:none;stroke-width:3.1747;stroke-miterlimit:10;}
            .icon__nav-toggle_arrow{fill:none;stroke-width:3.1747;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
        ]]>
    </svg:style>
    <polyline id="leftnav-dsk__arrow" class="icon__nav-toggle_arrow" points="24.4,17 39.6,32.1 24.4,47"/>
    <circle id="leftnav-dsk__outer-circle" class="icon__nav-toggle_circle" cx="32" cy="32" r="29"/>
</svg>

VueJS parser doesn't recognize that so it will just ignore it and move on. But it's still valid HTML.

Answer 2

Check my answer to similar question : https://stackoverflow.com/a/56855843/10400487 you just have to remove style tag in svg file and put it in the style of vue component
Be sure to have vue-svg-inline-loader and vue-svg-loader installed