CSS: icon ​

.instui-icon — El sistema d'icones: l'escalat .instui-icon més el pintor compartit -icon-<name> que enmascara un glif (a currentColor) abans de qualsevol element.

Source: icon.css

Accessibilitat ​

El glif és decoratiu, així que marqueu-lo aria-hidden="true"; doneu-li un role o una etiqueta només quan la icona transmeti significat per si mateixa.

Ús ​

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

Exemples ​

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

Modificadors ​

ModificadorDescripció
.-icon-*Definiu el token del glif (--pantoken-glyph) i representeu-lo mitjançant el pintor compartit (per exemple -icon-search).

Pseudoelements ​

PseudoelementDescripció
::beforeEl glif en si: una caixa d'1em enmascarada a partir de --pantoken-glyph i omplerta amb currentColor.

Tokens consumits ​

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