CSS: icon ​

.instui-icon — Das Icon‑System: .instui-icon‑Größen plus der gemeinsame -icon-<name> Painter, der eine Glyphe (in currentColor) maskiert, bevor ein Element gerendert wird.

Source: icon.css

Barrierefreiheit ​

Die Glyphe ist dekorativ, markiere sie daher als aria-hidden="true"; gib ihr nur dann ein role oder ein Label, wenn das Icon für sich allein Bedeutung vermittelt.

Verwendung ​

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

Beispiele ​

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

Modifikatoren ​

ModifikatorBeschreibung
.-icon-*Setze das Glyphe‑Token (--pantoken-glyph) und rendere es über den gemeinsamen Painter (zum Beispiel -icon-search).

Pseudo-Elemente ​

Pseudo-ElementBeschreibung
::beforeDie Glyphe selbst: eine 1em‑Box, aus --pantoken-glyph maskiert und mit currentColor gefüllt.

Verbrauchte Tokens ​

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