SVG-иконки в Elementor через currentColor: единый стиль для всех состояний

Что такое currentColor в SVG

currentColor — это специальное CSS-значение, равное текущему значению свойства color. В обычном тексте оно позволяет использовать цвет текста для рамки, иконки или другого элемента. В SVG этот принцип работает с атрибутами fill и stroke.

Если в контуре иконки указано fill="currentColor", заливка получает цвет из CSS. Если используется stroke="currentColor", по тому же принципу окрашивается обводка.

Например, SVG с фиксированным fill="#2563eb" всегда будет синим, пока не изменить сам файл или не переопределить стиль. SVG с fill="currentColor" может стать оранжевым при наведении, белым на тёмном фоне или получить другой цвет в мобильной версии.

• fill отвечает за заливку фигур.
• stroke отвечает за линии и контуры.
• color задаётся через CSS для элемента или его родительского контейнера.
• currentColor не создаёт новый цвет, а использует уже заданный через color.

<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="..." fill="currentColor"/>
</svg>

Как подготовить SVG-файл к изменению цвета

Перед загрузкой иконки откройте SVG в текстовом редакторе или редакторе векторной графики, который позволяет просматривать код. Найдите фиксированные значения цветов в тегах svg, path, circle, rect, line и других элементах.

Замените конкретные цвета на currentColor. Это могут быть названия цветов, HEX-значения, rgb(), rgba() или hsl(). Если иконка состоит из нескольких контуров одного цвета, проверьте каждый из них, а не только внешний тег svg.

Не нужно заменять fill="none". Это значение означает отсутствие заливки, и его замена на currentColor может изменить внешний вид иконки. Также не изменяйте stroke-width, stroke-linecap и stroke-linejoin: они отвечают не за цвет, а за геометрию и способ отображения линий.

• Замените fill="#000000" или fill="black" на fill="currentColor".
• Замените stroke="#000000" на stroke="currentColor".
• Проверьте inline-стили вроде style="fill:#2563eb" — они также могут фиксировать цвет.
• Убедитесь, что в SVG нет нескольких слоёв с разными цветами, если нужна монохромная иконка.
• После редактирования протестируйте файл отдельно: он должен корректно отображаться и не содержать лишних скриптов или опасного кода.

<!-- Было -->
<path d="..." fill="#2563eb"/>

<!-- Стало -->
<path d="..." fill="currentColor"/>

Как подключить SVG-иконку в Elementor

Чтобы currentColor работал, SVG должен быть частью HTML-документа или использоваться в контексте, где CSS может влиять на его содержимое. На практике подойдёт виджет Icon с собственной SVG-иконкой, если текущая конфигурация Elementor позволяет загрузить и отобразить её как SVG, либо вставка SVG inline через соответствующий HTML-элемент.

Добавьте иконку на страницу, а в разделе Advanced → CSS Classes назначьте внешнему элементу класс, например icon-accent. Если SVG вставляется вручную, убедитесь, что это именно inline-код в разметке, а не ссылка на файл через img.

После этого CSS-класс можно использовать как точку управления цветом. Elementor не изменяет сам SVG-файл, а только передаёт элементу нужное значение color.

• Используйте Icon Widget или inline SVG.
• Добавьте класс виджету или контейнеру, который содержит иконку.
• Проверьте, что в коде SVG есть currentColor.
• Очистите кеш после изменения файла, если браузер продолжает показывать старую версию.

.icon-accent {
  color: #2563eb;
}

.icon-accent:hover {
  color: #f97316;
}

.icon-accent svg {
  width: 24px;
  height: 24px;
}

Настройка обычного, hover- и активного состояния

Классический сценарий — синяя иконка в обычном состоянии и оранжевая при наведении. Поскольку SVG использует currentColor, достаточно изменить color у внешнего элемента. Все контуры, в которых указано currentColor, автоматически изменят оттенок.

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

Если иконка должна соответствовать цвету активного текста, удобно наследовать color вместо дублирования HEX-значений. Например, иконка внутри кнопки может автоматически оставаться белой во всех состояниях кнопки.

• Обычное состояние: .icon-accent { color: #2563eb; }.
• Hover: .icon-accent:hover { color: #f97316; }.
• Фокус с клавиатуры: при необходимости добавьте .icon-accent:focus-visible.
• Активное состояние: используйте класс вроде .is-active или селектор, соответствующий структуре компонента.
• Для тёмной темы изменяйте color в media-запросе или через глобальный класс темы.

.icon-accent {
  color: #2563eb;
  transition: color 180ms ease;
}

.icon-accent:hover,
.icon-accent:focus-visible,
.icon-accent.is-active {
  color: #f97316;
}

@media (max-width: 767px) {
  .icon-accent {
    color: #1d4ed8;
  }
}

Почему SVG через Image Widget не реагирует на currentColor

Когда SVG добавляется как обычное изображение через Image Widget, браузер загружает его как внешний ресурс внутри элемента img. CSS-цвет родительского элемента не проникает внутрь такого SVG-документа, поэтому currentColor не получает ожидаемое значение.

В результате класс может изменить цвет самого img или контейнера, но не заливку контуров внутри файла. Это не ошибка currentColor, а ограничение способа подключения SVG.

Если нужно менять цвет внешнего SVG-файла, можно подготовить отдельные файлы, использовать CSS-маску для простых монохромных форм или подключить иконку inline. Для сценария с несколькими состояниями обычно удобнее всего использовать inline SVG или виджет, который вставляет SVG в DOM.

• img src="icon.svg" — SVG остаётся внешним ресурсом.
• Inline <svg>...</svg> — CSS может влиять на его fill и stroke.
• Не путайте изменение opacity или filter у img с изменением fill внутри SVG.
• Если Elementor очищает или не принимает inline-код, проверьте разрешённый способ добавления SVG в вашей конфигурации.

Типичные ошибки и проверка результата

Чаще всего currentColor не работает из-за того, что в одном из path остался жёстко заданный цвет. Другая распространённая причина — CSS-класс добавлен не тому элементу или стиль Elementor имеет более высокую специфичность.

Проверить проблему можно с помощью инструментов разработчика браузера. Наведите курсор на SVG во вкладке Elements, найдите path и посмотрите, какое фактическое значение fill или stroke применяется. Если там остался HEX-код, файл или стиль нужно исправить.

Отдельно проверьте hover, фокус с клавиатуры и мобильную ширину. На сенсорных устройствах hover не является полноценной заменой активного или focus-состояния, поэтому для важных интерактивных элементов стоит предусмотреть доступное состояние фокуса.

• Фиксированный fill у path переопределяет ожидаемое изменение цвета.
• style="fill:..." внутри SVG может иметь приоритет над простым CSS.
• Для иконок с несколькими цветами currentColor превращает все соответствующие части в один цвет.
• Не используйте цвет как единственный способ передать информацию о состоянии: добавьте текст, форму, подчёркивание или другой заметный сигнал.
• Проверьте контраст иконки на фоне в каждом состоянии.

.icon-accent svg,
.icon-accent svg path {
  /* Используйте этот вариант только если базовый стиль не применяется */
  fill: currentColor;
}

.icon-accent svg path[fill="none"] {
  fill: none;
}