Icon-Referenz

Das Dokumentationsthema bietet Zugriff auf Tausende von Icons aus mehreren Paketen. Jedes Paket folgt demselben Muster: Importieren Sie die Icon.astro-Komponente des Pakets und referenzieren Sie Icons nach Namen.

Verfügbare Icon-Pakete

Paket	Anzahl	Verwendung	Seite
Starlight Integriert	~200	`<Icon name="star" />`	Starlight Integriert
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

Rendering-Methode

Alle Icon-Pakete verwenden paketspezifische Icon.astro-Komponenten, die Inline-SVGs rendern. Jedes Paket hat seinen eigenen Import:

---
// 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" />

Icons verwenden currentColor und passen sich automatisch an den Hell- und Dunkelmodus an, ohne dass eine spezielle Handhabung erforderlich ist.

Starlight Integriert

star

rocket

setting

heart

Lucide

rocket

mdi/database

carbon/cloud

tabler/shield

Dunkel-/Hell-Modus-Verhalten

Alle Icon-Komponenten rendern Inline-SVGs mit currentColor. Sie passen sich automatisch an das aktuelle Theme an — es ist keine spezielle CSS- oder Klassenbehandlung erforderlich.

F5 XC Service-Icons verwenden CSS Custom Properties, die sich automatisch an den Hell- und Dunkelmodus anpassen — keine spezielle Klassenbehandlung ist erforderlich. Für andere mehrfarbige Icons (wie HashiCorp Flight Farbvarianten) bewahrt die Klasse no-invert auf .icon-card-image die Originalfarben im Dunkelmodus.

Welches Paket sollte ich verwenden?

Anwendungsfall	Empfohlenes Paket	Warum
Allgemeine UI (Pfeile, Schließen, Suche)	Starlight Integriert	Keine Konfiguration, immer verfügbar
F5-Produktdiagramme	F5 Brand	Domänenspezifische Netzwerk-/Sicherheitsgrafiken
Moderne Strich-Icons	Lucide	Sauber, konsistent, über 1.600 Icons
Ausgefüllte/umrandete Icons im großen Umfang	Material Design (mdi)	Größtes Set mit 7.638 Icons
IBM Design Language	Carbon	2.582 unternehmenstaugliche Icons
Flexible Gewichtsoptionen	Phosphor	9.161 Icons mit sechs Gewichtsvarianten
Klare Linien-Icons	Tabler	6.034 Icons mit einheitlichem 2px-Strich
F5 XC Service-Diagramme	F5 XC Services	30 Distributed Cloud Service-Icons
Marken-/Firmenlogos	Simple Icons	3.200+ Marken-Icons für Anbieter und Dienste
Cloud-/Infrastruktur-Anbieterlogos	HashiCorp Flight	AWS, GCP, Azure, K8s Anbieter-Icons
AWS-Architekturdiagramme	AWS Architecture	885 farbige Service-Icons für AWS-Infrastruktur
Azure-Architekturdiagramme	Azure Architecture	606 farbige Service-Icons für Azure-Infrastruktur
GCP-Architekturdiagramme	GCP Architecture	216 farbige Service-Icons für Google Cloud-Infrastruktur