kaze風
Icon
アイコン
プレビュー
xs (12px)
sm (14px)
md (16px)
lg (20px)
xl (24px)
使いどころ
使う場面
- lucide-react などのアイコンを、Kaze のサイズ（xs 12、sm 14、md 16、lg 20、xl 24 px）に揃えて置く
- 文字に添える装飾のアイコンは label を付けない。隣の文字が意味を伝えるので、読み上げからは外れる
- アイコンだけで意味を伝える場面（状態を示す印など）は label を付ける。role="img" と aria-label として出力される
使わない場面
- アイコンだけのボタン。Button の iconOnly と aria-label を使う
- 文字で十分に伝わる意味をアイコンに任せること。アイコンは補助で、重要な操作や状態には文字を添える
- Kaze の内部で使う線画（検索の虫眼鏡など）を差し替える用途。コンポーネントが自前で持っている
使い方
import { Search, Settings } from "lucide-react";
import { Icon } from "kaze-design-system";
<Icon icon={Search} size="md" />
<Icon icon={Settings} size="lg" label="設定" />プロパティ
| 名前 | 型 | デフォルト | 説明 |
|---|---|---|---|
icon必須 | ComponentType<{ size?: number | string; strokeWidth?: number | string; }> | なし | lucide-react のアイコンコンポーネント |
size | Size | "md" | アイコンのサイズ（xs=12, sm=14, md=16, lg=20, xl=24） |
label | string | なし | アクセシブルラベル（省略時は装飾アイコンとして aria-hidden） |
型と必須かどうかはソースの型定義から自動で生成しています。表にない HTML 標準の属性（className や aria-* など）も、ルート要素にそのまま渡せます。
アクセシビリティ
- label なしは aria-hidden で隠れ、ありは role="img" と aria-label で読み上げられる
- 同じ意味の文字が隣にあるのに label も付けると二重に読まれる。どちらか一方にする
- 色だけで状態を伝えない。アイコンの形と label か隣の文字でも伝える
文言
- label は「エラー」「完了」のように、アイコンが示す意味を短く書く。「赤い丸」「チェックのアイコン」のように見た目は書かない