Iconify パック概要

複数の Iconify アイコンパックが npm パッケージとして利用可能で、Astro の Icon コンポーネントと組み合わせて使用できます。各パックには独自のインポートがあり、同じ name ベースの API を使用します。

パック比較

パック	プレフィックス	アイコン数	スタイル	最適な用途	ページ
Material Design	mdi	7,638	塗りつぶし + アウトライン	汎用、最も幅広いカバレッジ	Material Design
Carbon	carbon	2,582	アウトライン	エンタープライズ/IBM デザイン、クリーンなライン	Carbon
Phosphor	ph	9,161	複数のウェイト	柔軟なウェイトオプション（thin から fill まで）	Phosphor
Tabler	tabler	6,034	ストロークベース	シャープなラインアイコン、一貫したストローク	Tabler

使用方法

各パックには独自の Icon.astro コンポーネントがあります：

---
import MdiIcon from '@f5-sales-demo/icons-mdi/Icon.astro';
import CarbonIcon from '@f5-sales-demo/icons-carbon/Icon.astro';
import PhIcon from '@f5-sales-demo/icons-phosphor/Icon.astro';
import TablerIcon from '@f5-sales-demo/icons-tabler/Icon.astro';
---

<MdiIcon name="database" />
<CarbonIcon name="cloud" />
<PhIcon name="globe" />
<TablerIcon name="shield" />

アイコンは currentColor を使用したインライン SVG としてレンダリングされ、ライトモードとダークモードに自動的に適応します。

パックの選び方

• 最も幅広いカバレッジ: Material Design Icons は最多のアイコン数（7,638）を誇り、ほぼすべてのユースケースに対応する塗りつぶしとアウトラインのバリアントを備えています。
• エンタープライズデザイン: Carbon は IBM のデザイン言語に準拠し、ビジネスアプリケーションに適したクリーンで一貫性のあるアウトラインを提供します。
• ウェイトの柔軟性: Phosphor は6種類のウェイトバリアント（thin、light、regular、bold、fill、duotone）を提供し、視覚的なウェイトを細かく調整できます。
• 一貫したストローク: Tabler は全 6,034 アイコンにわたって均一な 2px ストローク幅を使用し、統一感のある外観を実現します。

厳選されたアイコングリッドとブラウジングリンクについては、各パックの専用ページをご覧ください。