Icon
fandhe-frontend-wireframe-ui のアイコン単体プレースホルダーです。SVG ラインアートアイコン基盤(icon モジュール、イシュー #2606)が提供するグリフを 1 つだけ、装飾用途として表示する非インタラクティブな部品です。API は icon(glyph, size) の 2 引数(詳細は下の引数表を参照)で、props 構造体は導入していません。
視覚的な参照元は blocks.pm の Icon 部品(Figma プロパティ: Size, Icon(swap))ですが、ライセンス上の理由によりスクリーンショットは掲載していません(詳細は docs/design/wireframe-ui-architecture.md §2)。参照したい場合は外部リンク先を直接確認してください。
本部品は表示専用のプレースホルダーです。ラベル付き・対話可能なアイコンが必要な場合は Icon(Themes) を検討してください。
Demo
既定(search、Md)
サイズ比較(Xs〜Xl、同一グリフ)
全アイコン一覧(icon::ALL、Md、宣言順)
引数表
| 引数 | 型 | 既定値 | 説明 |
|---|---|---|---|
| glyph | fn(Size) -> Node | - | 表示するアイコンのコンストラクタ。icon::ALL の要素や icon::search 等の個別関数をそのまま渡す。 |
| size | Size | - | サイズ段階(xs〜xl)。glyph へそのまま渡され、部品ルートにも付与される。 |
原案差分メモ
- API は独自設計: blocks.pm の Figma プロパティ(Size・Icon の instance swap)をそのまま Rust 引数へ変換したものではありません。
docs/design/wireframe-ui-architecture.md§2・§7(blocks.pm の外観・anatomy・プロパティ構成を閲覧・転記して構造的に一致させない)に従い、API は §11 の SVG アイコン基盤の規約から独自設計しました。 - instance swap は
Nodeではなくfn(Size) -> Node: 通常のOption<Node>アイコンスロット規約(§11.4)は「本文の横にアイコンを置くホスト部品」向けであり、差し替え対象は任意のNodeです。対してicon部品にとっての差し替え対象は「どのグリフか」であるため、icon::IconEntryの要素型と同じfn(Size) -> Node(関数ポインタ)をglyph引数として受け取ります。icon(glyph: Node, size)形式でicon(icon::search(Size::Sm), Size::Lg)のようにサイズを 2 か所で指定できてしまうと黙ってSmのまま描画される誤用を招くため、部品側がglyph(size)を 1 回だけ呼ぶ設計でサイズ指定を 1 か所に固定しました。 role/aria-labelは付けない: 全部品は非インタラクティブな表示専用プレースホルダーという不変条件(同文書 §1/§7)に従い、ルートはrole/aria-*/tabindex/style/data-*を一切持たない<span>です。ラベル付きで使いたい場合は Icon(Themes) を案内します。- アイコン一覧の表示元:
icon::ALL(SVG ラインアートアイコン基盤の全種レジストリ)の一覧表示は、docs/design/wireframe-ui-architecture.md§12 D8 の決定どおり本ページの Demo が担います(基盤自体の #2606 では一覧を表示しませんでした)。 - スクリーンショット非掲載:
docs/design/reference-screenshots/への blocks.pm 画像取り込みは #2602 で fail-closed に非掲載と確定しています。本ページも画像は置かず、上記の外部リンクのみで代替します。 - 配色はグレースケール: 黒塗り二値ではなく
--fw-wire-ink(線色)のトークンを使います。