CSS: icon

.instui-icon — O sistema de ícones: dimensionamento .instui-icon mais o pintor compartilhado -icon-<name> que mascara um glifo (em currentColor) antes de qualquer elemento.

Source: icon.css

Acessibilidade

O glifo é decorativo, então marque-o como aria-hidden="true"; dê-lhe um role ou um rótulo somente quando o ícone transmitir significado por si só.

Uso

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

Modificadores

Modificador	Descrição
.-icon-*	Defina o token do glifo (--pantoken-glyph) e renderize-o através do pintor compartilhado (por exemplo -icon-search).

Pseudo-elementos

Pseudo-elemento	Descrição
::before	O próprio glifo: uma caixa de 1em mascarada de --pantoken-glyph e preenchida com currentColor.

Tokens consumidos

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