Référence des icônes

Le thème de documentation fournit l’accès à des milliers d’icônes provenant de multiples packs. Chaque pack utilise le même modèle : importez le composant Icon.astro du pack et référencez les icônes par leur nom.

Packs d’icônes disponibles

Pack	Nombre	Utilisation	Page
Starlight intégré	~200	`<Icon name="star" />`	Starlight intégré
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

Méthode de rendu

Tous les packs d’icônes utilisent des composants Icon.astro par package qui effectuent le rendu de SVG en ligne. Chaque pack possède son propre import :

---
// Starlight intégré
import { Icon } from '@astrojs/starlight/components';

// Autres packs — chacun a son propre 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" />

Les icônes utilisent currentColor et s’adaptent automatiquement aux modes clair et sombre sans aucune manipulation spéciale nécessaire.

Starlight intégré

star

rocket

setting

heart

Lucide

rocket

mdi/database

carbon/cloud

tabler/shield

Comportement en mode sombre/clair

Tous les composants Icon effectuent le rendu de SVG en ligne utilisant currentColor. Ils s’adaptent automatiquement au thème actuel — aucune gestion spéciale de CSS ou de classes n’est nécessaire.

Les icônes de services F5 XC utilisent des propriétés personnalisées CSS qui s’adaptent automatiquement aux modes clair et sombre — aucune gestion spéciale de classes n’est nécessaire. Pour les autres icônes multicolores (comme les variantes de couleur HashiCorp Flight), la classe no-invert sur .icon-card-image préserve les couleurs d’origine en mode sombre.

Quel pack devrais-je utiliser ?

Cas d’utilisation	Pack recommandé	Pourquoi
Interface générale (flèches, fermer, recherche)	Starlight intégré	Aucune configuration, toujours disponible
Diagrammes de produits F5	F5 Brand	Art spécifique au domaine réseau/sécurité
Icônes modernes en trait	Lucide	Plus de 1 600 icônes propres et cohérentes
Icônes pleines/contourées à grande échelle	Material Design (mdi)	Plus grand ensemble avec 7 638 icônes
Langage de design IBM	Carbon	2 582 icônes de qualité entreprise
Options de poids flexibles	Phosphor	9 161 icônes avec six variantes de poids
Icônes en lignes nettes	Tabler	6 034 icônes avec un trait cohérent de 2px
Diagrammes de services F5 XC	F5 XC Services	30 icônes de services Distributed Cloud
Logos de marques/entreprises	Simple Icons	Plus de 3 200 icônes de marques pour fournisseurs et services
Logos de fournisseurs cloud/infra	HashiCorp Flight	Icônes de fournisseurs AWS, GCP, Azure, K8s
Diagrammes d’architecture AWS	AWS Architecture	885 icônes de services en couleur pour l’infrastructure AWS
Diagrammes d’architecture Azure	Azure Architecture	606 icônes de services en couleur pour l’infrastructure Azure
Diagrammes d’architecture GCP	GCP Architecture	216 icônes de services en couleur pour l’infrastructure Google Cloud