CSS: icon ​

.instui-icon — Ikonsystemet: .instui-icon-storlekar plus den delade -icon-<name>-målaren som maskerar en glyf (i currentColor) innan något element.

Source: icon.css

Tillgänglighet ​

Glyfen är dekorativ, så markera den aria-hidden="true"; ge den en role eller en etikett endast när ikonen förmedlar betydelse på egen hand.

Användning ​

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

Exempel ​

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

Modifierare ​

ModifierareBeskrivning
.-icon-*Ange glyf-token (--pantoken-glyph) och rendera den via den delade målaren (till exempel -icon-search).

Pseudo-element ​

Pseudo-elementBeskrivning
::beforeSjälva glyfen: en 1em-ruta maskad från --pantoken-glyph och fylld med currentColor.

Förbrukade tokens ​

TokenTypVärde
--pantoken-glyph<url>url("data:image/svg+xml