Система иконок

XPopup использует встроенную систему иконок на основе CSS mask-image. Все иконки не зависят от внешних шрифтов, автоматически наследуют цвет через CSS-переменные и выглядят единообразно во всех скинах.

Встроенные иконки

Четыре базовые иконки, которые используются в интерфейсе XPopup. Каждая иконка имеет CSS-класс .b-xpopup-ico_{имя}.

Иконка	CSS-класс	Назначение
	`.b-xpopup-ico_close`	Крестик закрытия окна
	`.b-xpopup-ico_back`	Стрелка «Назад»
	`.b-xpopup-ico_actions`	Три точки — меню действий
	`.b-xpopup-ico_question`	Знак вопроса — подсказка

Как это работает: иконки используют CSS-свойство mask-image с встроенным SVG. Цвет задаётся через background-color: currentColor, поэтому иконка всегда имеет цвет текста родительского элемента.

CSS-переменные для управления цветом

Каждый скин определяет набор CSS-переменных, которые управляют цветом иконок. Вы можете переопределить эти переменные в своём CSS для кастомизации.

CSS-переменная	Назначение
`--xpopup__ico_close_color`	Цвет крестика закрытия (внутри окна)
`--xpopup__ico_close_color_outside`	Цвет крестика закрытия (снаружи окна)
`--xpopup__ico_back_color`	Цвет стрелки «Назад»
`--xpopup__ico_actions_color`	Цвет иконки меню действий
`--xpopup__ico_question_color`	Цвет иконки подсказки

Цвет иконок в разных скинах

Нажмите на кнопки ниже, чтобы увидеть, как иконки выглядят в разных скинах. Обратите внимание на цвет крестика, стрелки «Назад» и иконки меню действий.

Default скин #

В default-скине иконки тёмные (#000), под цвет текста шапки.

VK скин #

В VK-скине иконки белые (#fff), под цвет текста на синей шапке.

Strong скин #

В Strong-скине иконки чёрные (#000), строгий стиль.

Lite скин #

В Lite-скине иконки белые (#fff) — для тёмного фона изображений.

Использование иконок в headerActions

Для добавления иконок в меню действий используйте поле iconClass с полным CSS-классом иконки. Можно использовать как встроенные иконки XPopup, так и любые другие (например, Font Awesome).

Создание собственных иконок

Вы можете создать свои иконки, используя тот же подход с mask-image. Достаточно определить CSS-класс с SVG-маской и переменной цвета.