Главная » Разработка Битрикс » Вёрстка и шаблоны » Спрайты и иконки в шаблоне Битрикс

Спрайты и иконки в шаблоне Битрикс

Обновлено: 2026 • Раздел: Вёрстка и шаблоны • Просмотров: 9

Схема SVG-спрайта в шаблоне Битрикс: один файл с символами подключается в шаблон и выводится тегом use

ОглавлениеТри способа и когда какой Как устроен SVG-спрайт Подключение спрайта в шаблоне Стилизация иконок Сборка спрайта Где хранить в структуре Битрикс Доступность Иконки внутри компонентов Частые ошибки Итог

Иконки есть на любом сайте: стрелки, корзина, телефон, социальные сети, галочки в списках. Способов вывести их несколько, и выбор влияет на количество запросов, вес страницы и на то, получится ли перекрасить иконку под наведение.

Разберём три подхода — SVG-спрайт, инлайн-SVG и шрифтовые иконки, — покажем, как подключить спрайт в шаблоне 1С-Битрикс, и объясним, почему растровые спрайты сегодня почти не нужны.

Три способа и когда какой

Способ	Плюсы	Минусы
SVG-спрайт	Один запрос, кешируется, легко перекрашивать	Нужна сборка спрайта
Инлайн-SVG	Ноль запросов, полный контроль над каждой частью	Раздувает HTML, дублируется при повторах
Иконочный шрифт	Простое подключение, работает везде	Только одноцветные, проблемы с доступностью
Растровый спрайт (PNG)	—	Не масштабируется, не перекрашивается

Рабочее правило: SVG-спрайт для интерфейсных иконок, инлайн-SVG — для единичных сложных изображений вроде логотипа или иллюстрации. Иконочные шрифты постепенно уходят: они одноцветные, а при неудачной загрузке шрифта на месте иконок появляются пустые квадраты.

Растровые спрайты из PNG остались в прошлом: они мылятся на экранах с высокой плотностью пикселей и требуют отдельной версии под каждый размер.

Как устроен SVG-спрайт

Спрайт — это один SVG-файл, внутри которого лежат все иконки, каждая обёрнута в тег <symbol> со своим идентификатором:

<svg xmlns="http://www.w3.org/2000/svg" style="display:none">

    <symbol id="icon-cart" viewBox="0 0 24 24">
        <path d="M7 18c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/>
    </symbol>

    <symbol id="icon-phone" viewBox="0 0 24 24">
        <path d="M6.6 10.8c1.4 2.8 3.8 5.1 6.6 6.6l2.2-2.2z"/>
    </symbol>

</svg>

Иконка выводится ссылкой на нужный идентификатор:

<svg class="icon icon--cart">
    <use xlink:href="#icon-cart"></use>
</svg>

Ключевой момент — атрибут viewBox у каждого символа. Без него иконка не будет масштабироваться и получит нулевые размеры.

Помощь по 1С-Битрикс

Возникли проблемы с 1С-Битрикс? Поможем разобраться.

Исправим ошибки, доработаем функционал, ускорим работу сайта или просто подскажем правильное решение. Оставьте номер телефона — свяжемся с вами в ближайшее время.

Подключение спрайта в шаблоне

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

Вставка в разметку

Спрайт подключается в самое начало <body> в footer.php или header.php:

<?php // header.php, сразу после открытия body ?>

<?php include($_SERVER['DOCUMENT_ROOT'] . SITE_TEMPLATE_PATH . '/assets/img/sprite.svg'); ?>

Плюс: иконки доступны сразу, дополнительных запросов нет. Минус: спрайт добавляется в HTML каждой страницы и не кешируется браузером отдельно. При десятке иконок это несущественно, при сотне — заметно.

Отдельный файл

Можно ссылаться на внешний файл спрайта:

<svg class="icon">
    <use xlink:href="<?= SITE_TEMPLATE_PATH ?>/assets/img/sprite.svg#icon-cart"></use>
</svg>

