อ้างอิงไอคอน
ธีมเอกสารนี้ให้การเข้าถึงไอคอนนับพันจากหลายชุด ทุกชุดใช้รูปแบบเดียวกัน: นำเข้าคอมโพเนนต์ 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 ในตัว
หัวข้อที่มีชื่อว่า “Starlight ในตัว”star
rocket
setting
heart
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 |