Handle style tags inside svg

[artfulrobot]

Forgive me if this is a stupid question, but I'm trying to use an svg and mix is throwing errors because it includes style tags. Would it be sensible/possible to extract the style tags separately?

[danielstgt]

Could you show me the SVG and the exact error message? I will try to replicate your case.

I have one test case, with the following SVG:

<!-- File: svg_with_style_tag.svg -->

<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
  <style>
    circle {
      fill: gold;
      stroke: maroon;
      stroke-width: 2px;
    }
  </style>

  <circle cx="5" cy="5" r="4" />
</svg>

This is taken from the MDN web docs.

Including it also worked so far:

<svg-vue icon="svg_with_style_tag"></svg-vue>

[artfulrobot]

I tried the SVG in this zip (GH would not let me upload the svg directly).

parties.zip

[danielstgt]

I've tried it with your parties.svg and it works without any errors.

What SVGO rules are you using and what is the exact error?

[danielstgt]

To be more precise about the setup, this is how I implemented it.

// File: resources/js/app.js
import Vue from 'vue';
import SvgVue from 'svg-vue';

Vue.use(SvgVue);

let app = new Vue({
    el: '#app'
});

// File: webpack.mix.js
const mix = require('laravel-mix');
require('laravel-mix-svg-vue');

mix.js('resources/js/app.js', 'public/js')
    .svgVue();

<!-- In your Blade or Vue component, referring resources/svg/parties.svg -->
<svg-vue icon="parties"></svg-vue>

[artfulrobot]

I can no longer recreate this. I'm so sorry for wasting your time! I'd read something about the style thing being a problem, and so when I got a page full of errors about just that I think I must have assumed it was to do with this. I had tried a number of other vue/svg tricks beforehand, so probably they were to blame!

Thanks