Иконки в HTML: подключение через SVG-спрайт

📂 Категория: HTML
🏷️ Теги:

Вряд ли мы найдём хоть один сайт, который не использует иконки. Но существует несколько способов их подключения.

Подключение через ссылку (как внешний ресурс)

Самый простой способ — добавить иконку как изображение:

<img src="/icons/search.svg" alt="Поиск" width="24" height="24" aria-hidden="true" />

Или через CSS:

.icon {
  background-image: url('icon.svg');
}

Минусы:

  • Нельзя изменить цвет через fill, stroke или color. Иконка всегда будет такой, какой лежит в файле.
  • Для каждого цвета нужен отдельный файл (search.svg, search-white.svg), что усложняет поддержку.

Когда использовать: Подходит для статичных логотипов или иконок, цвет которых точно не будет меняться динамически. Иначе придётся создавать отдельную иконку другого цвета, например, cross.svg и cross_white.svg, что совершенно неудобно.

Inline-вставка (код SVG прямо в HTML)

Вставляем разметку SVG напрямую в документ:

<svg
  xmlns="http://www.w3.org/2000/svg"
  width="24"
  height="24"
  viewBox="0 0 24 24"
  fill="none"
  stroke="currentColor"
  stroke-width="1.5"
  stroke-linecap="round"
  stroke-linejoin="round"
  aria-hidden="true"
>
  <path d="M6 9l6 6l6 -6"></path>
</svg>

Плюсы:

  • Цветом можно управлять через CSS (например, через stroke или fill).
  • Иконка полностью контролируема и доступна для анимаций.

Минусы:

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

Когда использовать: Для уникальных иконок, которые не повторяются, или когда важна тонкая анимация.

SVG-спрайт (оптимальный способ)

Спрайт объединяет все иконки в одном скрытом блоке. Вы создаёте один SVG-файл, внутри которого каждая иконка обёрнута в <symbol> с уникальным id. Можно разместить его прямо на странице, или отдельным файлом. Если у иконки записан цвет, то его нужно удалить.

<svg xmlns="http://www.w3.org/2000/svg" style="display: none">
  <symbol
    id="chevron-up"
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    stroke-width="1.5"
    stroke-linecap="round"
    stroke-linejoin="round"
  >
    <path d="M6 9l6 6l6 -6"></path>
  </symbol>
</svg>

Теперь можем использовать в наших компонентах через use:

<svg aria-hidden="true">
  <use href="#chevron-up"></use>
</svg>

Если спрайт лежит в отдельном файле, то указываем полный путь до него.

<svg aria-hidden="true">
  <use href="/icons.svg#chevron-up"></use>
</svg>

Остаётся только стилями CSS задать цвет и размер.

svg {
  fill: currentColor;
}

Теперь иконки будут автоматически менять цвет в зависимости от контекста (например, в кнопке при ховере).

Важно

Для корректной работы с currentColor нужно привести все иконки к единому принципу заливки. Если в одних используется fill, а в других stroke, результат может быть непредсказуемым. Лучше конвертировать все иконки в fill.

Плюсы

  • Иконки легко переиспользовать.
  • Цвет управляется через CSS.
  • Достаточно обновить спрайт — и изменения применятся на всём сайте.
  • Меньше HTTP-запросов при использовании одного файла.

Минусы

  • Требует начальной настройки.
  • Не все иконки одинаково хорошо адаптируются под currentColor (нужна предварительная обработка).

Что насчёт фреймворков?

В React, Vue, Angular, Svelte и других современных инструментах часто используют плагины для импорта иконок как компонентов. Однако подход со спрайтом остаётся универсальным и отлично работает даже в сборках на фреймворках, особенно если вы цените простоту и независимость от экосистемы.

Для большинства проектов SVG-спрайт — оптимальный выбор. Он сочетает контроль над стилями, лёгкость обновления и чистоту кода.

Похожие статьи