Быстрое создание SVG спрайтов и подключение их к сайту

svg спрайты Верстка

В данном уроке разберем как легко и просто создать спрайт из SVG иконок при помощи сервиса icomoon и подключить его к сайту, так же разберем как в дальнейшем в ручную добавлять туда новые иконки.

Идем на https://icomoon.io/app/ выбираем нужные иконки для сайта (если какие-то не нашли не страшно — их потом добавим вручную), после чего нажимаем на кнопку «Generate SVG & More».

Генерируем пакет SVG иконок

на следующей странице скачиваем готовый пакет с нужными SVG

Скачиваем пакет с svg

Подключение SVG спрайта к сайту

Распаковываем скачанный архив, там следующее содержимое:

Содержимое сгенерированного пакета

от сюда нам нужно 3 файла: style.css (минимальное оформление иконки), svgxuse.js (скрипт которые добавляет поддержку SVG старыми браузерами) и symbol-defs.svg — сам спрайт.

Спрайт заливаем прям в корень сайта, css либо просто берем эти пару строчек css копируем и вставляем в основную CSS таблицу сайта, либо тоже заливаем на сайт в папку где хранятся основные стили сайта, js соответственно в папку с js (в моем случае это template/css-js).

Осталось только подключить это все добро к сайту и начать пользоваться.

  • в head сайта подключаем файл стилей: <link rel="stylesheet" href="template/css-js/style.css">
  • перед закрытием body подключаем скрипт: <script defer src="template/css-js/svgxuse.js"></script>

Как использовать

В нужном месте сайта для вывода иконки используем следующую конструкцию:

<svg class="icon icon-mobile"><use xlink:href="symbol-defs.svg#icon-mobile"></use></svg>

Здесь icon основной класс для иконок (из style.css), icon-mobile не обязательно указывать — это класс по которому можно стилизовать иконку (к примеру изменить ее цвет).  href="symbol-defs.svg#icon-mobile" ссылаемся на конкретную иконку в спрайте, в данном примере на иконку с id #icon-mobile.

конкретная иконка в спрайте

Названия (или id) иконок в сгенерированом спрайте можно посмотреть в файле demo.html.

демо файл

Важно! Если вы верстаете локально — иконки в верстке отображаться не будут.

Как добавить свои иконки в спрайт

Добавить иконку в спрайт легко, для этого открываем svg иконку через какой-нибудь редактор кода, к примеру скачал иконку поиска с https://fontawesome.com/icons

скачиваем svg иконку

вот ее код:

<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="search" class="svg-inline--fa fa-search fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"></path></svg>

В спрайте создаем вот такую конструкцию:

<symbol id="" viewBox="">
<path d=""></path>
</symbol>

Далее в id ставим название на которое будем ссылаться, в данном случае «icon-search». В viewBox соответственно копируем код из viewBox. И в path из path. В конечном итоге получаем:

<symbol id="icon-search" viewBox="0 0 512 512">
<path d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"></path>
</symbol>

Все можно ее выводить на сайте: <svg class="icon icon-search"><use xlink:href="symbol-defs.svg#icon-search"></use></svg>

Понравилась статья? Можно поблагодарить автора: отправив ему донат на
YooMoney
или
Qiwi
. Либо поделившись статьей ☟
Поделиться с друзьями
Алексей

Веб-дизайнер и SEO оптимизатор. Занимаюсь созданием сайтов с 2010 года и их продвижение с 2012 года!

Оцените автора
( Пока оценок нет )
Web-Revenue.ru