System ikon i piktogramów

1) Rola ikon w produkcie

Ikony są zwartym nośnikiem znaczenia i stanu. Przyspieszają skanowanie, pomagają zaoszczędzić miejsce i zwiększają rozpoznawalność wzoru. W interfejsach produktu ikona uzupełnia tekst i kolor, zamiast ich zastępować.

1. Znaczenie> styl: każda ikona musi mieć wyraźny scenariusz aplikacji.

2. Konsystencja: pojedyncza siatka, udar, kąty, rytm wypełniania.

3. Dostępność: ikona nie jest jedynym sygnałem; zawsze jest podpis/podpis/aria.

4. Wydajność: jeden rurociąg SVG, sprites i żetony kolor/rozmiar.

2) Siatka i linie kluczowe

Podstawowe tablice artystyczne: 16 × 16, 20 × 20, 24 × 24 (główne), 32 × 32.
Keyline-A okrąg/kwadrat napisane w 1-2 px dla równowagi optycznej.
Boisko pikseli: narysuj na współrzędnych całkowitych; udar jest wielokrotnością 0. 5 px (zwykle 1. 5 px przy 24 × 24).

• Przekątne „grubsze” wyglądają cieńej - dodać 0. 25 px do udaru w miejscach kłopotów.
• Lekko zanurzamy wierzchołki ostrych narożników wewnątrz keyliny o 1 px, aby nie „grzechotać”.
• Koła i kropki często wymagają + 1 px do średnicy dla równej masy wizualnej.

Strefy kliknięcia: strefa interaktywna ≥ 40 × 40 px (mobilna), ≥ 32 × 32 px (pulpit); ikona jest wyśrodkowana.

3) Styl pisania

• udar: 1. 5 px (24 × 24), 1. 25 px (20 × 20), 1 px (16 × 16).
• linecap/linejoin: „okrągły” dla przyjazności lub „miter” dla stylu technicznego (ustalony w wytycznych).
• Kąty promienia w geometrii: 2-3 px (o 24 × 24).

Wypełnione dla gęstych obszarów i ikon statusu.
Duoton jest dozwolony dla ilustracyjnych pustych stanów, ale nie dla krytycznych sygnałów UI.

• Zarys - stan podstawowy.
• Wypełniony - aktywa/alokacje.
• Dwudźwiękowe - dekoracyjne/w pomocy.

4) Kolor i kontrast (WCAG)

Tryb podstawowy jest monochromatyczny za pomocą ' Color': ikona dziedziczy kolor tekstu/kontekstu.

• "ikona. błąd w tle ≥ 3:1, podpisany tekstem (nie tylko kolorem).
• "ikona. na powierzchni tła ≥ 3:1; dla małych rozmiarów celować w 4. 5:1.
• Na kolorach umiera, użyj 'on-' kolory (automatyczny kontrast z systemu kolorów).

5) Państwa i interakcje

Domyślny/Hover/Active/Disabled/Focus: różnica nie tylko w kolorze - zmień zmętnienie/wypełnić/grubość/tło pigułki, dodaj pierścień ostrości.
Odznaki - kontrast cyfr ≥ 4. 5:1 do śmierci; wielkość cyfr ≥ 10-11 px.
Ikony przełączania (ulubione, jak): zmienić wypełnienie i/lub punkt wewnętrzny, nie tylko kolor.

6) Ikona + tekst

Ikony nie zastępują etykiet w kluczowych działaniach. Minimalna para: ikona + krótki tekst (lub podpowiedź przez 'aria-label'). W wykazach i tabelach ikona jest dostosowana do wysokości nasadki tekstu i linii podstawowej.

7) Dostępność (A11y)

Dla ikon dekoracyjnych: 'role =' img 'aria-hidden =' true 'lub usunąć dostępność z strumienia.
Dla semantycznych: '<svg role = „img” aria-labelledby = „id'>' + '<title id =” id'> Opis </title>' lub 'aria-label'.
Ikona nie powinna być jedynym nośnikiem statusu: dodać tekst/podpowiedź/wzór ikonograficzny (forma, udar).
Rozmiar tekstu i kontrast podpisu odpowiadają WCAG (regularne ≥ 4. 5:1).

8) Rurociąg SVG i wydajność

Dlaczego SVG: jasność wektora, stylizacja przez CSS, lekka waga z optymalizacją.

• Przechowywać pliki główne w Figma, eksportować do SVG z opcjami: bez dodatkowej 'grupy', bez 'fill-rule' domyślnie, z atrybutem 'viewBox' i bez stałej 'width/height' (override w CSS).
• Uruchom przez SVGO (profil projektu): usuwanie metadanych, zmniejszanie współrzędnych, łączenie ścieżek.
• Porzucenie czcionek ikon - kwestie dostępności i renderowania.

1. Sprite 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>

tanie powtórzenia, − nie można łatwo zmienić 'szerokość udaru' w niektórych rurociągach.
2. Inline-SVG (React component): elastyczność stylów i rekwizytów, wstrząsanie drzewem.
3. Zewnętrzne '<img>' - wyłącznie dekoracyjne/ilustracyjne.

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

9) Komponent API (przykład reakcji)

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;
};

• Domyślnie 'size =' 1em'i 'stroke = 1. 5`.
• Jeśli 'dekoracyjne', dodać 'aria-ukryte =' true ''.