Как я использую SVG-спрайты

[@gatilin222]

Про localStorage подсказали на @cssunderhood)

[@Eklykti]

А если на клиенте вдруг выключен js, то вместо иконки юзер увидит хрен?

[@gatilin222]

osvaldas.info/caching-svg-sprite-in-localstorage Здесь написано, что делать в этом случае.

[@dom1n1k]

Я как ни старался, никакой божественности в Jade не ощутил. Есть, конечно, свои плюсы и сильные стороны, но некоторое количество минусов перечеркивают их полностью. Проще по старинке сверстать.

[@gatilin222]

Согласен, нет ничего божественного, просто подходит под мои задачи)

[@Houston]

Для вебпака тоже такое есть, если кому нужно github.com/kisenka/svg-sprite-loader

[@TNK]

Есть же gulp-svgstore. Вместо кэширования в localStorage предпочитаю использовать внешний файл-спрайт и svg4everybody. Ещё покорёбило, что результат склейки svg назвали .html.

[@gatilin222]

Так я и показал, что это один из способов решения) Используйте те плагины, которые вам удобны)

[@Iskin]

Я инлайню SVG прямо в CSS. С помощью postcss-svg можно сменить цвет. Правда нет анимаций, зато опрятнее выходит — меньше магии и нормальное кеширование.

[@Large]

при подключении через символ тоже не работает цсс анимация.

[@gatilin222]

Друг, вы не правы, все замечательно работает)

[@Large]

jsfiddle.net/v5y027r1 варианты с use так же не работают. если у вас есть рабочий вариант — поделитесь.

Обсуждали здесь — habrahabr.ru/company/devexpress/blog/269331

[@Large]

налажал в коде выше. вот правильный вариант jsfiddle.net/v5y027r1/5 проверять в хроме.

[@gatilin222]

Я имел ввиду transition) А то что animation не работает — не страшно, он и не нужен для иконок(для меня)

[@Iskin]

Вообще, конечно, кеширование в localStorage — очень неправильный подход. localStorage создан для данных, а не кеша ресурсов. Например, когда пользователь нажмёт «Очистить кеш», то localStorage не будет очистен.

[@JiLiZART]

Кешем могут теперь заниматься модные нынче service worker'ы dev.opera.com/service-worker.js

[@gatilin222]

Спасибо за наводку, еще не изучал их

[@mr47]

Модные — да. Но рано их использовать.

[@jmaks13]

Если кому то интересно, то можно создать svg спрайт иначе, вот статья
www.liquidlight.co.uk/blog/article/creating-svg-sprites-using-gulp-and-sass

[@gatilin222]

Это тоже хороший способ, но мне он не подходит(

[@nowm]

Но я заметил у данного плагина один баг — иногда он преобразовывает символ '>' в кодировку '&g t;', только без пробела между символами 'g' и 't'(если убрать пробел — получится символ).

Это замечание относится конкретно к статье на Хабре: вы не учли, что в кодах есть символ «&», который можно написать как «&». Соответственно, если вы хотите написать «>», то нужно писать это так: > — оно при публикации статьи превратится в >

Надеюсь, это поможет не только вам, но и любому человеку, который не знает, как выводить в статьях HTML-коды в ситуации, когда они конвертируются в нормальные символы при вводе.

[@gatilin222]

Спасибо вам! А я то мучался, а оно вон все как просто)

[@romandev411]

удаление fill не машает?
в некоторых иконках есть такая штука как fill=«none» и ее оставлять надо.
потому:
$('[fill^="#"]').removeAttr('fill');

[@romandev411]

Здесь не описано как решается конфликт id.
Подходит только для простых свг иконок