CSS: icon ​

.instui-icon — El sistema de iconos: el dimensionado .instui-icon más el pintor compartido -icon-<name> que enmascara un glifo (en currentColor) antes de cualquier elemento.

Source: icon.css

Accesibilidad ​

El glifo es decorativo, así que márcalo aria-hidden="true"; asígnale un role o una etiqueta solo cuando el icono transmita significado por sí mismo.

Uso ​

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

Modificadores ​

ModificadorDescripción
.-icon-*Establece el token de glifo (--pantoken-glyph) y represéntalo mediante el pintor compartido (por ejemplo -icon-search).

Pseudoelementos ​

PseudoelementoDescripción
::beforeEl propio glifo: una caja de 1em enmascarada desde --pantoken-glyph y rellenada con currentColor.

Tokens consumidos ​

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