Задолбался =( Знаю что такие вопросы уже задавались, но как-то не получается ничего.
Я перешел из эпохи использования font-awesome в эпоху "Вот вам sketch файл, вытаскивайте svg, что мы там наворотили".
Итак, дано:
1. .sketch файл с иконками в котором в разном качестве экспортируются svg иконки, то есть, не всегда оптимально сделанные. Скорее даже всегда не оптимально
2. Нужно уметь легко включать их в сайт, менять цвет и размер, возможно анимировать в дальнейшем
Если правильно понимаю есть два способа:
1. Сгенерить иконочный шрифт в iconmoon (например)
2. Сделать SVG спрайт
Сгенерил шрифт в iconmoon, некоторые иконки исказились, иногда были какие-то предупреждения типа "мы проигнорируем stroke" или типа того. В самом SVG я так хорошо не шарю)
В общем, из-за того что нужно постоянно заходить туда, генерировать новый файл со шрифтом и из-за того что что-то иконки некоторые исказились, решил попробовать спрайты.
Нашел
https://github.com/kisenka/svg-sprite-loader вот это. Подключил.
Первый вопрос:
1) Как сделать так чтобы не писать для каждой иконки import redo from '@/assets/svg/redo.svg'? Я использую vueJS, если это играет роль
2) Самое страшное. Не получается изменить цвет. Посмотрел SVG который у меня экспортнулся из скетча:
<?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>
Видимо, не оптимально. Нашел
https://jakearchibald.github.io/svgomg/, вставил туда, получил:
<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>
Окей. По аналогии с
https://codepen.io/chriscoyier/pen/EBHlD , пытаюсь изменить цвет, применяя CSS "fill" на элемент svg, сам svg вставляю вот так:
<svg class="svg-icon">
<use xlink:href="#redo"></use>
</svg>
Не меняется ни в какую. Где то находил примеры что там непосредственно к path применить fill, как не пробовал не получается.
Плюс еще не понятно как эта магия с вебпаком работает, я использовал этот пример
https://github.com/kisenka/svg-sprite-loader/tree/... но не понимаю куда в итоге SVG вставляется (в скомпиленном коде страницы ничего не видно). Есть там вариант с extract mode, но он у меня не заработал вроде :(
Простой
Средний
