圖標和象形圖系統

1）圖標在產品中的作用

圖標是意義和狀態的緊湊載體。它們可加快掃描速度,幫助節省空間並提高模式的可識別性。在產品界面中，圖標補充文本和顏色，而不是替換它們。

1.含義>樣式：每個圖標必須具有清晰的應用腳本。

2.一致性：單網格、筆觸、角度、填充節奏。

3.可用性：圖標不是唯一的信號；總是有簽名/tooltip/aria。

4.性能：單個SVG管道、精靈和顏色/大小令牌。

2）網格和關鍵線

基本藝術品：16 × 16、20 × 20、24 × 24（主要）、32 × 32。
鍵線（keyline）：圓形/正方形,刻有1-2 px縮進,用於光學平衡。
像素間距：在整個坐標上繪制；stroke簡稱0。5 px（通常1。5 px 24 × 24）。

• 對角線「厚」看起來更薄-添加0。25 px到stroke在有問題的地方。
• 尖角的頂點在1 px處向內加熱鍵線，以免發出「響尾蛇」。
• 圓圈和圓點通常需要+1 px的直徑才能達到相等的視覺質量。

點擊區域：互動區域≥ 40 × 40 px（移動），≥ 32 × 32 px（桌面）；圖標居中。

3）招聘風格

• stroke: 1.5 px (24×24), 1.25 px (20×20), 1 px (16×16).
• linecap/linejoin：「round」是為了友好，或「miter」是為了技術風格（固定在天線中）。
• 幾何半徑角：2-3 px （24 × 24）。

填色（filled）-用於密集區域和狀態圖標。
雙音（duotone）-允許用於說明性空狀態,但不允許用於關鍵UI信號。

• Outline-基本狀態。
• Filled-資產/分配。
• Two-tone-裝飾/參考。

4）顏色與對比（WCAG）

基本模式是通過「currentColor」進行的單色：圖標繼承文本/上下文的顏色。

• `icon.error' ↔背景≥ 3：1，帶有文字簽名（不僅僅是顏色）。
• `icon.on-surface '↔背景≥ 3：1；小尺寸瞄準4。5:1.
• 在彩色條紋上,使用「on-」顏色（來自顏色系統的對比度自動子板）。

5）狀態和互動

Default/Hover/Active/Disabled/Focus：差異不僅在於顏色-我們改變不透明/填充/厚度/背景鋸齒,我們添加焦點環。
Badges（計數器）：數字對比度≥ 4.5：1 to plash；數字大小≥ 10-11 px。
Toggle圖標（收藏夾、喜歡）：我們更改填充和/或內部點,而不僅僅是顏色。

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,並帶有選項：沒有多余的「組」、缺省的「fill-rule」、屬性「viewBox」和沒有固定的「width/height」（在CSS中覆蓋）。
• 通過SVGO（項目配置文件）運行：刪除元數據、縮短坐標、合並路徑。
• 拒絕使用圖標字體（icon fonts）-可用性和渲染性問題。

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-width」。
2.Line-SVG （React組件）：樣式和props的靈活性，樹搖擺。
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 （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;
};

• 默認情況下，"size="1em"和'stroke=1。5`.
• 如果"裝飾"-我們添加"aria-hidden="true"。