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

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

Ejemplos

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

Modificadores

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

Pseudoelementos

Pseudoelemento	Descripción
::before	El propio glifo: una caja de 1em enmascarada desde --pantoken-glyph y rellenada con currentColor.

Tokens consumidos

Token	Tipo	Valor
--pantoken-glyph	<url>	url("data:image/svg+xml