アイコン
アイコンセットはデザインシステムごとに 1 つ、太さも 1 つ、規則も 1 つ。未選択は線、選択中は塗り。
Tanrei の既定のアイコンは Material Symbols の Rounded、太さ 300 です。文字用の書体と同じく、フォントは名前で参照するだけで同梱しません。読み込むのはプロダクトの役目です。
アイコンの描き方は、少数のトークンで決まります。アイコンの枠は sys.icon.small・medium・large の 3 サイズ（既定では 16・20・24px）で、フォントのオプティカルサイズは枠の大きさに追従します。
ref.typeface.icon- The icon font. Material Symbols Rounded: a variable font whose weight and fill are set from sys.icon.
sys.icon.family- The icon font by selection. A variable icon font (Material Symbols) is one family and tells selected from unselected with its FILL axis; a static icon font tells them apart with two families (Material Icons Outlined / Material Icons). Both default to ref.typeface.icon.
sys.icon.weight- The stroke weight of every icon (the `wght` axis of the icon font).
sys.icon.fill- The fill of an icon by selection (the `FILL` axis of the icon font): 0 is outlined, 1 is filled.
生成元 tokens/ref/typeface.tokens.json, tokens/sys/measure.tokens.json
未選択は線。選択中は塗り。例外はありません。 ナビゲーション項目、タブ、トグル、チップ、お気に入り。どれもグリフは同じまま、状態に応じて塗りだけが変わります。装飾のために線と塗りを混ぜることはなく、塗りを手で選ぶこともありません。Web では、アイコンが置かれたコントロールの状態に塗りが自動で追従します。
塗りは選択状態に追従する
import '@tanrei/web/icons.css';<button aria-pressed="true"><span class="tanrei-icon" aria-hidden="true">favorite</span> お気に入り</button>.tanrei-icon は、祖先要素の aria-pressed・aria-selected・aria-checked・aria-current（これらを data-aria-* に移す Tanrei のコントロールでは data-aria-pressed・data-aria-selected・data-aria-checked・data-aria-current）、またはアイコン自身か祖先の data-selected を読み取ります（data-selected="false" を付けると、そのアイコンだけ対象から外せます）。隣のテキストが同じ内容を伝えているならアイコンに aria-hidden="true" を付け、そうでないならコントロールにアクセシブルネームを付けてください。
名前は data-icon で渡すこともできます。その場合、要素の中身は空にします。
<span class="tanrei-icon" data-icon="folder"></span>描かれるグリフは同じですが、名前がページのテキストになりません。textContent や innerText にも、コピーした文字列にも、周りのコントロールのアクセシブルネームにも入りません。メニューやリストの行、表のセル、テストで文字列を比べる箇所など、名前がテキストとして読まれてしまう場所で使ってください。サイズ、選択状態、右から左のレイアウトでの反転は、テキストで書いた場合とまったく同じように働きます。隣のテキストが同じ内容を伝えている場合は、この形でも aria-hidden="true" を付けてください。Firefox 127 以前は、この名前をアクセシブルネームに含めて読み上げます。
ネイティブの各プラットフォームでは、同じ値がデザインシステムと一緒に届きます（system.icon）。あわせて、「選択中かどうか」とサイズから、フォントに渡す設定を返す小さなヘルパーがあります。アイコンコンポーネントはまだ提供していません。
アイコンセットはデザインシステムに属するものなので、レイヤで変えられます。同梱システムでの解決値は次のとおりです。
| デザインシステム | family.unselected | family.selected | weight | fill.unselected | fill.selected |
|---|---|---|---|---|---|
tanrei | Material Symbols Rounded | Material Symbols Rounded | 300 | 0 | 1 |
cupertino | Material Symbols Rounded | Material Symbols Rounded | 300 | 0 | 1 |
m3-expressive-like | Material Symbols Outlined | Material Symbols Outlined | 400 | 0 | 1 |
m3-like | Material Symbols Outlined | Material Symbols Outlined | 400 | 0 | 1 |
生成元 tokens/systems/*.system.json, design/tokens/<system>/tanrei.light.tokens.json
アイコンフォントが選択中と未選択を描き分ける方法は 2 通りあり、トークンはその両方に対応しています。選択中のアイコンには、常に family.selected と fill.selected の両方が適用されます。実際に見た目を変えるのがどちらになるかは、セット次第です。
Material Symbols のようなバリアブルのアイコンフォントは、FILL 軸を持つ 1 つのファミリーです。ファミリーのトークンは既定でどちらも ref.typeface.icon を指しているので、このトークン 1 つを差し替えればセットが変わり、状態の描き分けは fill.unselected / fill.selected が受け持ちます。m3-like が書いているのはこれだけです。
"tokens": {
"tanrei.ref.typeface.icon": { "$value": ["Material Symbols Outlined"], "reason": "Material Design 3 draws Material Symbols in the Outlined style." },
"tanrei.sys.icon.weight": { "$value": 400, "reason": "Material Symbols default weight in Material Design 3." }
}スタティックなアイコンフォントには軸がありません。線の絵と塗りの絵が別々のファミリーとして配布されているので、レイヤでは状態ごとにファミリーを指定します。
"tokens": {
"tanrei.sys.icon.family.unselected": { "$value": ["Material Icons Outlined"], "reason": "Acme uses the static Material Icons set: outlined when unselected." },
"tanrei.sys.icon.family.selected": { "$value": ["Material Icons"], "reason": "Acme uses the static Material Icons set: filled when selected." },
"tanrei.sys.icon.weight": { "$value": 400, "reason": "A static icon font has one weight; 400 is what Material Icons is drawn at." }
}塗りと太さのトークンはそのままで構いません。スタティックフォントは軸を無視するので害はなく、コンポーネントはどちらの種類のセットが有効かを知る必要がありません。このレイヤは、リポジトリ自身のテスト用フィクスチャ（packages/tokens-build/test/fixtures/acme.system.json）です。
Tanrei が決めるのはアイコンの「描き方」であって、「どのアイコンがあるか」ではありません。グリフの名前はセットごとに違い、あるセットにあるグリフが別のセットに無いこともあります。アイコンセットを変えるプロダクトは、自分が使っている名前を確認してください。なお、SF Symbols のようにフォントではないシンボルセットは、ファミリーのトークンでは指定できません。これは mimicry-gaps 台帳に platform-symbol-sets として登録しています。
React Native の <Text> はフォントのバリエーション軸を設定できません。そのためバリアブルのアイコンフォントでは FILL がグリフに届かず、アイコンはどちらの状態でも同じ見た目になります。React Native で塗りの規則を守るには、上のようにスタティックフォント 2 ファミリーを使うか、アイコンを SVG で描いてください。
ネイティブ 4 パッケージのアイコンヘルパーは、いま「状態ごとのファミリー」モデルへ移行しているところです。各パッケージの README にその記載が載るまでは、そのパッケージは単一のファミリーを読むものと考えてください。