CSS: icon ​

.instui-icon — Het pictogramsysteem: .instui-icon-grootten plus de gedeelde -icon-<name>-painter die een glyf (in currentColor) masqueert vóór elk element.

Source: icon.css

Toegankelijkheid ​

De glyf is decoratief, dus markeer deze als aria-hidden="true"; geef deze een role of label alleen wanneer het pictogram op zichzelf betekenis heeft.

Gebruik ​

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

Voorbeelden ​

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

Modifiers ​

ModifierBeschrijving
.-icon-*Stel de glyf-token in (--pantoken-glyph) en render deze via de gedeelde painter (bijvoorbeeld -icon-search).

Pseudo-elementen ​

Pseudo-elementBeschrijving
::beforeDe glyf zelf: een 1em-box gemaskeerd van --pantoken-glyph en gevuld met currentColor.

Gebruikte tokens ​

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