Σύστημα εικονιδίων και εικονογραμμάτων

1) Ο ρόλος των εικονιδίων στο προϊόν

Τα εικονίδια είναι ένας συμπαγής φορέας νοήματος και κατάστασης. Επιταχύνουν τη σάρωση, βοηθούν στην εξοικονόμηση χώρου και αυξάνουν την αναγνώριση μοτίβων. Στις διεπαφές προϊόντων, το εικονίδιο συμπληρώνει το κείμενο και το χρώμα, αντί να τις αντικαθιστά.

1. Σημαίνει> στυλ: κάθε εικονίδιο πρέπει να έχει ένα σαφές σενάριο εφαρμογής.

2. Συνέπεια: μονό πλέγμα, διαδρομή, γωνίες, ρυθμός πλήρωσης.

3. Διαθεσιμότητα: το εικονίδιο δεν είναι το μόνο σήμα. υπάρχει πάντα υπογραφή/εργαλειοθήκη/άρια.

4. Απόδοση: ένας αγωγός SVG, sprites και μάρκες χρώματος/μεγέθους.

2) Πλέγμα και βασικές γραμμές

Βασικές πίνακες: 16 × 16, 20 × 20, 24 × 24 (κύρια), 32 × 32.
Keyline-A κύκλος/τετράγωνο χαραγμένο σε 1-2 px για οπτική ισορροπία.
Pixel pitch: σχεδίαση ακέραιων συντεταγμένων. Το εγκεφαλικό επεισόδιο είναι πολλαπλάσιο του 0. 5 px (συνήθως 1. 5 px 24 × 24).

• Διαγώνια «παχύτερα» φαίνονται λεπτότερα - προσθέστε 0. 25 px έως εγκεφαλικό επεισόδιο σε σημεία προβλημάτων.
• Βυθίζουμε ελαφρώς τις κορυφές των αιχμηρών γωνιών μέσα στο πλήκτρο κατά 1 px ώστε να μην «κουδουνίζουμε».
• Οι κύκλοι και οι τελείες συχνά απαιτούν + 1 px σε διάμετρο για ίση οπτική μάζα.

Ζώνες κλικ: διαδραστική ζώνη ≥ 40 × 40 px (κινητό), ≥ 32 × 32 px (επιτραπέζιος υπολογιστής). το εικονίδιο είναι επικεντρωμένο.

3) Στυλ δακτυλογράφησης

• εγκεφαλικό επεισόδιο: 1. 5 px (24 × 24), 1. 25 px (20 × 20), 1 px (16 × 16).
• linecap/linejoin: 'roun για φιλικότητα ή' miter 'για τεχνικό στυλ (που καθορίζεται στην κατευθυντήρια γραμμή).
• Γωνίες ακτίνας στη γεωμετρία: 2-3 px (επί 24 × 24).

Για πυκνές περιοχές και εικονίδια κατάστασης.
Η δουοτόνη επιτρέπεται για ενδεικτικές κενές καταστάσεις, αλλά όχι για κρίσιμα σήματα UI.

• Περίγραμμα - βασική κατάσταση.
• Καταβληθέν - περιουσιακό στοιχείο/κατανομή.
• Δύο τόνοι - διακοσμητικό/σε βοήθεια.

4) Χρώμα και αντίθεση (WCAG)

Η βασική λειτουργία είναι μονόχρωμη μέσω 'currentColor': το εικονίδιο κληρονομεί το χρώμα του κειμένου/πλαισίου.

• "εικονίδιο. σφάλμα '↔ φόντο ≥ 3:1, υπογεγραμμένο με κείμενο (όχι μόνο χρώμα).
• "εικονίδιο. επί επιφανείας "↔ φόντου ≥ 3:1· για τα μικρά μεγέθη στοχεύουν στο 4. 5:1.
• Στο χρώμα πεθαίνει, χρησιμοποιήστε 'on-' χρώματα (αυτόματη αντίθεση από το σύστημα χρωμάτων).

5) Καταστάσεις και αλληλεπιδράσεις

