跳到內容
Icons

Iconify 圖示套件概覽

多個 Iconify 圖示套件以 npm 套件形式提供，搭配 Astro Icon 元件使用。每個套件都有自己的匯入方式，並使用相同的基於 name 的 API。

套件比較

Section titled “套件比較”
套件前綴圖示數量風格最適用於頁面
Material Designmdi7,638填充 + 描邊通用用途，涵蓋範圍最廣Material Design
Carboncarbon2,582描邊企業/IBM 設計，線條簡潔Carbon
Phosphorph9,161多種粗細彈性粗細選項（從極細到填充）Phosphor
Tablertabler6,034筆畫式清晰的線條圖示，一致的筆畫Tabler

使用方式

Section titled “使用方式”

每個套件都有自己的 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" />

圖示會以內嵌 SVG 方式渲染，使用 currentColor — 它們會自動適應淺色和深色模式。

選擇套件

Section titled “選擇套件”
  • 涵蓋範圍最廣：Material Design Icons 擁有最多的圖示（7,638 個），提供填充和描邊變體，幾乎涵蓋所有使用情境。
  • 企業設計：Carbon 遵循 IBM 的設計語言，具有簡潔、一致的描邊風格，適合商業應用。
  • 粗細彈性：Phosphor 提供六種粗細變體（極細、細、常規、粗、填充、雙色調），可精細調整視覺粗細。
  • 一致的筆畫：Tabler 在所有 6,034 個圖示中使用統一的 2px 筆畫寬度，呈現一致的外觀。

請參閱各套件的專屬頁面，瀏覽精選圖示網格和瀏覽連結。