アイコンリファレンス

ドキュメントテーマでは、複数のパックから数千のアイコンにアクセスできます。すべてのパックは同じパターンを使用します：各パックの Icon.astro コンポーネントをインポートし、名前でアイコンを参照します。

利用可能なアイコンパック

パック	数	使用方法	ページ
Starlight 組み込み	約200	<Icon name="star" />	Starlight 組み込み
F5 ブランド	665	<Icon name="ai-admin" />	F5 ブランド
Lucide	約1,600	<Icon name="rocket" />	Lucide
Material Design	7,638	<Icon name="database" />	Material Design
Carbon	2,582	<Icon name="cloud" />	Carbon
Phosphor	9,161	<Icon name="globe" />	Phosphor
Tabler	6,034	<Icon name="shield" />	Tabler
F5 XC サービス	30	<Icon name="bot-defense" />	F5 XC サービス
Simple Icons	3,200+	<Icon name="cloudflare" />	Simple Icons
HashiCorp Flight	672	<Icon name="cloud" />	HashiCorp Flight
AWS アーキテクチャ	885	<Icon name="lambda" />	AWS
Azure アーキテクチャ	606	<Icon name="virtual-machine" />	Azure
GCP アーキテクチャ	216	<Icon name="cloud-storage" />	GCP

レンダリング方法

すべてのアイコンパックは、インライン SVG をレンダリングするパッケージごとの Icon.astro コンポーネントを使用します。各パックには独自のインポートがあります：

---
// Starlight 組み込み
import { Icon } from '@astrojs/starlight/components';

// その他のパック — それぞれ独自のインポートがあります
import LucideIcon from '@f5-sales-demo/icons-lucide/Icon.astro';
import MdiIcon from '@f5-sales-demo/icons-mdi/Icon.astro';
import F5xIcon from '@f5-sales-demo/icons-f5xc/Icon.astro';
---

<Icon name="star" />
<LucideIcon name="rocket" />
<MdiIcon name="database" />
<F5xIcon name="bot-defense" />

アイコンは currentColor を使用し、特別な処理なしでライトモードとダークモードに自動的に適応します。

Starlight 組み込み

star

rocket

setting

heart

Lucide

rocket

mdi/database

carbon/cloud

tabler/shield

ダーク/ライトモードの動作

すべての Icon コンポーネントは currentColor を使用してインライン SVG をレンダリングします。現在のテーマに自動的に適応するため、特別な CSS やクラスの処理は不要です。

F5 XC サービスアイコンは、ライトモードとダークモードに自動的に適応する CSS カスタムプロパティを使用します — 特別なクラス処理は不要です。その他のマルチカラーアイコン（HashiCorp Flight のカラーバリアントなど）では、.icon-card-image の no-invert クラスによってダークモードでもオリジナルの色が保持されます。

どのパックを使うべきか？

ユースケース	推奨パック	理由
一般的な UI（矢印、閉じる、検索）	Starlight 組み込み	設定不要、常に利用可能
F5 製品ダイアグラム	F5 ブランド	ネットワーク/セキュリティ分野に特化したアート
モダンなストロークアイコン	Lucide	クリーンで一貫性のある 1,600 以上のアイコン
大規模な塗りつぶし/アウトラインアイコン	Material Design (mdi)	7,638 アイコンの最大セット
IBM デザイン言語	Carbon	2,582 のエンタープライズグレードアイコン
柔軟なウェイトオプション	Phosphor	6 種類のウェイトバリアントを持つ 9,161 アイコン
シャープなラインアイコン	Tabler	一貫した 2px ストロークの 6,034 アイコン
F5 XC サービスダイアグラム	F5 XC サービス	30 の Distributed Cloud サービスアイコン
ブランド/企業ロゴ	Simple Icons	ベンダーおよびサービス向けの 3,200 以上のブランドアイコン
クラウド/インフラベンダーロゴ	HashiCorp Flight	AWS、GCP、Azure、K8s ベンダーアイコン
AWS アーキテクチャダイアグラム	AWS アーキテクチャ	AWS インフラ向けの 885 カラーサービスアイコン
Azure アーキテクチャダイアグラム	Azure アーキテクチャ	Azure インフラ向けの 606 カラーサービスアイコン
GCP アーキテクチャダイアグラム	GCP アーキテクチャ	Google Cloud インフラ向けの 216 カラーサービスアイコン