CSS: icon

.instui-icon — Το σύστημα εικονιδίων: μέγεθος .instui-icon μαζί με τον κοινό ζωγράφο -icon-<name> που εφαρμόζει μάσκα σε ένα glyph (στο currentColor) πριν από οποιοδήποτε στοιχείο.

Source: icon.css

Προσβασιμότητα

Το glyph είναι διακοσμητικό, οπότε επισημάνετέ το ως aria-hidden="true"; δώστε του role ή ετικέτα μόνο όταν το εικονίδιο μεταφέρει νόημα από μόνο του.

Χρήση

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

Παραδείγματα

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

Τροποποιητές

Τροποποιητής	Περιγραφή
.-icon-*	Ορίστε το token του glyph (--pantoken-glyph) και αποδώστε το μέσω του κοινόχρηστου ζωγράφου (για παράδειγμα -icon-search).

Ψευδοστοιχεία

Ψευδοστοιχείο	Περιγραφή
::before	Το ίδιο το glyph: ένα πλαίσιο 1em που γίνεται μάσκα από --pantoken-glyph και γεμίζεται με currentColor.

Καταναλωμένα tokens

Token	Τύπος	Τιμή
--pantoken-glyph	<url>	url("data:image/svg+xml