อ้างอิงไอคอน

ธีมเอกสารนี้ให้การเข้าถึงไอคอนนับพันจากหลายชุด ทุกชุดใช้รูปแบบเดียวกัน: นำเข้าคอมโพเนนต์ Icon.astro ของชุดนั้นและอ้างอิงไอคอนตามชื่อ

ชุดไอคอนที่มีให้ใช้งาน

ชุด	จำนวน	การใช้งาน	หน้า
Starlight ในตัว	~200	`<Icon name="star" />`	Starlight ในตัว
F5 Brand	665	`<Icon name="ai-admin" />`	F5 Brand
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 Services	30	`<Icon name="bot-defense" />`	F5 XC Services
Simple Icons	3,200+	`<Icon name="cloudflare" />`	Simple Icons
HashiCorp Flight	672	`<Icon name="cloud" />`	HashiCorp Flight
AWS Architecture	885	`<Icon name="lambda" />`	AWS
Azure Architecture	606	`<Icon name="virtual-machine" />`	Azure
GCP Architecture	216	`<Icon name="cloud-storage" />`	GCP

วิธีการเรนเดอร์

ชุดไอคอนทั้งหมดใช้คอมโพเนนต์ Icon.astro ต่อแพ็กเกจที่เรนเดอร์ SVG แบบอินไลน์ แต่ละชุดมีการนำเข้าของตัวเอง:

---
// 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 ทั้งหมดเรนเดอร์ SVG แบบอินไลน์โดยใช้ currentColor ซึ่งปรับตัวตามธีมปัจจุบันโดยอัตโนมัติ — ไม่จำเป็นต้องมีการจัดการ CSS หรือคลาสพิเศษ

ไอคอน F5 XC service ใช้ CSS custom properties ที่ปรับตัวตามโหมดสว่างและโหมดมืดโดยอัตโนมัติ — ไม่จำเป็นต้องมีการจัดการคลาสพิเศษ สำหรับไอคอนหลายสีอื่น ๆ (เช่น ตัวเลือกสีของ HashiCorp Flight) คลาส no-invert บน .icon-card-image จะรักษาสีดั้งเดิมในโหมดมืด

ฉันควรใช้ชุดไหน?

กรณีการใช้งาน	ชุดที่แนะนำ	เหตุผล
UI ทั่วไป (ลูกศร, ปิด, ค้นหา)	Starlight ในตัว	ไม่ต้องตั้งค่า พร้อมใช้งานเสมอ
แผนภาพผลิตภัณฑ์ F5	F5 Brand	ศิลปะเฉพาะทางด้านเครือข่าย/ความปลอดภัย
ไอคอนแบบเส้นขีดสมัยใหม่	Lucide	สะอาด สม่ำเสมอ มากกว่า 1,600 ไอคอน
ไอคอนแบบเติม/แบบเส้นขอบขนาดใหญ่	Material Design (mdi)	ชุดใหญ่ที่สุดด้วย 7,638 ไอคอน
ภาษาการออกแบบ IBM	Carbon	2,582 ไอคอนระดับองค์กร
ตัวเลือกน้ำหนักที่ยืดหยุ่น	Phosphor	9,161 ไอคอนพร้อมตัวเลือกน้ำหนัก 6 แบบ
ไอคอนเส้นคมชัด	Tabler	6,034 ไอคอนพร้อมเส้นขีดขนาด 2px สม่ำเสมอ
แผนภาพบริการ F5 XC	F5 XC Services	30 ไอคอนบริการ Distributed Cloud
โลโก้แบรนด์/บริษัท	Simple Icons	3,200+ ไอคอนแบรนด์สำหรับผู้ขายและบริการ
โลโก้ผู้ให้บริการคลาวด์/โครงสร้างพื้นฐาน	HashiCorp Flight	ไอคอนผู้ให้บริการ AWS, GCP, Azure, K8s
แผนภาพสถาปัตยกรรม AWS	AWS Architecture	885 ไอคอนบริการแบบสีสำหรับโครงสร้างพื้นฐาน AWS
แผนภาพสถาปัตยกรรม Azure	Azure Architecture	606 ไอคอนบริการแบบสีสำหรับโครงสร้างพื้นฐาน Azure
แผนภาพสถาปัตยกรรม GCP	GCP Architecture	216 ไอคอนบริการแบบสีสำหรับโครงสร้างพื้นฐาน Google Cloud