Come aggiungere icone in React: lucide-react, react-icons, SVG inline o sprite a confronto, dimensioni del bundle misurate, dimensionamento con currentColor, accessibilità e configurazione in Next.js.
Installa un pacchetto di icone come lucide-react o react-icons e importa ogni icona per nome, per esempio import { Camera } from "lucide-react". Gli import con nome permettono il tree-shaking, quindi nel bundle finiscono solo le icone che usi. Dimensiona le icone con le props o con 1em, colorale tramite currentColor e nascondi quelle decorative con aria-hidden.
Scelte rapide
Questa guida spiega come collegare le icone al codice React. Per sapere quali set di icone gratuiti scegliere e con quali licenze, vedi la nostra lista delle migliori librerie di icone gratuite. Le dimensioni riportate qui vengono dalle nostre build, con strumento e impostazioni indicati.
Nel nostro test entrambi erano piccoli con un solo import con nome: 874 byte con gzip per un'icona lucide-react e circa 1.3 KB per un'icona react-icons, perché react-icons aggiunge un piccolo wrapper condiviso. Entrambi crescono solo di qualche centinaio di byte per ogni icona in più.
La maggior parte dei componenti di icone React disegna con currentColor, quindi imposta la proprietà CSS color sull'icona o sul suo genitore, per esempio con una classe di colore del testo. lucide-react e react-icons accettano anche una prop color.
Solo quando l'icona è l'unico elemento che trasmette un significato. In quel caso dalle role="img" e un aria-label, oppure dai un'etichetta al pulsante che la contiene. Le icone accanto a testo visibile vanno nascoste con aria-hidden="true".
Sì. I componenti di lucide-react e react-icons sono SVG senza stato e fanno il render sul server. Ti serve "use client" solo in un componente che usa stato o gestori di eventi.
Quando le stesse icone compaiono molte volte o su pagine che non sono React. Ogni <use> è un breve riferimento a un unico file in cache, invece di ripetere tutti i dati dei path nell'HTML.
Quattro modi per mettere icone in un'app React
Ogni icona è un export con nome. size, color e strokeWidth sono props, e ogni altra prop viene passata all'svg.
Importa dal percorso della famiglia (fa, md, lu, fi e così via). IconContext.Provider imposta i valori predefiniti per ogni icona al suo interno.
Incolla i dati del path una volta e riusalo come qualsiasi componente. width e height a 1em lo fanno seguire la dimensione del testo.
Abbiamo creato il bundle di import da una sola icona con esbuild in modalità produzione e compresso il risultato con gzip. Gli import con nome da entrambi i pacchetti restano piccoli; un import namespace porta dentro l'intero set. React stesso non è conteggiato.
Dimensioni misurate aggiunte dagli import di icone (minificato, poi gzip -9; React non conteggiato)
Definisci ogni icona una volta come <symbol>, poi disegnala ovunque con <use>. Modifica il colore sul contenitore ed entrambe le icone lo seguono, perché i path usano currentColor.
Servi i simboli come /icons.svg e punta ogni icona a un id al suo interno. Il browser scarica e mette in cache il file una sola volta. Uno sprite esterno deve trovarsi sulla stessa origine.
Le icone che usano currentColor prendono il colore del testo del genitore, quindi gli stili di hover e dark mode non richiedono CSS specifico per le icone. Cambia il valore di color e guarda entrambe le icone seguirlo.
Un'icona accanto a testo visibile è decorazione: nascondila. Un'icona che è l'unico contenuto di un pulsante richiede un nome sul pulsante.
I componenti di lucide-react e react-icons fanno il render senza problemi nei Server Components perché sono semplici SVG senza stato. Solo il componente che gestisce un clic ha bisogno di "use client".
Next.js ottimizza già gli import per una lista di pacchetti di icone comuni, tra cui lucide-react e react-icons. Aggiungi qui qualsiasi altro pacchetto di icone che usi così le build di sviluppo restano veloci.
Devi prima scegliere un set? Vedi
le migliori librerie di icone gratuite
Inizia gratis · Nessuna carta di credito richiesta