CSS: icon ​

.instui-icon — system ikon: skalowanie .instui-icon oraz wspólny painter -icon-<name>, który maskuje glif (w currentColor) przed dowolnym elementem.

Source: icon.css

Dostępność ​

Glif jest dekoracyjny, więc oznacz go jako aria-hidden="true"; nadaj mu role lub etykietę tylko wtedy, gdy ikona sama w sobie niesie znaczenie.

Użycie ​

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

Przykłady ​

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

Modyfikatory ​

ModyfikatorOpis
.-icon-*Ustaw token glifu (--pantoken-glyph) i renderuj go za pomocą wspólnego paintera (na przykład -icon-search).

Pseudo-elementy ​

Pseudo-elementOpis
::beforeSam glif: pole 1em wycięte z --pantoken-glyph i wypełnione currentColor.

Zużyte tokeny ​

TokenTypWartość
--pantoken-glyph<url>url("data:image/svg+xml