How to work with SVG sprites to be able to change the color/size of the icons?

Question

css

Fucked up =( I know that such questions have already been asked, but somehow nothing works.
I moved from the era of using font-awesome to the era of "Here's a sketch file for you, pull out the svg that we've done there".
So, given:
1. . sketch file with icons in which
svg icons
are exported in different quality, that is, not always optimally made, rather, even always not optimal ways:
1. Generate an icon font in iconmoon (for example)
2. Make an SVG sprite
Generated a font in iconmoon, some icons were distorted, sometimes there were some warnings like "we will ignore the stroke" or something like that. In SVG itself, I don’t rummage so well)
In general, due to the fact that you constantly need to go there, generate a new file with a font, and due to the fact that some icons were distorted, I decided to try sprites.
Found this https://github.com/kisenka/svg-sprite-loader . Connected.
First question:
1) How can I avoid writing import redo from '@/assets/svg/redo.svg' for each icon? I'm using vueJS if that makes a difference
2) The worst part. Can't change color. I looked at the SVG that I exported from the sketch:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="21px" height="18px" viewBox="0 0 21 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 49.1 (51147) - http://www.bohemiancoding.com/sketch -->
    <title>Page 1</title>
    <desc>Created with Sketch.</desc>
    <defs></defs>
    <g id="Desktop" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="1024-copy-2" transform="translate(-101.000000, -701.000000)" fill="#C7C7C7">
            <g id="Group-6" transform="translate(36.000000, 688.000000)">
                <g id="Group-2" transform="translate(52.000000, 0.000000)">
                    <g id="Page-1" transform="translate(13.000000, 13.000000)">
                        <path d="M12,0 C7.02999973,0 3,4.0300002 3,9 L0,9 L4,13 L8,9 L5,9 C5,5.13000011 8.13000011,2 12,2 C15.8699998,2 19,5.13000011 19,9 C19,12.8699998 15.8699998,16 12,16 C10.4899997,16 9.09000015,15.5100002 7.94000005,14.7000007 L6.51999998,16.1400012 C8.03999996,17.2999992 9.94000053,18 12,18 C16.9700012,18 21,13.9699993 21,9 C21,4.03000068 16.9699993,0 12,0 Z" id="Fill-2" transform="translate(10.500000, 9.000000) scale(-1, 1) translate(-10.500000, -9.000000) "></path>
                    </g>
                </g>
            </g>
        </g>
    </g>
</svg>

Apparently not optimal. Found https://jakearchibald.github.io/svgomg/, pasted there, got:

<svg width="21" height="18" xmlns="http://www.w3.org/2000/svg">
  <path d="M9 0a9 9 0 0 1 9 9h3l-4 4-4-4h3c0-3.87-3.13-7-7-7S2 5.13 2 9a6.995 6.995 0 0 0 11.06 5.7l1.42 1.44A9 9 0 1 1 9 0z" fill="#C7C7C7" fill-rule="evenodd"/>
</svg>

OK. By analogy with https://codepen.io/chriscoyier/pen/EBHlD , I'm trying to change the color by applying CSS "fill" to the svg element, I insert the svg itself like this:

<svg class="svg-icon">
      <use xlink:href="#redo"></use>
    </svg>

Doesn't change in any way. Somewhere I found examples that there is directly to the path to apply fill, as I have not tried, it does not work.
Plus, it’s still not clear how this webpack magic works, I used this example https://github.com/kisenka/svg-sprite-loader/tree/... but I don’t understand where the SVG is inserted as a result (there is nothing in the compiled page code can not see). There is an option with extract mode, but it didn't work for me like :(

Answer 1

Just yesterday I did the same as here . The first time it takes quite a long time to set it all up, but the result is very good.