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, marquez-le aria-hidden="true" ; donnez-lui un role ou une étiquette uniquement lorsque l'icône a un 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 lui-même : une boîte de 1em masquée depuis --pantoken-glyph et remplie avec currentColor.

Jetons consommés ​

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