Search code examples
vue.jssvgsizescaling

SVG and dynamic resizing - vuejs

I am pulling hair from my head for weeks already.

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

<svg xmlns="http://www.w3.org/2000/svg">
<path d="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"/>
</svg>

Now I was thinking to wrap it something like this:

<template>
  <svg
    xmlns="http://www.w3.org/2000/svg"
    :width="width"
    :height="height"
    viewBox="0 0 18 18"
    :aria-labelledby="iconName"
    role="presentation"
  >
    <title
      :id="iconName"
      lang="en"
    >{{ iconName }} icon</title>
    <g :fill="iconColor">
      <slot/>
    </g>
  </svg>
</template>

But no matter what I do it does not resize, I tried to change viewBox to 0 0 100 100 or dynamic with 0 0 width height, with last one it does change but in not the way I understand it.

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 transform="scale(1.34,1.34)" to path, but that's not a fix.

What is the best way to create icons like that ? I fried my brain.

Solution

  • It helps to ensure the SVG files are created or exported nicely from whatever program (Figma, Illustrator, etc) to ensure there's no excess whitespace from the artboard included in the SVG. The SVG code provided looks like the SVG was placed on an artboard which was much larger than the graphic itself.

    Beyond that, I manually experimented with the viewBox numbers to get a decent result (correct exporting avoids this manual work). Once the viewBox attributes are correctly set, you can apply other manipulations via classes or inline css to achieve your desired result.

    <svg viewbox="0 0 12 11" xmlns="http://www.w3.org/2000/svg">
    <path d="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"/>
</svg>

    I would recommend using class or style binding for hooking up any css styles in Vue, the docs cover this here: https://v2.vuejs.org/v2/guide/class-and-style.html

    Demo with plain SVG and Vue versions: https://codepen.io/nikcornish/pen/OJXoWvj