CSS: icon ​

.instui-icon — Kuvakkeiden järjestelmä: .instui-icon-koon määritys sekä yhteinen -icon-<name>-maalaaja, joka maskaa glyfin (kohteessa currentColor) ennen mitä tahansa elementtiä.

Source: icon.css

Saavutettavuus ​

Glyfi on koristeellinen, merkitse se aria-hidden="true"; anna sille role tai etiketti vain, kun kuvake itsessään välittää merkityksen.

Käyttö ​

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

Esimerkit ​

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

Muokkaajat ​

MuokkaajaKuvaus
.-icon-*Aseta glyfin token (--pantoken-glyph) ja renderöi se yhteisen maalaajan kautta (esimerkiksi -icon-search).

Pseudo-elementit ​

Pseudo-elementtiKuvaus
::beforeGlyfi itsessään: 1em-kokoinen laatikko, maskattu --pantoken-glyph:sta ja täytetty currentColor:llä.

Käytetyt tokenit ​

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