CSS: icon ​

.instui-icon — Система иконок: масштабирование .instui-icon плюс общий рисовальщик -icon-<name>, который маскирует глиф (в currentColor) перед любым элементом.

Source: icon.css

Доступность ​

Глиф декоративный, поэтому пометьте его как aria-hidden="true"; назначайте role или подпись только когда иконка сама по себе передаёт значение.

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

css
@import "@pantoken/components/components.css";

Примеры ​

html
<span class="instui-icon -icon-megaphone" aria-hidden="true"></span>

Модификаторы ​

МодификаторОписание
.-icon-*Установите токен глифа (--pantoken-glyph) и отрисуйте его через общий рисовальщик (например, -icon-search).

Псевдоэлементы ​

ПсевдоэлементОписание
::beforeСам глиф: блок размером 1em, замаскированный из --pantoken-glyph и заполненный currentColor.

Использованные токены ​

TokenТипЗначение
--pantoken-glyph<url>url("data:image/svg+xml