⚛️ SVG til React JSX-konverter

Indsæt SVG-markup for at konvertere det til JSX, som du kan sætte direkte ind i en React-komponent. Den laver attributter om til camelCase (class→className), omdanner style-strengen til et objekt og fjerner kommentarer og DOCTYPE.

SVG-input

React JSX-output

Flere udviklerværktøjer

🎨 LESS til CSS-kompiler 🖼️ Base64-billedkonverter 🔠 Konvertering af store og små bogstaver

GUIDE

Laes mere

1. Hvorfor konvertere SVG til JSX

React-syntaks (JSX) adskiller sig en smule fra HTML/SVG. Attributter med bindestreger (stroke-width) skal skrives i camelCase (strokeWidth), class bliver til className, og style skal være et JavaScript-objekt i stedet for en streng. Dette værktøj konverterer automatisk disse forskelle, så en SVG-ikonfil eksporteret af en designer kan indsættes direkte i en React-komponent.

2. Konverteringsregler

Det mapper class→className og for→htmlFor, laver attributter med bindestreger om til camelCase som stroke-width og fill-opacity, konverterer navnerumsattributter som xlink:href til xlinkHref og lader data-/aria-attributter være uændrede. style="fill:red;stroke-linecap:round" bliver til objektet style={{ fill: 'red', strokeLinecap: 'round' }}, mens kommentarer, DOCTYPE og XML-deklarationen fjernes.

3. Sikker konvertering baseret på DOMParser

I stedet for regex parser dette værktøj faktisk SVG'en med browserens DOMParser og serialiserer den igen, så indlejret struktur og attributter håndteres korrekt. Alt kører i din browser, og koden sendes aldrig til en server. Når du har indsat resultatet i en komponent, kan du tilpasse det efter behov - f.eks. flytte width/height til props eller skifte fill til "currentColor".

Ofte stillede sporgsmal

Kan jeg bruge outputtet direkte i React?

Ja. Indsæt JSX'en i din components return. Du kan eventuelt flytte størrelse og farve til props for at gøre det mere genbrugeligt.

Bliver style-strengen også konverteret?

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

Sendes min SVG til en server?

Nej. Konverteringen sker udelukkende i din browser, og koden sendes aldrig til en server.

Bruger det et bibliotek som svgr?

Nej. Det er implementeret direkte med browserens indbyggede DOMParser, uden noget eksternt bibliotek.