⚛️ SVG till React JSX-omvandlare

Klistra in SVG-markup för att konvertera det till JSX som du kan lägga direkt i en React-komponent. Den omvandlar attribut till camelCase (class→className), gör style-strängen till ett objekt och tar bort kommentarer och DOCTYPE.

SVG-inmatning

React JSX-utdata

Fler utvecklarverktyg

🎨 LESS till CSS-kompilator 🖼️ Base64-bildomvandlare 🔠 Skiftlägesomvandlare

GUIDE

Las mer

1. Varför konvertera SVG till JSX

React-syntaxen (JSX) skiljer sig något från HTML/SVG. Attribut med bindestreck (stroke-width) måste skrivas i camelCase (strokeWidth), class blir className, och style måste vara ett JavaScript-objekt i stället för en sträng. Det här verktyget konverterar dessa skillnader automatiskt, så att en SVG-ikon som exporteras av en designer kan klistras in direkt i en React-komponent.

2. Konverteringsregler

Det mappar class→className och for→htmlFor, omvandlar bindestrecksattribut som stroke-width och fill-opacity till camelCase, konverterar namnområdesattribut som xlink:href till xlinkHref och lämnar data-/aria-attribut som de är. style="fill:red;stroke-linecap:round" blir objektet style={{ fill: 'red', strokeLinecap: 'round' }}, medan kommentarer, DOCTYPE och XML-deklarationen tas bort.

3. Säker konvertering med DOMParser

I stället för regex analyserar verktyget faktiskt SVG:n med webbläsarens DOMParser och serialiserar om den, så att nästlad struktur och attribut hanteras korrekt. Allt körs i din webbläsare och koden skickas aldrig till en server. Efter att du klistrat in resultatet i en komponent kan du justera det efter behov - till exempel flytta width/height till props eller byta fill till "currentColor".

Vanliga fragor

Kan jag använda resultatet direkt i React?

Ja. Klistra in JSX:en i komponentens return. Du kan också lyfta storlek och färg till props för att göra den mer återanvändbar.

Konverteras style-strängen också?

Ja. En sträng som style="a:b;c:d" blir objektet style={{ a: 'b', c: 'd' }} med CSS-egenskaper i camelCase.

Skickas min SVG till en server?

Nej. Konverteringen körs helt i din webbläsare och koden skickas aldrig till en server.

Använder det ett bibliotek som svgr?

Nej. Det är implementerat direkt med webbläsarens inbyggda DOMParser, utan något externt bibliotek.