İkonalar və piktogramlar sistemi

1) Məhsulda ikonaların rolu

Nişanlar məna və vəziyyətin kompakt daşıyıcısıdır. Onlar skaneri sürətləndirir, yerdən qənaət etməyə kömək edir və nümunələrin tanınmasını artırır. Məhsul interfeyslərində ikona mətni və rəngi tamamlayır, onları əvəz etmir.

1. Məna> stil: hər ikonanın dəqiq bir tətbiq ssenarisi olmalıdır.

2. Tutarlılıq: vahid şəbəkə, ştrix, bucaqlar, doldurma ritmi.

3. Əlçatanlıq: Simge tək siqnal deyil; həmişə/tooltip/aria imzası var.

4. Performans: bir SVG paypline, sprite və token rəng/ölçüsü.

2) Grid və açar xətləri

Əsas artbordlar: 16 × 16, 20 × 20, 24 × 24 (əsas), 32 × 32.
Əsas xətt (keyline): optik balans üçün 1-2 px girişi ilə yazılan dairə/kvadrat.
Piksel addımı: bütün koordinatlarda çəkin; stroke kraten 0. 5 px (adətən 1. 5 px 24 × 24).

• «Qalın» diaqonalları daha incə görünür - 0 əlavə edin. 25 px problemli yerlərdə stroke.
• Kəskin bucaqların zirvələri «gurultulu» olmamaq üçün 1 px-də bir az keylin içərisinə tökülür.
• Dairələr və nöqtələr tez-tez bərabər vizual kütlə üçün diametrə + 1 px tələb edir.

Klik zonaları: interaktiv zona ≥ 40 × 40 px (mobile), ≥ 32 × 32 px (masaüstü); nişan mərkəzləşdirilmişdir.

3) Dəsti üslubu

• stroke: 1. 5 px (24×24), 1. 25 px (20×20), 1 px (16×16).
• linecap/linejoin: dostluq üçün 'round' və ya texniki üslub üçün 'miter'.
• Həndəsədə radius bucaqları: 2-3 px (24 × 24).

Doldurma (filled) - sıx sahələr və status nişanları üçün.
Duotone - illüstrativ boş hallar üçün icazə verilir, lakin kritik UI siqnalları üçün deyil.

• Outline - əsas dövlət.
• Filled - aktiv/seçmə.
• Two-tone - dekorativ/yardım.

4) Rəng və kontrast (WCAG)

Əsas rejim 'currentColor' vasitəsilə monoxromdur: ikon mətn/kontekstin rəngini miras alır.

• `icon. error '≥ fon 3:1, imza mətni ilə (yalnız rəng).
• `icon. on-surface ', fon ≥ 3:1; kiçik ölçülər üçün hədəf 4. 5:1.
• Rəng lövhələrində 'on-' rənglərdən istifadə edin (rəng sistemindən kontrastın avtomatik seçimi).

5) Vəziyyət və qarşılıqlı əlaqə

Default/Hover/Active/Disabled/Focus: fərq yalnız rəng deyil - qeyri-şəffaflıq/doldurma/qalınlıq/fon-həb dəyişdirin, focus ring əlavə edin.
Badges (sayğaclar): rəqəm kontrastı ≥ 4. 5:1 qıvrım; rəqəm ölçüsü ≥ 10-11 px.
Toggle simvolları (favorit, like): yalnız rəng deyil, doldurma və/və ya daxili nöqtəni dəyişdirin.

6) Simvol + mətn

Nişanlar əsas hərəkətlərdə etiketləri əvəz etmir. Minimum cüt: ikon + qısa mətn (və ya tooltip 'aria-label'). Siyahılar və cədvəllərdə simvol mətnin və baza xəttinin başlığı ilə bərabərləşdirilir.

7) Mövcudluq (A11y)

Dekorativ nişanlar üçün: 'role = "img" aria-hidden = "true' və ya əlçatanlıq axınından çıxarın.
Semantik üçün:' <svg role =» img» aria-labelledby =» id»>' +' <title id = «id «> </title>' və ya 'aria-label 'təsviri.
İkon yeganə status daşıyıcısı olmamalıdır: mətn/ipucu/ikonoqrafik nümunə (forma, ştrix) əlavə edin.
Mətn ölçüsü və imza kontrastı WCAG-a uyğundur (adi ≥ 4. 5:1).

8) SVG-paypline və performans

Niyə SVG: vektor dəqiqliyi, CSS vasitəsilə stilizasiya, optimallaşdırma ilə kiçik çəki.

• Əsas faylları Figma-da saxlayın, SVG-yə seçimlərlə ixrac edin: lazımsız 'group' olmadan, defaule 'fill-rule' olmadan, 'viewBox' atributu ilə və sabit 'width/height' olmadan (CSS-də yenidən təyin).
• SVGO (layihə profili) vasitəsilə qaçış: meta məlumatların silinməsi, koordinatların azaldılması, yolların birləşdirilməsi.
• İkon şriftlərindən imtina (icon fonts) - əlçatanlıq və render problemləri.

1. SVG-sprite:

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>

bəzi paylaynlarda «stroke-width» asanlıqla dəyişdirilə bilməyən ucuz təkrar −.
2. Inline-SVG (React komponenti): stillərin və propların çevikliyi, tree-shaking.
3. External '<img>' - yalnız dekorativ/illüstrativ üçün.

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

9) Komponent API (React nümunəsi)

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

• Default olaraq 'size = "1em' və 'stroke = 1. 5`.
• Əgər 'decorative' - 'aria-hidden =' true 'əlavə edin.