Riferimento Icone

Il tema della documentazione fornisce accesso a migliaia di icone da molteplici pacchetti. Ogni pacchetto utilizza lo stesso schema: importare il componente Icon.astro del pacchetto e fare riferimento alle icone per nome.

Pacchetti di Icone Disponibili

Pacchetto	Quantità	Utilizzo	Pagina
Starlight Integrato	~200	`<Icon name="star" />`	Starlight Integrato
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

Metodo di Rendering

Tutti i pacchetti di icone utilizzano componenti Icon.astro per pacchetto che rendono SVG inline. Ogni pacchetto ha il proprio import:

---
// Starlight integrato
import { Icon } from '@astrojs/starlight/components';

// Altri pacchetti — ognuno ha il proprio 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" />

Le icone utilizzano currentColor e si adattano automaticamente alla modalità chiara e scura senza necessità di gestione speciale.

Starlight Integrato

star

rocket

setting

heart

Lucide

rocket

mdi/database

carbon/cloud

tabler/shield

Comportamento Modalità Scura/Chiara

Tutti i componenti Icon rendono SVG inline utilizzando currentColor. Si adattano automaticamente al tema corrente — non è necessaria alcuna gestione speciale di CSS o classi.

Le icone dei servizi F5 XC utilizzano proprietà CSS personalizzate che si adattano automaticamente alla modalità chiara e scura — non è necessaria alcuna gestione speciale delle classi. Per altre icone multicolore (come le varianti a colori di HashiCorp Flight), la classe no-invert su .icon-card-image preserva i colori originali in modalità scura.

Quale Pacchetto Dovrei Usare?

Caso d’Uso	Pacchetto Consigliato	Motivazione
UI generale (frecce, chiudi, cerca)	Starlight Integrato	Zero configurazione, sempre disponibile
Diagrammi prodotti F5	F5 Brand	Grafica specifica per networking/sicurezza
Icone moderne con tratto	Lucide	Pulite, coerenti, oltre 1.600 icone
Icone piene/contorno su larga scala	Material Design (mdi)	Il set più grande con 7.638 icone
Linguaggio di design IBM	Carbon	2.582 icone di livello enterprise
Opzioni flessibili di peso	Phosphor	9.161 icone con sei varianti di peso
Icone lineari nitide	Tabler	6.034 icone con tratto coerente di 2px
Diagrammi servizi F5 XC	F5 XC Services	30 icone per i servizi Distributed Cloud
Loghi di brand/aziende	Simple Icons	3.200+ icone brand per vendor e servizi
Loghi vendor cloud/infrastruttura	HashiCorp Flight	Icone vendor AWS, GCP, Azure, K8s
Diagrammi architettura AWS	AWS Architecture	885 icone colorate per l’infrastruttura AWS
Diagrammi architettura Azure	Azure Architecture	606 icone colorate per l’infrastruttura Azure
Diagrammi architettura GCP	GCP Architecture	216 icone colorate per l’infrastruttura Google Cloud