アイコン

Hypermedia Components は、意図してアイコンセットを同梱しません。 アイコンはアプリレベルの選択であり、CSS + ビヘイビアのライブラリが 1 つに固定すべきではないからです。(HC 自身のクローム — セレクトの シェブロン、チェックボックスのチェック、アコーディオンのキャレット — は currentColor で描かれたインライン SVG なので、すでにテーマに追従 します。)

好きなセットを選んでください。以下のものは 4 つの基準を満たすため、 HC と特にきれいに組み合います:

1. currentColor — アイコンが周囲のテキスト / ボタン / アクセント 色を継承するため、data-color と data-neutral に自動で追従します。
2. フレームワーク不要 — 素のサーバレンダリング HTML で動き、htmx スワップを生き残ります(React/Vue ランタイム不要)。
3. em でサイズ可能 — 周囲のテキストと密度に合わせてスケールします。
4. オープンライセンス。

推奨

1. Iconify <iconify-icon> — ハイパーメディアに最適

フレームワーク不要の Web コンポーネント。スクリプトを一度置けば、20 万 以上のアイコン(Lucide、Tabler、Phosphor、Remix、Material、…)を名前で 参照できます。CSS の currentColor で色づき、font-size でサイズが 決まり、htmx スワップ後も再初期化なしで自己再描画します。

<script type="module" src="https://cdn.jsdelivr.net/npm/iconify-icon@2"></script>

<button class="hc-button" data-variant="primary">
  <iconify-icon icon="lucide:check" class="hc-icon"></iconify-icon> Save
</button>

セットはプレフィックスでアイコンごとに選べます: lucide:check、 tabler:check、ph:check、ri:check-line、material-symbols:check。

2. Lucide — HC の見た目に最も合う単一セット

24px グリッド、1.5–2px ストローク、currentColor — HC 組み込みの ストローククロームと視覚的に一貫します。使い方は 3 通り: インライン SVG のコピー、lucide vanilla イニシャライザ、Iconify 経由(lucide:*)。

vanilla イニシャライザは htmx スワップ後に再実行が必要です:

<i data-lucide="check"></i>
<script>
  lucide.createIcons();
  document.body.addEventListener('htmx:afterSwap', () => lucide.createIcons());
</script>

3. SVG スプライト — 最もハイパーメディア純度が高い(JS ゼロ)

使うアイコンを 1 つのスプライトにまとめ、<use> で参照します。 ランタイムなし、サーバレンダリング可能、最速、currentColor。

<button class="hc-button">
  <svg class="hc-icon" aria-hidden="true"><use href="/icons.svg#check"></use></svg>
  Save
</button>

ほかの良いセット(すべて Iconify 経由でも利用可): Tabler、 Phosphor(regular / bold / fill / duotone)、Remix、Heroicons、 Material Symbols(バリアブルフォント)。HC 組み込みクロームに合わせる ならアウトライン / ストローク系のセットを選んでください。

HC との配線

色 — currentColor に任せる

アイコンに色を設定しないでください。currentColor のままにしておけば、 スコープ内の HC の色 — ボタンの前景色、本文テキスト、アクティブな アクセント — を継承します。そのまま data-color / data-neutral / ダークモードに自動で追従します。

サイズ — .hc-icon ユーティリティ

.hc-icon ユーティリティは、アイコンを周囲のテキストに合わせてサイズし (--hc-icon-size: 1em)、flex: none を設定し、ベースラインに揃えます。 インスタンス単位の上書き:

<svg class="hc-icon" style="--hc-icon-size: 1.25rem" aria-hidden="true">…</svg>

アクセシビリティ

• テキストラベルの隣の装飾アイコン → aria-hidden="true"。
• アイコンのみのコントロール → アクセシブルな名前を与え、グリフを 隠します:

  <button class="hc-button" aria-label="Search">
    <svg class="hc-icon" aria-hidden="true"><use href="/icons.svg#search"></use></svg>
  </button>

  (または .hc-sr-only で AT にだけ見えるラベルを置きます。)

業務画面でアイコンをどこに置くか

どのセットを選ぶかより、アイコンだけをラベルにしてよい場所の方が 重要です。運用画面は担当者が入れ替わります。アイコンのみのツールバーは 設計した人が一度覚えるだけで、後から入る人が毎回覚え直します。

• 既定は「アイコン＋ラベル」。意味が普遍でないものはすべてです — フィルタ、ソート、列、エクスポート、インポート、承認。
• アイコンのみは本当に普遍なものに限ります。閉じる（×）、 オーバーフロー（⋯）、ページャの矢印（‹ ›）。いずれも アクセシブル名は必要です。絵は名前ではありません。
• **歯車は列のアイコンではありません。**歯車はアプリ／画面の設定 （密度、テーマ、通知）と読まれ、それらを実際に持つメニューと衝突 します。表示項目には列のグリフを当て、歯車は画面設定用に空けて おきます。
• **件数はバッジではなくラベルに。**誰もバッジを読みません。 Filters (3)、Sort (2)、Columns (7 of 12)。
• 状態をアイコンだけで表さない（塗りつぶした漏斗＝絞り込み中、 など）。状態はテキストか aria-* / data-* です （命名参照）。 適用中の条件はデータの上で既にそれを述べています。

<!-- 既定：アイコン＋ラベル -->
<button class="hc-button" type="button" popovertarget="filters">
  <svg class="hc-icon" aria-hidden="true" viewBox="0 0 24 24" fill="none"
       stroke="currentColor" stroke-width="2"><path d="M3 5h18l-7 8v6l-4 2v-8z"/></svg>
  Filters (3)
</button>

<!-- アイコンのみ。× が普遍だからで、名前はそれでも付けます -->
<button class="hc-button" data-variant="ghost" type="button"
        aria-label="Close">×</button>

ライブ例

以下は .hc-icon つきのインライン Lucide SVG です — ライブラリは 読み込まず、currentColor + ユーティリティだけ。ヘッダーの Color / Neutral / テーマピッカーを切り替えて、アイコンが追従するのを 確かめてください。

Save

Continue

Done

3 notifications

<button class="hc-button" data-variant="primary">
  <svg class="hc-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor"
       stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
    <path d="M20 6 9 17l-5-5"/>
  </svg>
  Save
</button>

関連

• カラーテーマ · ニュートラルランプ — currentColor アイコンが追従する対象。
• アクセシビリティ — アイコンのみコントロールのラベル付け。