CSS: icon ​

.instui-icon — Il sistema di icone: il ridimensionamento .instui-icon più il pittore condiviso -icon-<name> che maschera un glifo (in currentColor) prima di qualsiasi elemento.

Source: icon.css

Accessibilità ​

Il glifo è decorativo, quindi contrassegnalo come aria-hidden="true"; assegnagli un role o un'etichetta solo quando l'icona comunica significato da sola.

Uso ​

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

Esempi ​

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

Modificatori ​

ModificatoreDescrizione
.-icon-*Imposta il token del glifo (--pantoken-glyph) e rendilo tramite il pittore condiviso (ad esempio -icon-search).

Pseudo-elementi ​

Pseudo-elementoDescrizione
::beforeIl glifo in sé: una scatola di 1em mascherata da --pantoken-glyph e riempita con currentColor.

Token consumati ​

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