CSS: icon ​

.instui-icon — The icon system: .instui-icon sizing plus the shared -icon-<name> painter that masks a glyph (in currentColor) before any element.

Source: icon.css

Accessibilité ​

Le glyphe est décoratif, donc marquez-le aria-hidden="true"; donnez‑lui un role ou n'ajoutez d'étiquette que lorsque l'icône véhicule du sens par elle‑même.

Utilisation ​

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

Exemples ​

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

Modificateurs ​

ModificateurDescription
.-icon-*Définissez le jeton de glyphe (--pantoken-glyph) et affichez‑le via le peintre partagé (par exemple -icon-search).

Pseudo-éléments ​

Pseudo-élémentDescription
::beforeLe glyphe en lui‑même : une boîte de 1em masquée à partir de --pantoken-glyph et remplie avec currentColor.

Tokens consommés ​

TokenTypeValeur
--pantoken-glyph<url>url("data:image/svg+xml