跳到內容

圖示參考

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

套件數量使用方式頁面
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

所有圖示套件都使用各套件專屬的 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,會自動適應淺色和深色模式,無需特別處理。

star
rocket
setting
heart
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 設計語言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 基礎架構服務圖示