Ikonkalar va piktogrammalar tizimi

1) Ikonkalarning mahsulotdagi roli

Ikonkalar - ma’no va holatning ixcham tashuvchisi. Ular skanerlashni tezlashtiradi, joyni tejashga yordam beradi va patternlarning tan olinishini oshiradi. Mahsulot interfeyslarida piktogramma matn va rangni to’ldiradi, ularni almashtirmaydi.

1. Ma’no> uslub: har bir piktogramma aniq qo’llash stsenariysiga ega bo’lishi kerak.

2. Konsistentlik: yagona setka, shtrix, burchaklar, to’ldirish ritmi.

3. Foydalanish imkoniyati: piktogramma yagona signal emas; har doim/tooltip/aria imzosi mavjud.

4. Unumdorligi: bitta SVG-payplayn, sprayt va rang/oʻlcham tokenlari.

2) To’r va asosiy chiziqlar

Bazaviy artbordlar: 16 × 16, 20 × 20, 24 × 24 (asosiy), 32 × 32.
Asosiy chiziq (keyline): optik balans uchun 1-2 px chegara bilan yozilgan doira/kvadrat.
Piksel qadami: butun koordinatalarga chizing; stroke kraten 0. 5 px (odatda 1. 5 px 24 × 24).

• «Qalin» diagonallari nozik koʻrinadi - 0 qoʻshing. 25 px to stroke muammoli joylarda.
• O’tkir burchaklarning cho’qqilari «momaqaldiroq» bo’lmasligi uchun keylinni 1 px ga biroz isitadi.
• Doiralar va nuqtalar ko’pincha + 1 px ni talab qiladi.

Bosish zonalari: interaktiv zona ≥ 40 × 40 px (mobile), ≥ 32 × 32 px (desktop); belgi markazlashtirilgan.

3) To’plam uslubi

• stroke: 1. 5 px (24×24), 1. 25 px (20×20), 1 px (16×16).
• linecap/linejoin:’round’do’stlik uchun yoki’miter’texnik uslub uchun (biz gidlaynda qayd etamiz).
• Geometriyadagi radius burchaklari: 2-3 px (24 × 24).

Toʻldirish (filled) - zich maydonlar va maqom nishonchalari uchun.
Dvoton (duotone) - illyustrativ bo’sh holatlar uchun ruxsat etiladi, ammo tanqidiy UI signallari uchun emas.

• Outline - asosiy holat.
• Filled - aktiv/tanlangan.
• Two-tone - dekorativ/ma’lumotnomada.

4) Rang va kontrast (WCAG)

’currentColor’ orqali asosiy modda - monoxrom: ikonka matn/kontekst rangini meros qilib oladi.

• `icon. error’, fon ≥ 3:1, imzo bilan matn (nafaqat rang).
• `icon. on-surface’, fon ≥ 3:1; kichik o’lchamdagi 4 ta nishonga olish. 5:1.
• Rangli ploshkalarda’on-’ranglardan foydalaning.

5) Holatlar va o’zaro hamkorlik

Default/Hover/Active/Disabled/Focus: farq faqat rangda emas, balki shaffoflikni/quyilishni/qalinlikni/fon-tabletkani o’zgartiramiz, focus ring qo’shamiz.
Badges (hisoblagichlar): raqam kontrasti ≥ 4. 5:1 ploshkaga; raqam o’lchami ≥ 10-11 px.
Toggle-ikonkalar (tanlangan, layk): faqat rangni emas, balki toʻldirish va/yoki ichki nuqtani oʻzgartiramiz.

6) Ikona + matn

Nishonchalar asosiy harakatlarda yorliqlarni almashtirmaydi. Minimal juft: ikona + qisqa matn (yoki tooltip’aria-label’). Roʻyxatlar va jadvallarda ikonka matn va baza chizigʻining bosh balandligi boʻyicha tekislanadi.

7) Foydalanish imkoniyati (A11y)

Dekorativ ikonkalar uchun:’role = «img’aria-hidden =» true’yoki kirish oqimidan olib tashlash.
Semantik uchun:’<svg role =» img» aria-labelledby =» id»>’+’<title id = «id «> Tavsifi </title>’yoki’aria-label’.
Ikonka maqomning yagona tashuvchisi bo’lmasligi kerak: matn/maslahat/ikonografik pattern (shakl, shtrix) qo’shing.
Matn oʻlchami va imzoning kontrasti WCAG (oddiy ≥ 4 ga mos keladi. 5:1).

8) SVG-payplayn va unumdorlik

Nima uchun SVG: vektor aniqligi, CSS orqali stilizatsiya, optimallashtirish bilan kichik vazn.

• Fayllarni Figma, SVGga ortiqcha’group’,’fill-rule’,’viewBox’atributlari va’width/height’(CSSga qayta belgilash) bilan saqlash.
• SVGO (loyiha profili) orqali oʻtish: meta maʼlumotlarni olib tashlash, koordinatalarni qisqartirish, yoʻllarni birlashtirish.
• Ikona shriftlaridan voz kechish (icon fonts) - kirish va render bilan bog’liq muammolar.

1. SVG-sprayt:

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>

arzon takrorlash, − ba’zi payplaynlarda «stroke-width» ni osonlikcha almashtirish mumkin emas.
2. Inline-SVG (React komponenti): uslublar va propslarning moslashuvchanligi, tree-shaking.
3. External’<img>’- faqat dekorativ/illyustrativ uchun.

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 misoli)

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

• Andoza’size = "1em’va’stroke = 1. 5`.
• Agar’decorative’bo’lsa,’aria-hidden =’true’qo’shamiz.