Файл кешируется браузером и загружается один раз на весь сайт. Ограничение: внешний файл должен лежать на том же домене — при загрузке с другого домена ссылка не сработает.

Практичный компромисс — вставлять в разметку небольшой набор иконок, которые нужны на первом экране, а остальные держать в отдельном файле.

Стилизация иконок

Главное преимущество SVG перед картинками — иконки красятся обычным CSS:

.icon {
    width: 24px;
    height: 24px;
    fill: currentColor;      /* берёт цвет текста родителя */
    vertical-align: middle;
}

.button:hover .icon {
    fill: #0B6E8C;
}

Свойство fill: currentColor — самый удобный приём: иконка автоматически принимает цвет текста, и её не нужно перекрашивать отдельно в каждом состоянии.

Важное условие: чтобы это работало, у путей внутри <symbol> не должно быть жёстко прописанного атрибута fill. Экспорт из графического редактора обычно добавляет его автоматически — при сборке спрайта такие атрибуты нужно удалять.

Сборка спрайта

Собирать спрайт руками при десятке иконок можно, при полусотне — уже нет. Варианты:

Онлайн-генераторы. Загружаете набор SVG, получаете готовый спрайт. Подходит для небольших проектов, где иконки меняются редко.
Сборщик проекта. Плагины для Gulp, Webpack или Vite собирают спрайт из папки с иконками автоматически при каждой сборке.
Готовые наборы. Открытые библиотеки иконок часто поставляются уже собранным спрайтом.

Что стоит делать при сборке независимо от инструмента:

удалять атрибуты fill и stroke из путей;
приводить иконки к одной сетке — например, 24×24;
чистить SVG от метаданных редактора, комментариев и пустых групп;
задавать понятные идентификаторы: icon-cart, а не path-1.

Где хранить в структуре Битрикс

/local/templates/main/assets/
    /img/
        sprite.svg          <- собранный спрайт
        /icons/             <- исходники отдельных иконок
            cart.svg
            phone.svg

Исходники иконок держите рядом со спрайтом. Через полгода, когда понадобится добавить одну иконку, наличие исходников избавит от пересборки всего набора с нуля.

Доступность

Иконки читаются программами чтения с экрана, и по умолчанию делают это плохо. Два правила:

Декоративная иконка рядом с текстом скрывается от озвучивания:

<a href="/cart/">
    <svg class="icon" aria-hidden="true"><use xlink:href="#icon-cart"></use></svg>
    Корзина
</a>

Иконка без текста должна получить подпись:

<a href="/cart/" aria-label="Корзина">
    <svg class="icon" aria-hidden="true"><use xlink:href="#icon-cart"></use></svg>
</a>

Иконки внутри компонентов

Если иконка используется только в одном компоненте, её стили логично держать в style.css шаблона этого компонента — он подключается автоматически. Общие стили иконок — в основном файле шаблона. Подробнее о правилах подключения — в статье Подключение CSS и JS в Битрикс.

Частые ошибки

Нет viewBox у символа. Иконка не масштабируется или не отображается вовсе.
Жёсткий fill в путях. currentColor не работает, иконка не перекрашивается.
Спрайт подключён после иконок. Символы ещё не объявлены в момент отрисовки — часть иконок пустая.
Спрайт лежит на другом домене или CDN. Внешние ссылки <use> не работают между доменами.
Иконки размером 200 КБ. SVG из редактора без чистки содержит метаданные и лишние узлы — иногда в десятки раз больше нужного.
Иконочный шрифт ради трёх иконок. Целый шрифтовой файл ради стрелки и телефона — лишний запрос и лишний вес.

Итог

Для интерфейсных иконок на сайте под 1С-Битрикс оптимален SVG-спрайт: один запрос, масштабирование без потери качества и перекраска обычным CSS через fill: currentColor.

Подключать его можно вставкой в разметку — тогда иконки доступны сразу — или отдельным файлом, который кешируется браузером. При сборке обязательно чистите исходники от атрибутов fill и метаданных редактора, а декоративные иконки помечайте aria-hidden="true".