⚛️ SVG naar React JSX-converter

Plak SVG-markup om die om te zetten naar JSX die je direct in een React-component kunt gebruiken. Attributen worden camelCase gemaakt (class→className), de style-string wordt een object en comments en DOCTYPE worden verwijderd.

SVG-invoer

React JSX-uitvoer

Meer ontwikkelaarstools

🎨 LESS naar CSS Compiler 🖼️ Base64 Afbeeldingsconverter 🔠 Hoofdletterconverter

GIDS

Meer lezen

1. Waarom SVG naar JSX omzetten

React-syntaxis (JSX) verschilt iets van HTML/SVG. Aaneengeschakelde attributen (stroke-width) moeten camelCase worden (strokeWidth), class wordt className, en style moet een JavaScript-object zijn in plaats van een string. Deze tool zet die verschillen automatisch om, zodat een door een ontwerper geëxporteerd SVG-icoon direct in een React-component kan worden geplakt.

2. Conversieregels

De tool zet class→className en for→htmlFor om, maakt hyphenated attributen zoals stroke-width en fill-opacity camelCase, zet genamespaceerde attributen zoals xlink:href om naar xlinkHref, en laat data-/aria- attributen ongewijzigd. style="fill:red;stroke-linecap:round" wordt het object style={{ fill: 'red', strokeLinecap: 'round' }}, terwijl comments, DOCTYPE en de XML-declaratie worden verwijderd.

3. Veilige conversie met DOMParser

In plaats van regex parseert deze tool de SVG echt met de ingebouwde DOMParser van de browser en serialiseert die opnieuw, zodat geneste structuur en attributen correct worden verwerkt. Alles draait in je browser en de code wordt nooit naar een server gestuurd. Na het plakken van het resultaat in een component kun je het verder verfijnen, bijvoorbeeld width/height naar props verplaatsen of fill aanpassen naar "currentColor".

Veelgestelde vragen

Kan ik de uitvoer direct in React gebruiken?

Ja. Plak de JSX in de return van je component. Je kunt ook de grootte en kleur als props aanbieden om het herbruikbaarder te maken.

Wordt de style-string ook omgezet?

Ja. Een string zoals style="a:b;c:d" wordt het object style={{ a: 'b', c: 'd' }} met CSS-propertynamen in camelCase.

Wordt mijn SVG naar een server gestuurd?

Nee. De conversie gebeurt volledig in je browser en de code wordt nooit naar een server gestuurd.

Gebruikt het een library zoals svgr?

Nee. Het is rechtstreeks geïmplementeerd met de ingebouwde DOMParser van de browser, zonder externe library.