Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

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"/>
Now I was thinking to wrap it something like this:
<template>
    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/>
</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.
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"/>
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
You mean you want to change the size of the icon itself right?
If so, the width and the height attributes won't do anything for you. You can just apply regular css to your svg for that matter.
example:
.my-svg {
  width: 100px;
  height: 100px;
Regarding the viewBox attribute, that is a different concept:
The viewBox attribute defines the position and dimension, in user
space, of an SVG viewport.
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox
EDIT:
Please note that you can also use svg-to-vue-component to use SVGs as components.
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.