Как создать SVG-спрайт

Ниже покажу как создать свг спрайт и вывести иконку svg на странице. Внимание данный способ не подходит для svg иконок с градиентом.

Инструкция

  1. Создаём файл под названием sprite.svg;
  2. Вставляем в него код и иконки svg;
  3. Выводим нужную иконку на странице.

1. Создаём файл под названием sprite.svg

Создаем файл с названием sprite.svg. Его можно положить в папку assets (не обязательно). Редактировать этот файл можно с помощью текстового редактора, например, Visual Studio Code.

2. Вставляем в файл sprite.svg код и сами иконки

  1. Вставьте следующий код в файл sprite.svg:

    <svg xmlns="http://www.w3.org/2000/svg">
        <!-- Тут будем вставлять иконки -->
    </svg>

  2. Теперь вместо комментария «Тут будем вставлять иконки» вставляем код svg иконки. Код иконки можно скопировать в фигме, нажимаем на иконку svg правой кнопкой мыши, выбираем "Copy / paste as" далее "Copy as SVG". Например, вставим иконку стрелочки:

    <svg xmlns="http://www.w3.org/2000/svg">
        <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M5 12.0123C5.00006 12.2589 5.07503 12.4998 5.2153 12.7043C5.35558 12.9088 5.55479 13.0676 5.78745 13.1603C6.0201 13.253 6.27562 13.2754 6.52131 13.2246C6.767 13.1739 6.99169 13.0523 7.16663 12.8754L13.4234 6.73005L13.4234 26.8683C13.421 27.0325 13.4519 27.1955 13.5143 27.3479C13.5766 27.5002 13.6691 27.6389 13.7865 27.7558C13.9039 27.8728 14.0438 27.9656 14.198 28.029C14.3522 28.0924 14.5178 28.125 14.6849 28.125C14.8521 28.125 15.0176 28.0924 15.1719 28.029C15.3261 27.9656 15.466 27.8728 15.5834 27.7558C15.7007 27.6389 15.7933 27.5002 15.8556 27.3479C15.918 27.1955 15.9488 27.0325 15.9465 26.8683L15.9465 6.73005L22.2033 12.8754C22.3195 12.9943 22.4587 13.0893 22.6128 13.1547C22.7669 13.2201 22.9327 13.2546 23.1005 13.2563C23.2683 13.258 23.4348 13.2267 23.5902 13.1644C23.7456 13.1021 23.8868 13.01 24.0055 12.8934C24.1242 12.7768 24.218 12.6382 24.2814 12.4856C24.3448 12.3329 24.3766 12.1694 24.3749 12.0046C24.3732 11.8397 24.3381 11.6769 24.2715 11.5255C24.2049 11.3742 24.1082 11.2375 23.9871 11.1233L15.5769 2.86277C15.3403 2.63049 15.0195 2.5 14.6849 2.5C14.3504 2.5 14.0296 2.63049 13.793 2.86277L5.38273 11.1233C5.26164 11.2388 5.16537 11.377 5.09962 11.5297C5.03388 11.6824 5.00001 11.8465 5 12.0123Z" fill="#010111"/>
        </svg>        
    </svg>

  3. Меняем у иконки тег svg на symbol, убираем в теге svg все атрибуты и xmlns, т.к. он уже задан для всех иконок (см. пункт 1). Оставляем только атрибут viewBox. Затем добавляем id (пишем любое название, с помощью него будем ссылаться на нужную иконку и выводить её на странице). Получится следующий код:

    <svg xmlns="http://www.w3.org/2000/svg">
        <symbol id="arrow" viewBox="0 0 30 30">
            <path d="M5 12.0123C5.00006 12.2589 5.07503 12.4998 5.2153 12.7043C5.35558 12.9088 5.55479 13.0676 5.78745 13.1603C6.0201 13.253 6.27562 13.2754 6.52131 13.2246C6.767 13.1739 6.99169 13.0523 7.16663 12.8754L13.4234 6.73005L13.4234 26.8683C13.421 27.0325 13.4519 27.1955 13.5143 27.3479C13.5766 27.5002 13.6691 27.6389 13.7865 27.7558C13.9039 27.8728 14.0438 27.9656 14.198 28.029C14.3522 28.0924 14.5178 28.125 14.6849 28.125C14.8521 28.125 15.0176 28.0924 15.1719 28.029C15.3261 27.9656 15.466 27.8728 15.5834 27.7558C15.7007 27.6389 15.7933 27.5002 15.8556 27.3479C15.918 27.1955 15.9488 27.0325 15.9465 26.8683L15.9465 6.73005L22.2033 12.8754C22.3195 12.9943 22.4587 13.0893 22.6128 13.1547C22.7669 13.2201 22.9327 13.2546 23.1005 13.2563C23.2683 13.258 23.4348 13.2267 23.5902 13.1644C23.7456 13.1021 23.8868 13.01 24.0055 12.8934C24.1242 12.7768 24.218 12.6382 24.2814 12.4856C24.3448 12.3329 24.3766 12.1694 24.3749 12.0046C24.3732 11.8397 24.3381 11.6769 24.2715 11.5255C24.2049 11.3742 24.1082 11.2375 23.9871 11.1233L15.5769 2.86277C15.3403 2.63049 15.0195 2.5 14.6849 2.5C14.3504 2.5 14.0296 2.63049 13.793 2.86277L5.38273 11.1233C5.26164 11.2388 5.16537 11.377 5.09962 11.5297C5.03388 11.6824 5.00001 11.8465 5 12.0123Z" fill="#010111"/>
        </symbol>        
    </svg>

  4. Из path удаляем fill и stroke, чтобы стилизовать цвета иконки через css. Получится следующий код:

    <svg xmlns="http://www.w3.org/2000/svg">
        <symbol id="arrow" viewBox="0 0 30 30">
            <path d="M5 12.0123C5.00006 12.2589 5.07503 12.4998 5.2153 12.7043C5.35558 12.9088 5.55479 13.0676 5.78745 13.1603C6.0201 13.253 6.27562 13.2754 6.52131 13.2246C6.767 13.1739 6.99169 13.0523 7.16663 12.8754L13.4234 6.73005L13.4234 26.8683C13.421 27.0325 13.4519 27.1955 13.5143 27.3479C13.5766 27.5002 13.6691 27.6389 13.7865 27.7558C13.9039 27.8728 14.0438 27.9656 14.198 28.029C14.3522 28.0924 14.5178 28.125 14.6849 28.125C14.8521 28.125 15.0176 28.0924 15.1719 28.029C15.3261 27.9656 15.466 27.8728 15.5834 27.7558C15.7007 27.6389 15.7933 27.5002 15.8556 27.3479C15.918 27.1955 15.9488 27.0325 15.9465 26.8683L15.9465 6.73005L22.2033 12.8754C22.3195 12.9943 22.4587 13.0893 22.6128 13.1547C22.7669 13.2201 22.9327 13.2546 23.1005 13.2563C23.2683 13.258 23.4348 13.2267 23.5902 13.1644C23.7456 13.1021 23.8868 13.01 24.0055 12.8934C24.1242 12.7768 24.218 12.6382 24.2814 12.4856C24.3448 12.3329 24.3766 12.1694 24.3749 12.0046C24.3732 11.8397 24.3381 11.6769 24.2715 11.5255C24.2049 11.3742 24.1082 11.2375 23.9871 11.1233L15.5769 2.86277C15.3403 2.63049 15.0195 2.5 14.6849 2.5C14.3504 2.5 14.0296 2.63049 13.793 2.86277L5.38273 11.1233C5.26164 11.2388 5.16537 11.377 5.09962 11.5297C5.03388 11.6824 5.00001 11.8465 5 12.0123Z"/>
        </symbol>        
    </svg>

  5. Далеем добавляем остальные иконки по той же схеме.

