title: SVG and dynamic resizing - vuejs
body: <p>I am pulling hair from my head for weeks already.</p>
  <p>I can't figure out how to deal with SVG files.
  Essentially I want to have all my svg icons as components in vue, so I started converting them to components.
  Here is an example of svg</p>
  <pre><code>&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot;&gt;
  &lt;path d=&quot;M.75 10.5A.749.749 0 010 9.75v-7.5a.749.749 0 01.75-.75h6a.749.749 0 01.75.75.75.75 0 01-.75.75H1.5v6h6V6.75A.75.75 0 018.25 6a.75.75 0 01.75.75v3a.75.75 0 01-.75.75zm3.97-3.22a.75.75 0 010-1.06l4.5-4.5a.727.727 0 01.08-.053L8.379.746A.437.437 0 018.687 0h2.876A.437.437 0 0112 .437v2.876a.436.436 0 01-.745.308l-.921-.921a.588.588 0 01-.053.08l-4.5 4.5a.749.749 0 01-.531.22.749.749 0 01-.531-.22z&quot;/&gt;
  &lt;/svg&gt;
  </code></pre>
  <p>Now I was thinking to wrap it something like this:</p>
  <pre class="lang-js prettyprint-override"><code>&lt;template&gt;
    &lt;svg
      xmlns=&quot;http://www.w3.org/2000/svg&quot;
      :width=&quot;width&quot;
      :height=&quot;height&quot;
      viewBox=&quot;0 0 18 18&quot;
      :aria-labelledby=&quot;iconName&quot;
      role=&quot;presentation&quot;
    &gt;
      &lt;title
        :id=&quot;iconName&quot;
        lang=&quot;en&quot;
      &gt;{{ iconName }} icon&lt;/title&gt;
      &lt;g :fill=&quot;iconColor&quot;&gt;
        &lt;slot/&gt;
      &lt;/g&gt;
    &lt;/svg&gt;
  &lt;/template&gt;
  </code></pre>
  <p>But no matter what I do it does not resize, I tried to change <code>viewBox</code> to <code>0 0 100 100</code> or dynamic with <code>0 0 width height</code>, with last one it does change but in not the way I understand it.</p>
  <p>Also I struggled to make path to fill svg container, so if I change width and height svg is always bigger than path which also is not nice behavior. The only way I managed to be the size I want (but not dynamic) is by adding <code>transform=&quot;scale(1.34,1.34)&quot; </code> to path, but that's not a fix.</p>
  <p>What is the best way to create icons like that ? I fried my brain.</p>