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