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"; forneça um role ou rótulo somente quando o ícone transmitir significado por si só.

Uso ​

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

Exemplos ​

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

Modificadores ​

ModificadorDescrição
.-icon-*Defina o token do glifo (--pantoken-glyph) e renderize-o usando o pintor compartilhado (por exemplo -icon-search).

Pseudo-elementos ​

Pseudo-elementoDescrição
::beforeO próprio glifo: uma caixa de 1em mascarada a partir de --pantoken-glyph e preenchida com currentColor.

Tokens consumidos ​

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