アイコンとピクトグラムのシステム

1）製品におけるアイコンの役割

アイコンは意味と状態のコンパクトなキャリアです。スキャンを高速化し、スペースを節約し、パターン認識を向上させます。プロダクトインターフェイスでは、アイコンはテキストと色を補完します。

1.意味>スタイル：各アイコンには明確なアプリケーションシナリオが必要です。

2.一貫性：単一の格子、打撃、角度、満ちるリズム。

3.可用性：アイコンは唯一の信号ではありません。署名/ツールチップ/アリアが常にあります。

4.パフォーマンス：1つのSVGパイプライン、スプライト、カラー/サイズトークン。

2）格子および主線

基本的なアートボード：16 × 16、20 × 20、24 × 24（メイン）、32 × 32。
光学バランスのために1-2 pxに刻まれたKeyline-Aの円/正方形。
ピクセルピッチ：整数座標で描画します。ストロークは0の倍数です。5 px（通常1。5 pxで24 × 24）。

• 対角線「厚く」薄く見える-0を追加します。トラブルスポットでストロークする25 px。
• 「ガラガラ」しないように、キーライン内の鋭角の上部をわずかに1 pxで沈めます。
• 円と点は、しばしば、等しい視覚質量のために直径に+1 pxを必要とする。

クリックゾーン：インタラクティブゾーン≥ 40 × 40 px（モバイル）、≥ 32 × 32 px（デスクトップ）；アイコンが中心になっています。

3）タイプセットスタイル

• ストローク：1。5 px （24 × 24）、1。25 px （20 × 20）、1 px （16 × 16）。
• linecap/linejoin：親しみやすさのための「ラウンド」またはテクニカルスタイルの「マイター」（ガイドラインで固定）。
• ジオメトリの半径角度：2-3 px （24 × 24）。

充填-密な領域とステータスアイコンのために。
Duotoneは例外的な空の状態では許可されますが、重要なUI信号では許可されません。

• 概要-基本状態。
• 充填-資産/割り当て。
• ツートーン-装飾/ヘルプ。

4）色および対照（WCAG）

基本モードは'currentColor'経由でモノクロです。アイコンはテキスト/コンテキストの色を継承します。

• 'アイコン。エラー'↔背景≥ 3：1、テキストで署名されています（色だけではありません）。
• 'アイコン。on-surface '↔ background ≥ 3：1；小さいサイズのために4を目指して下さい。5:1.
• カラーダイでは、'on-'色（カラーシステムからの自動コントラスト）を使用します。

5）状態と相互作用

デフォルト/ホバー/アクティブ/無効/フォーカス：違いは色だけではありません-不透明度/塗りつぶし/厚さ/背景ピルを変更し、フォーカスリングを追加します。
バッジ-ディジットコントラスト≥ 4。5：1死にます；ディジットサイズ≥ 10-11 px。
切り替えアイコン（お気に入りなど）：塗りつぶしや内部点を変更します。色だけではありません。

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にエクスポートします。'group'を追加せず、'fill-rule'を指定せず、'viewBox'属性、'width/height' （CSSでは上書き）を指定します。
• SVGO（プロジェクトプロファイル）を実行：メタデータの削除、座標の削減、パスのマージ。
• アイコンフォントの放棄-アクセシビリティとレンダリングの問題。

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.インラインSVG （Reactコンポーネント）：スタイルとプロップの柔軟性、ツリーシェイク。
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`.
• 'decorative'の場合、'aria-hidden=」true」を追加します。