title: VueJS: Modify SVG fill style with reactive variables
body: <p>I have a SVG that looks like:</p>
  
  <pre><code>&lt;svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 121"&gt;
    &lt;defs&gt;
      &lt;style&gt;
        .cls-1{fill:#fff}.background{fill:#f00}.trim{fill:#0f0}.foreground{fill:#00f}
      &lt;/style&gt;
      &lt;mask id="mask" x="4" y="4" width="111" height="113" maskUnits="userSpaceOnUse"&gt;
        &lt;g id="mask-2"&gt;
          &lt;path id="path-1" class="cls-1" d="M5 50a58 58 0 0 0 19 11l4-8q5 25-1 57c1 0 18 7 32 7s32-7 32-7q-5-31 0-57l4 8q13-5 19-11c-9-16-12-30-17-35q-6-4-24-11H47q-19 7-24 11c-5 5-7 17-18 35z"/&gt;
        &lt;/g&gt;
      &lt;/mask&gt;
      &lt;mask id="mask-2-2" x="5" y="4" width="110" height="113" maskUnits="userSpaceOnUse"&gt;
        &lt;g id="mask-2-3" data-name="mask-2"&gt;
          &lt;path id="path-1-2" data-name="path-1" class="cls-1" d="M5 50a58 58 0 0 0 19 11l4-8q5 25-1 57c1 0 18 7 32 7s32-7 32-7q-5-31 0-57l4 8q13-5 19-11c-9-16-12-30-17-35q-6-4-24-11H47q-19 7-24 11c-5 5-7 17-18 35z"/&gt;
        &lt;/g&gt;
      &lt;/mask&gt;
      &lt;mask id="mask-3" x="3" y="4" width="111" height="113" maskUnits="userSpaceOnUse"&gt;
        &lt;g id="mask-2-4" data-name="mask-2"&gt;
          &lt;path id="path-1-3" data-name="path-1" class="cls-1" d="M5 50a58 58 0 0 0 19 11l4-8q5 25-1 57c1 0 18 7 32 7s32-7 32-7q-5-31 0-57l4 8q13-5 19-11c-9-16-12-30-17-35q-6-4-24-11H47q-19 7-24 11c-5 5-7 17-18 35z"/&gt;
        &lt;/g&gt;
      &lt;/mask&gt;
      &lt;mask id="mask-4" x="5" y="4" width="113" height="113" maskUnits="userSpaceOnUse"&gt;
        &lt;g id="mask-2-5" data-name="mask-2"&gt;
          &lt;path id="path-1-4" data-name="path-1" class="cls-1" d="M5 50a58 58 0 0 0 19 11l4-8q5 25-1 57c1 0 18 7 32 7s32-7 32-7q-5-31 0-57l4 8q13-5 19-11c-9-16-12-30-17-35q-6-4-24-11H47q-19 7-24 11c-5 5-7 17-18 35z"/&gt;
        &lt;/g&gt;
      &lt;/mask&gt;
    &lt;/defs&gt;
    &lt;g id="Page-1"&gt;
      &lt;path class="background" d="M5 50a58 58 0 0 0 19 11l4-8q5 25-1 57c1 0 18 7 32 7s32-7 32-7q-5-31 0-57l4 8q13-5 19-11c-9-16-12-30-17-35q-6-4-24-11H47q-19 7-24 11c-5 5-7 17-18 35z" id="Path-3"/&gt;
      &lt;g mask="url(#mask)"&gt;
        &lt;path id="Path-7" class="trim" d="M28 54l-5-44L4 50l22 17 2-13z"/&gt;
      &lt;/g&gt;
      &lt;g mask="url(#mask-2-2)"&gt;
        &lt;path id="Path-7-Copy" class="trim" d="M91 54l5-44 19 39-23 18-1-13z"/&gt;
      &lt;/g&gt;
      &lt;g mask="url(#mask-3)"&gt;
        &lt;path id="Path-6" class="foreground" d="M6 46a68 68 0 0 0 21 12q2 2-1 3l-15-4-8-10z"/&gt;
      &lt;/g&gt;
      &lt;g mask="url(#mask-4)"&gt;
        &lt;path id="Path-6-Copy" class="foreground" d="M114 46a65 65 0 0 1-20 12q-2 1 1 3l22-11v-3z"/&gt;
      &lt;/g&gt;
      &lt;path id="Path-4" class="foreground" d="M47 3h26l2 2a99 99 0 0 1-16 1 77 77 0 0 1-14-1z"/&gt;
      &lt;g id="Shirt-Collar"&gt;
        &lt;path class="foreground" d="M60 3h13l2 1s1 4-7 7a36 36 0 0 1-8 2 36 36 0 0 1-8-2c-8-3-7-7-7-7l2-1z"/&gt;
        &lt;path id="Combined-Shape" class="background" d="M59 10c-11 0-10-6-10-6h23s1 6-11 6h-2z"/&gt;
      &lt;/g&gt;
    &lt;/g&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>There are three classes in here <code>background</code> <code>trim</code> and <code>foreground</code> that I would like to edit reactively in a VueJS component.</p>
  
  <p>I also have 50 of these SVG's that I would like to switch in and out as well, preferably using some sort of reactive <code>shirtId</code> property.</p>
  
  <p>But I can't figure out how to do that.</p>
  
  <p>I can't embed it like this:</p>
  
  <pre><code>&lt;img src="1.svg" /&gt;
  </code></pre>
  
  <p>Because then I can't edit the three classes.</p>
  
  <p>It seems like I need to embed it directly into the component so I got as far as this:</p>
  
  <p><a href="https://codesandbox.io/s/vue-template-d2yi7" rel="nofollow noreferrer">https://codesandbox.io/s/vue-template-d2yi7</a></p>
  
  <p>Where i'm defining the colours in the <code>&lt;style&gt;</code> section at the end:</p>
  
  <pre><code>&lt;style&gt;
      .cls-1{fill:#fff}
      .background{fill:#f00}
      .foreground{fill:#00f}
      .trim{fill:#0f0}
  &lt;/style&gt;
  </code></pre>
  
  <p>But this isn't reactive.</p>
  
  <p>So then I tried this:</p>
  
  <p><a href="https://codesandbox.io/s/vue-template-ddj72" rel="nofollow noreferrer">https://codesandbox.io/s/vue-template-ddj72</a></p>
  
  <p>Now the background colour can be set reactively using the <code>backgroundStyle</code> property.</p>
  
  <p>But this method would mean creating 50 different components containing each SVG edited with this inline style tag.</p>
  
  <p>I had a look at this SVG Loader: <a href="https://github.com/visualfanatic/vue-svg-loader" rel="nofollow noreferrer">https://github.com/visualfanatic/vue-svg-loader</a>
  But I couldn't see how it would help in my case with the changing of the css properties.</p>
  
  <p>Preferably what I would like to be able to do would be something like:</p>
  
  <pre><code>&lt;my-custom-svg foreground="green" background="red" trim="blue" id="17"&gt;&lt;/my-custom-svg&gt;
  </code></pre>
  
  <p>And then a <code>MyCustomSvg</code> that loads 17.svg and changes the fill on the three classes.</p>
  
  <p>But I don't know if that's possible or how to get from where I am now to that point.</p>