Προκαθορισμένο/Hover/Ενεργό/Απενεργοποιημένο/Εστίαση: η διαφορά δεν είναι μόνο στο χρώμα - αλλαγή της αδιαφάνειας/πλήρωσης/πάχους/φόντου χάπι, προσθήκη δακτυλίου εστίασης.
Σήματα - Αντίθεση ψηφίου ≥ 4. 5:1 για το θάνατο? μέγεθος ψηφίου ≥ 10-11 px.
Εναλλαγή εικονιδίων (αγαπημένα, όπως): αλλαγή της πλήρωσης ή/και του εσωτερικού σημείου, όχι μόνο του χρώματος.

6) Εικονίδιο + κείμενο

Τα εικονίδια δεν αντικαθιστούν τις ετικέτες σε βασικές δράσεις. Ελάχιστο ζεύγος: εικονίδιο + σύντομο κείμενο (ή εργαλειοθήκη «aria-label»). Σε καταλόγους και πίνακες, το εικονίδιο ευθυγραμμίζεται με το ύψος κάλυψης του κειμένου και τη γραμμή βάσης.

7) Διαθεσιμότητα (A11y)

Για διακοσμητικά εικονίδια: 'role =' img 'aria-hidden =' true '' ή αφαίρεση της προσβασιμότητας από το ρεύμα.
Για σημασιολογικούς σκοπούς:' <svg role =» img» aria-labelledby =» id «>' +' <title id = «id «> Περιγραφή </title> 'ή 'aria-label '.
Το εικονίδιο δεν πρέπει να είναι ο μόνος φορέας της κατάστασης: προσθήκη κειμένου/υπόδειξης/εικονογραφικού μοτίβου (μορφή, διαδρομή).
Το μέγεθος κειμένου και η αντίθεση υπογραφής αντιστοιχούν σε WCAG (κανονική ≥ 4. 5:1).

8) Αγωγός SVG και επιδόσεις

Γιατί SVG: διάνυσμα, στυλ μέσω CSS, ελαφρύ βάρος με βελτιστοποίηση.

• Αποθήκευση αρχείων στο Figma, εξαγωγή σε SVG με επιλογές: χωρίς επιπλέον 'ομάδα', χωρίς 'κανόνα πλήρωσης' εξ ορισμού, με το χαρακτηριστικό 'viewBox' και χωρίς σταθερό 'πλάτος/ύψος' (παράκαμψη σε CSS).
• Εκτέλεση μέσω SVGO (προφίλ έργου): διαγραφή μεταδεδομένων, μείωση συντεταγμένων, συγχώνευση διαδρομών.
• Εγκατάλειψη γραμματοσειρών εικόνων - προσβασιμότητα και απόδοση.

1. Σπρίτης SVG:

html
<svg style="display:none">
<symbol id="icon-upload" viewBox="0 0 24 24">…</symbol>
</svg>
…
<svg class="i"><use href="#icon-upload"></use></svg>

φθηνές επαναλήψεις, − δεν μπορείτε εύκολα να αλλάξετε το πλάτος «stroke» σε ορισμένους αγωγούς.
2. Inline-SVG (Αντιδραστικό συστατικό): ευελιξία στυλ και στηρίγματα, ανακίνηση δένδρων.
3. Εξωτερικά «<img>» - μόνο διακοσμητικά/ενδεικτικά.

css
.i { width: 1em; height: 1em; color: var(--icon-color, currentColor); }
.i--muted { opacity:.64; }
.i--danger { color: var(--role-danger); }

9) Συνιστώσα API (Παράδειγμα αντίδρασης)

tsx type IconProps = {
name: 'upload'      'download'      'wallet'      'trophy'      'shield'      string;
size?: number      '1em'      'sm'      'md'      'lg';
stroke?: number;       // 1      1. 25      1. 5 title?: string;        // для a11y decorative?: boolean;     // если true -> aria-hidden className?: string;
};

• Εξ ορισμού, 'size =' 1e 'και' stroke = 1. 5`.
• Εάν είναι' διακοσμητικό', προσθέστε 'aria-κρυμμένο =» αληθινό»'.