Can I use <style> inside of inline svg while using vue.js?
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.