Zo voegt u iconen toe aan React: lucide-react vs react-icons vs inline SVG vs sprites, gemeten bundelgroottes, maten instellen met currentColor, toegankelijkheid en de setup in Next.js.
Installeer een iconenpakket zoals lucide-react of react-icons en importeer elk icoon bij naam, bijvoorbeeld import { Camera } from "lucide-react". Named imports zijn tree-shakeable, dus alleen de iconen die u gebruikt komen in de bundel. Bepaal de grootte met props of 1em, kleur ze via currentColor, en verberg decoratieve iconen met aria-hidden.
Snelle keuzes
Deze gids gaat over het inbouwen van iconen in React-code. Welke gratis iconensets u kunt kiezen en hun licenties, leest u in onze lijst met de beste gratis iconenbibliotheken. De groottes hier komen uit onze eigen builds, met de gebruikte tool en instellingen erbij.
In onze test waren beide klein voor één named import: 874 bytes gzipped voor één icoon uit lucide-react en ongeveer 1.3 KB voor één icoon uit react-icons, omdat react-icons een kleine gedeelde wrapper toevoegt. Beide groeien maar met een paar honderd bytes per extra icoon.
De meeste React-iconcomponenten tekenen met currentColor, dus stel de CSS-color in op het icoon of de parent, bijvoorbeeld met een class voor de tekstkleur. lucide-react en react-icons accepteren ook een color-prop.
Alleen wanneer het icoon als enige de betekenis overbrengt. Geef het dan role="img" en een aria-label, of geef de knop die het bevat een label. Iconen naast zichtbare tekst moeten verborgen worden met aria-hidden="true".
Ja. Componenten van lucide-react en react-icons zijn SVG zonder state en renderen op de server. U hebt alleen "use client" nodig in een component die state of event handlers gebruikt.
Wanneer dezelfde iconen vaak voorkomen of op pagina's die geen React zijn. Elke <use> is een korte verwijzing naar één gecachet bestand, in plaats van de volledige padgegevens in de HTML te herhalen.
Vier manieren om iconen in een React-app te zetten
Elk icoon is een named export. size, color en strokeWidth zijn props, en elke andere prop wordt aan de svg doorgegeven.
Importeer uit het eigen pad van de familie (fa, md, lu, fi enzovoort). IconContext.Provider stelt standaarden in voor elk icoon erbinnen.
Plak de padgegevens één keer en hergebruik ze zoals elke component. Een width en height van 1em laten het de tekstgrootte volgen.
We bundelden imports van één icoon met esbuild in productiemodus en gzipten het resultaat. Named imports uit beide pakketten blijven klein; een namespace-import haalt de hele set binnen. React zelf is niet meegeteld.
Gemeten grootte die icoonimports toevoegen (geminificeerd, daarna gzip -9; React niet meegeteld)
Definieer elk icoon één keer als <symbol> en teken het daarna overal met <use>. Wijzig de kleur op de wrapper en beide iconen volgen, omdat de paden currentColor gebruiken.
Bied de symbolen aan als /icons.svg en laat elk icoon naar een id daarin wijzen. De browser downloadt en cachet het bestand één keer. Een externe sprite moet op dezelfde origin staan.
Iconen die currentColor gebruiken, nemen de tekstkleur van hun parent over, dus stijlen voor hover en donkere modus hebben geen aparte CSS voor iconen nodig. Wijzig de color-waarde en zie beide iconen volgen.
Een icoon naast zichtbare tekst is decoratie: verberg het. Een icoon dat de enige inhoud van een knop is, vraagt om een naam op de knop.
Componenten van lucide-react en react-icons renderen prima in Server Components, omdat het gewone SVG zonder state is. Alleen de component die een klik afhandelt heeft "use client" nodig.
Next.js optimaliseert imports al voor een lijst veelgebruikte iconenpakketten, waaronder lucide-react en react-icons. Voeg hier elk ander iconenpakket toe dat u gebruikt, zodat dev-builds snel blijven.
Eerst een set kiezen? Zie
de beste gratis iconenbibliotheken
Gratis beginnen · Geen creditcard nodig