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, клавіатурний focus і мобільну ширину. На сенсорних пристроях 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;
}