跳到內容
Icons

圖示參考

文件主題提供來自多個套件的數千個圖示。每個套件都使用相同的模式：匯入該套件的 Icon.astro 元件，並透過名稱引用圖示。

可用圖示套件

Section titled “可用圖示套件”
套件數量使用方式頁面
Starlight 內建~200<Icon name="star" />Starlight 內建
F5 品牌665<Icon name="ai-admin" />F5 品牌
Lucide~1,600<Icon name="rocket" />Lucide
Material Design7,638<Icon name="database" />Material Design
Carbon2,582<Icon name="cloud" />Carbon
Phosphor9,161<Icon name="globe" />Phosphor
Tabler6,034<Icon name="shield" />Tabler
F5 XC 服務30<Icon name="bot-defense" />F5 XC 服務
Simple Icons3,200+<Icon name="cloudflare" />Simple Icons
HashiCorp Flight672<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

渲染方式

Section titled “渲染方式”

所有圖示套件都使用各套件專屬的 Icon.astro 元件來渲染內嵌 SVG。每個套件都有自己的匯入方式：

---
// Starlight built-in
import { Icon } from '@astrojs/starlight/components';


// Other packs — each has its own import
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 內建

Section titled “Starlight 內建”
star
rocket
setting
heart

Lucide

Section titled “Lucide”
rocket
mdi/database
carbon/cloud
tabler/shield

深色/淺色模式行為

Section titled “深色/淺色模式行為”

所有 Icon 元件都使用 currentColor 渲染內嵌 SVG。它們會自動適應當前主題 — 無需特別的 CSS 或類別處理。

F5 XC 服務圖示使用 CSS 自訂屬性，會自動適應淺色和深色模式 — 無需特別的類別處理。對於其他多色圖示（例如 HashiCorp Flight 彩色變體），.icon-card-image 上的 no-invert 類別可在深色模式中保留原始顏色。

我應該使用哪個套件？

Section titled “我應該使用哪個套件？”
使用情境建議套件原因
一般 UI（箭頭、關閉、搜尋）Starlight 內建零設定，隨時可用
F5 產品圖表F5 品牌針對網路/安全領域的專用圖形
現代描邊圖示Lucide簡潔一致的 1,600+ 圖示
大規模填充/描邊圖示Material Design (mdi)最大的圖示集，擁有 7,638 個圖示
IBM 設計語言Carbon2,582 個企業級圖示
彈性粗細選項Phosphor9,161 個圖示，提供六種粗細變體
清晰的線條圖示Tabler6,034 個圖示，一致的 2px 描邊
F5 XC 服務圖表F5 XC 服務30 個分散式雲端服務圖示
品牌/公司標誌Simple Icons3,200+ 個廠商及服務品牌圖示
雲端/基礎架構廠商標誌HashiCorp FlightAWS、GCP、Azure、K8s 廠商圖示
AWS 架構圖表AWS 架構885 個彩色 AWS 基礎架構服務圖示
Azure 架構圖表Azure 架構606 個彩色 Azure 基礎架構服務圖示
GCP 架構圖表GCP 架構216 個彩色 Google Cloud 基礎架構服務圖示