⚛️ SVG til React JSX-konverterer

Lim inn SVG-markup for å konvertere det til JSX du kan bruke direkte i en React-komponent. Den gjør attributter til camelCase (class→className), gjør style-strengen om til et objekt, og fjerner kommentarer og DOCTYPE.

SVG-inndata

React JSX-utdata

Flere utviklerverktøy

🎨 LESS til CSS-kompilator 🖼️ Base64 bildekonverterer 🔠 Case-konverterer

GUIDE

Les mer

1. Hvorfor konvertere SVG til JSX

React-syntaks (JSX) skiller seg litt fra HTML/SVG. Attributter med bindestrek (stroke-width) må gjøres om til camelCase (strokeWidth), class blir className, og style må være et JavaScript-objekt i stedet for en streng. Dette verktøyet konverterer disse forskjellene automatisk, slik at en SVG-ikon eksportert av en designer kan limes rett inn i en React-komponent.

2. Regler for konvertering

Den mapper class→className og for→htmlFor, gjør attributter med bindestrek som stroke-width og fill-opacity om til camelCase, konverterer navnerom-attributter som xlink:href til xlinkHref, og lar data-/aria- attributter være som de er. style="fill:red;stroke-linecap:round" blir objektet style={{ fill: 'red', strokeLinecap: 'round' }}, mens kommentarer, DOCTYPE og XML-deklarasjonen fjernes.

3. Sikker konvertering med DOMParser

I stedet for regex parser dette verktøyet faktisk SVG-en med nettleserens DOMParser og serialiserer den på nytt, slik at nestet struktur og attributter håndteres riktig. Alt kjører i nettleseren din, og koden sendes aldri til en server. Etter at du har limt resultatet inn i en komponent, kan du finjustere det ved behov — for eksempel flytte width/height til props eller bytte fill til "currentColor".

Vanlige sporsmal

Kan jeg bruke resultatet direkte i React?

Ja. Lim inn JSX-en i componentens return. Du kan også flytte størrelse og farge til props for å gjøre den mer gjenbrukbar.

Blir style-strengen også konvertert?

Ja. En streng som style="a:b;c:d" blir til objektet style={{ a: 'b', c: 'd' }} med CSS-egenskapsnavn i camelCase.

Blir SVG-en min sendt til en server?

Nei. Konverteringen skjer helt i nettleseren din, og koden sendes aldri til en server.

Bruker det et bibliotek som svgr?

Nei. Det er implementert direkte med nettleserens innebygde DOMParser, uten noe eksternt bibliotek.