Naar hoofdinhoud springen

SVG naar React

SVG converteren naar React, JSX of TSX

Zet SVG-bestanden om in JSX-opmaak, een kant-en-klare React-component in TypeScript of JavaScript, of een module die de SVG als een tekenreeks exporteert. De converter repareert JSX-kenmerken, converteert inline-stijlen, behoudt de viewBox en ondersteunt batchdownloads.

Sleep bestanden hierheen

Standaardwaarden voor nieuwe bestanden bewerken

Uitvoer

Een complete module: de imports, de component en de export.

Module

Bepaalt de naam van de component, van de geëxporteerde constante en van het gegenereerde bestand. Standaard de bestandsnaam in PascalCase.

Taal

Verpakt de component zodat een ref het svg-element bereikt.

Spreidt React.SVGProps<SVGSVGElement> over het svg-hoofdelement, na de attributen uit het bestand.

Export
Optimalisatie

Past de veilige optimalisatievoorinstelling toe voordat de uitvoer wordt gegenereerd.

Laat de width en height op het hoofdelement weg, zodat de component zijn maat uit CSS of uit de meegegeven props haalt. De viewBox blijft altijd behouden.

Vormgeving

Vervangt elke fill en stroke die een kleur noemt, zodat het werk de CSS-eigenschap color overneemt. fill="none" blijft ongemoeid.

Voorbeeld

Geen voorbeeld. Voeg bestanden toe en selecteer ze om resultaten te zien.

Nog geen bestanden. Sleep bestanden hierboven of klik op BESTANDEN SELECTEREN.

Wat is SVG?

SVG (Scalable Vector Graphics) is een op XML gebaseerd vectorafbeeldingsformaat. In plaats van pixels beschrijft een SVG vormen, paden, vullingen en lijnen wiskundig, zodat het op elke grootte zonder kwaliteitsverlies kan worden weergegeven.

SVG is het standaard vectorformaat voor het web. Elke moderne browser ondersteunt het rechtstreeks; u kunt het vormgeven met CSS of animeren met JavaScript of SMIL. Voor logo’s, pictogrammen en illustraties is het vaak compact, maar complexe SVG-bestanden kunnen groot worden.

Wanneer SVG omzetten naar React

Bundlers zijn het oneens over wat je krijgt als je een .svg-bestand importeert: inline markup, een URL, of helemaal niets zonder de juiste loader. Een component die naast de rest van je code in je repository staat, omzeilt dat. Het pictogram wordt gewone JSX die typecontrole doorstaat, meegaat in tree-shaking en props aanneemt zoals elke andere component. De conversie regelt ook wat JSX nodig heeft en ruwe SVG niet biedt: stroke-width wordt strokeWidth, class wordt className, xlink:href wordt xlinkHref, en een inline style-string wordt een object. Zet de optie currentColor gebruiken aan en elke fill en stroke erft de CSS-eigenschap color, zodat één component elke kleur dekt waarin je hem gebruikt.

Een SVG online omzetten naar React

  1. 1

    Sleep je SVG-bestanden erin, of klik op BESTANDEN SELECTEREN, om ze aan de wachtrij toe te voegen. Tot 40 tegelijk.

  2. 2

    Kies JSX, React Component of SVG String, en stel daarna de componentnaam, de taal en het gebruik van currentColor in. De gegenereerde code werkt zich bij zodra je de opties wijzigt.

  3. 3

    Kopieer de code uit de voorvertoning, of klik op ALLES OPSLAAN om per SVG één bestand te downloaden, als één ZIP wanneer de wachtrij meer dan één bestand bevat.

Privacy: je bestanden verlaten je browser niet

De conversie wordt lokaal in uw browser uitgevoerd met behulp van JavaScript en WebAssembly. Er vindt geen bestandsupload of serverconversie plaats, dus de bestanden die u toevoegt, blijven op uw apparaat staan.

Lokale verwerking helpt vertrouwelijke logo's, interne documenten en niet-vrijgegeven illustraties van klanten te beschermen. Pagina's en conversiecode worden in de cache opgeslagen terwijl u ze gebruikt, zodat tools die u al hebt geopend, kunnen blijven werken zonder een netwerkverbinding.

Veelgestelde vragen

Wat is het verschil tussen de drie uitvoeropties?

JSX geeft je de kale svg-markup om in een component te plakken die je al hebt. React Component geeft je een complete module, inclusief imports en export, klaar om op te slaan als HomeIcon.tsx of HomeIcon.jsx. SVG String (TypeScript) is een .ts-module die de markup als gewone string exporteert, om te injecteren in HTML, e-mailsjablonen of alles wat geen React is.

Accepteert de component props zoals className en onClick?

Ja, zolang Props doorgeven aanstaat. De component neemt React.SVGProps<SVGSVGElement> aan en spreidt die over het svg-hoofdelement, na de attributen uit het bestand, dus className, style, onClick, width en aria-label werken allemaal en overschrijven wat er in het bestand stond. Zet ook forwardRef aan en een ref bereikt het svg-element zelf.

Wat verandert currentColor gebruiken?

Elke fill en stroke die een kleur noemt, wordt vervangen door currentColor, zodat het werk wordt getekend in de kleur waar de CSS-eigenschap color op uitkomt en color="red" doorgeven aan de component gewoon werkt. fill="none" blijft ongemoeid, en blijft "niet tekenen" betekenen. Het staat standaard uit, want een illustratie met meerdere kleuren klapt samen tot één kleur zodra je het inschakelt.