SVG иконки делаем спрайт
SVG спрайт очень перспективная технология за которой будущее веб графики и особенно иконок.
Делаем спрайт:
- Получаем набор SVG файлов в папке проекта
- Автоматически оптимизируем их
- Автоматически сшиваем их в SVG-спрайт с символами
- Автоматически делаем этот SVG скрытым
- Полученный SVG-спрайт вставляем в разметку
- Используем для вставки иконок в нужные нам места
<svg><use></use></svg>. Вариантов как вставить такое в разметку уйма: от простенького gulp-file-include, до PHP-шного инклуда.
Пункты 2-4 можно выполнять по одной команде из консоли. Приведенные ссылки на средства автоматизации — мои предпочтения, не обязательно использовать именно их, есть аналоги.
Как вариант, вместо вставки спрайта на страницу, можно с помощью JS сохранить его в localStorage браузера посетителя и тем же JS-ом вставлять в разметку при каждом открытии страницы сайта. Это костыль и это не будет работать в случае сохранения посетителем страницы сайта на диск.
-- Генератор SVG спрайту --
Простой и хороший вариант
Шаг 1. Получаем набор отдельных SVG файлов или иконочный шрифт с fontello.com. Если это отдельные файлы, прогоняем через оптимизатор.
Шаг 2. Импортируем это на icomoon.io и выбираем все иконки. В настройках проекта снимаем ненужные флажки, в частности, все флажки файловых форматов (SVG скачается в любом случае), нажимаем «download».
Шаг 3. Берем из скачанного архива файл symbol-defs.svg , (в нем содержится библиотека символов), вставляем этот файл в разметку и используем SVG-иконки по принципу symbol → use. Получаем возможность управлять размером и заливкой каждой иконки.
Самый простой вариант:
Шаг 1. Получаем несколько SVG-файлов. Либо находим в сети сразу отдельные SVG файлы (flaticon.com особенно хорош!), либо получаем SVG из иконочного шрифта (который только что сделали на fontello.com) через сервис icomoon.io.
Шаг 2. Прогоняем его через оптимизатор.
Шаг 3. Выгружаем полученные SVG-иконки на iconizr.com, получаем архив с примером их применения похожим на иконочный шрифт образом. Сегодня (конец ноября 2016 года) я получил с этого сервиса архив с несколькими вариантами вставки (в т.ч. с конверсией в растр), самый интересный (и похожий на иконочный шрифт) среди них такой: SVG вставлен внутри CSS:
.icon-clock {background-image:url('dаta:image/svg+xml,%3Csvg%20...'); background-repeat:no-repeat}
.icon-clock-dims {width: 32px; height: 32px;}Это позволит легко вставить SVG и избежать запроса за картинкой на сервер, но не даст легко управлять цветом иконки.