Icon- und Piktogrammsystem

1) Die Rolle der Symbole im Produkt

Icons sind ein kompakter Träger von Bedeutung und Zustand. Sie beschleunigen das Scannen, helfen Platz zu sparen und erhöhen die Erkennbarkeit von Mustern. In den Produktschnittstellen ergänzt das Icon Text und Farbe, anstatt sie zu ersetzen.

1. Bedeutung> Stil: Jedes Symbol sollte ein klares Anwendungsszenario haben.

2. Konsistenz: Einzelnetz, Strich, Winkel, Füllrhythmus.

3. Verfügbarkeit: Das Symbol ist nicht das einzige Signal; Es gibt immer die Signatur/tooltip/aria.

4. Leistung: eine SVG-Pipeline, Sprites und Farbe/Größe Token.

2) Gitter und Schlüssellinien

Basis-Artboards: 16 × 16, 20 × 20, 24 × 24 (Haupt), 32 × 32.
Schlüssellinie: Kreis/Quadrat mit 1-2 px Einzug für optische Balance.
Pixelabstand: Zeichnen Sie auf ganze Koordinaten; stroke ist ein Vielfaches von 0. 5 px (normalerweise 1. 5 px auf 24 × 24).

• Die Diagonalen „dicker“ sehen dünner aus - fügen Sie 0 hinzu. 25 px zum Strich an den Problemstellen.
• Die Spitzen der scharfen Ecken werden leicht in die Keyline für 1 px getaucht, damit sie nicht „klappern“.
• Kreise und Punkte benötigen oft + 1 px zum Durchmesser für eine gleiche visuelle Masse.

Klickzonen: interaktive Zone ≥ 40 × 40 px (mobil), ≥ 32 × 32 px (Desktop); Symbol ist zentriert.

3) Set-Stil

• stroke: 1. 5 px (24×24), 1. 25 px (20×20), 1 px (16×16).
• linecap/linejoin: 'rund' für Freundlichkeit oder 'miter' für technischen Stil (wir fixieren in der Haydline).
• Die Winkel des Radius in der Geometrie: 2-3 px (auf 24 × 24).

Füllung (filled) - Für dichte Bereiche und Statussymbole.
Zwei-Ton (Duotone) - erlaubt für illustrative Leerzustände, aber nicht für kritische UI-Signale.

• Outline ist der Basiszustand.
• Filled - Asset/Zuweisung.
• Zwei-Ton - dekorativ/in der Hilfe.

4) Farbe und Kontrast (WCAG)

Der Basismodus ist monochrom über 'currentColor': das Icon erbt die Farbe des Textes/Kontextes.

• `icon. error '↔ Hintergrund ≥ 3:1, signiert mit Text (nicht nur Farbe).
• `icon. on-surface' ↔ Hintergrund ≥ 3:1; für kleine Größen zielen auf 4. 5:1.
• Verwenden Sie bei farbigen Stempeln 'on-' Farben (automatische Kontrastanpassung aus dem Farbsystem).

5) Zustände und Interaktionen

Default/Hover/Active/Disabled/Focus: Der Unterschied liegt nicht nur in der Farbe - wir ändern die Deckkraft/Füllung/Dicke/Hintergrund-Pille, wir fügen den Focus-Ring hinzu.
Badges (Zähler): Kontrast der Zahlen ≥ 4. 5:1 zur Platte; Die Größe der Zahl ≥ 10-11 px.
Toggle-Icons (Favoriten, Like): Ändern Sie die Füllung und/oder den inneren Punkt, nicht nur die Farbe.

6) Icon + Text

Icons ersetzen keine Labels in wichtigen Aktionen. Minimalpaar: Icon + kurzer Text (oder Tooltip durch 'aria-label'). In Listen und Tabellen wird das Symbol an der Kaphöhe des Textes und der Grundlinie ausgerichtet.

7) Verfügbarkeit (A11y)

Für dekorative Symbole: 'role =' img 'aria-hidden =' true' oder aus dem Verfügbarkeitsstrom entfernen.
Für semantische:'<svg role =“ img“ aria-labelledby =“ id“>'+'<title id = „id „> Beschreibung </title>' oder' aria-label'.
Das Icon sollte nicht der einzige Statusträger sein: Text/Hinweis/ikonographisches Muster (Form, Strich) hinzufügen.
Die Textgröße und der Kontrast der Signatur entsprechen WCAG (normal ≥ 4. 5:1).

8) SVG-Pipeline und Leistung

Warum SVG: Vektorschärfe, Styling über CSS, geringes Gewicht mit Optimierung.

• Master-Dateien in Figma speichern, in SVG exportieren mit den Optionen: keine extra 'group', keine' fill-rule' Standard, mit dem Attribut 'viewBox' und keine festen 'width/height' (überschreiben in CSS).
• Durchlauf durch SVGO (Projektprofil): Metadaten löschen, Koordinaten reduzieren, Pfade zusammenführen.
• Ablehnung von ikonischen Schriften (Icon Fonts) - Probleme mit Zugänglichkeit und Rendering.

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>

billige Wiederholungen, − können nicht einfach geändert werden 'stroke-width' in einigen Pipelines.
2. Inline-SVG (React-Komponente): Flexibilität von Stilen und Props, Tree-Shaking.
3. External'<img>'- nur für dekorative/illustrative Zwecke.

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

9) Komponenten-API (Beispiel React)

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

• Die Standardeinstellung ist 'size =' 1em''und' stroke = 1. 5`.
• Wenn 'dekorativ' - fügen Sie' aria-hidden = 'true' hinzu.