3. Выводим нужную иконку на странице

  1. Для этого добавляем на страницу или в шаблон страницы, где нужно вывести иконку, следующий код. Добавляем атрибуты width и height, добавляем класс (название может быть любым), чтобы стилизовать через css. В use в атрибуте href вставляем адрес на файл sprite.svg добавляем в конце адреса «#id» и меняем id на id нужной иконки из файла sprite.svg.

    <svg class="icon" width="24" height="24">
        <use href="/assets/sprite.svg#arrow"></use>
    </svg>

    Если вы создаете сайт на WordPress и используете родительскую тему, то в атрибут href добавьте «<?php echo esc_url(get_template_directory_uri()); ?>» или если используете дочернюю тему, то «<?php echo esc_url(get_stylesheet_directory_uri()); ?>». Например:

    <svg class="icon" width="24" height="24">
        <use href="<?php echo esc_url(get_template_directory_uri()); ?>/assets/sprite.svg#arrow"></use>
    </svg>

  2. В файле css добавляем для нашего класса стили. fill или stroke для того, чтобы задать цвет. Задаём размеры с помощью width, height. Если будем добавлять анимацию, например смену цвета по ховеру, то добавляем свойство transition. Добавляем flex-shrink со значением «0», чтобы иконка не сжималась если она будет являться флекс-элементом.

      .icon {
        width: 24px;
        height: 24px;
        flex-shrink: 0;
        fill: #000;
        transition: fill 0.2s ease-in-out;
      }

  3. Готово. Если вы сделали всё правильно иконка должна появиться на странице.