アイコンIcon
Experimental

アイコンの大きさ、線幅、支援技術への伝え方を GunjoUI 全体で揃えるプリミティブです。

状態とバリエーション

同じアイコンでも、用途に合わせて xs から xl までのサイズに揃えられます。

アイコンだけで意味を伝える場合は、装飾扱いにせず、支援技術向けの名前を渡します。色は用途側の状態色として指定します。

アコーディオンなどの開閉表示では、コンポーネント側が Icon を使ってサイズと線幅を揃えます。

表は横にスクロールできます

プロパティ	型	初期値	説明
icon	IconGlyph	-	表示するアイコンコンポーネントです。
size	"xs" \| "sm" \| "md" \| "lg" \| "xl"	"sm"	アイコンの大きさを GunjoUI の共通サイズに揃えます。
label	string	-	意味を持つアイコンを支援技術へ伝える名前です。
decorative	boolean	true	装飾としてだけ使うアイコンを支援技術から隠すかどうかを指定します。
strokeWidth	number	2	アイコンの線幅を指定します。
className	string	-	色や余白など、利用側の文脈で必要なスタイルを渡します。Icon 自体は色を決めません。

Icon は見た目の大きさ、線幅、支援技術への伝え方を揃えるためのプリミティブです。色、クリック、ホバー、無効化、開閉状態は、Icon を使う Button、TooltipButton、Accordion などのコンポーネント側で扱います。