Комментарии 26
НЛО прилетело и опубликовало эту надпись здесь
Про localStorage подсказали на @cssunderhood)
А если на клиенте вдруг выключен js, то вместо иконки юзер увидит хрен?
osvaldas.info/caching-svg-sprite-in-localstorage Здесь написано, что делать в этом случае.
Я как ни старался, никакой божественности в Jade не ощутил. Есть, конечно, свои плюсы и сильные стороны, но некоторое количество минусов перечеркивают их полностью. Проще по старинке сверстать.
Для вебпака тоже такое есть, если кому нужно github.com/kisenka/svg-sprite-loader
Есть же gulp-svgstore. Вместо кэширования в localStorage предпочитаю использовать внешний файл-спрайт и svg4everybody. Ещё покорёбило, что результат склейки svg назвали .html.
Я инлайню SVG прямо в CSS. С помощью postcss-svg можно сменить цвет. Правда нет анимаций, зато опрятнее выходит — меньше магии и нормальное кеширование.
при подключении через символ тоже не работает цсс анимация.
Друг, вы не правы, все замечательно работает)
jsfiddle.net/v5y027r1 варианты с use так же не работают. если у вас есть рабочий вариант — поделитесь.
Обсуждали здесь — habrahabr.ru/company/devexpress/blog/269331
Обсуждали здесь — habrahabr.ru/company/devexpress/blog/269331
налажал в коде выше. вот правильный вариант jsfiddle.net/v5y027r1/5 проверять в хроме.
Я имел ввиду transition) А то что animation не работает — не страшно, он и не нужен для иконок(для меня)
Вообще, конечно, кеширование в localStorage — очень неправильный подход. localStorage создан для данных, а не кеша ресурсов. Например, когда пользователь нажмёт «Очистить кеш», то localStorage не будет очистен.
Кешем могут теперь заниматься модные нынче service worker'ы dev.opera.com/service-worker.js
Спасибо за наводку, еще не изучал их
Модные — да. Но рано их использовать.
Если кому то интересно, то можно создать svg спрайт иначе, вот статья
www.liquidlight.co.uk/blog/article/creating-svg-sprites-using-gulp-and-sass
www.liquidlight.co.uk/blog/article/creating-svg-sprites-using-gulp-and-sass
НЛО прилетело и опубликовало эту надпись здесь
Но я заметил у данного плагина один баг — иногда он преобразовывает символ '>' в кодировку '&g t;', только без пробела между символами 'g' и 't'(если убрать пробел — получится символ).
Это замечание относится конкретно к статье на Хабре: вы не учли, что в кодах есть символ «&», который можно написать как «&». Соответственно, если вы хотите написать «>», то нужно писать это так: > — оно при публикации статьи превратится в >
Надеюсь, это поможет не только вам, но и любому человеку, который не знает, как выводить в статьях HTML-коды в ситуации, когда они конвертируются в нормальные символы при вводе.
удаление fill не машает?
в некоторых иконках есть такая штука как fill=«none» и ее оставлять надо.
потому:
$('[fill^="#"]').removeAttr('fill');
в некоторых иконках есть такая штука как fill=«none» и ее оставлять надо.
потому:
$('[fill^="#"]').removeAttr('fill');
Здесь не описано как решается конфликт id.
Подходит только для простых свг иконок
Подходит только для простых свг иконок
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Как я использую SVG-спрайты