SVG-naar-JSX-converter

Wat is SVG-naar-JSX-converter?

De SVG-naar-JSX-converter is een gratis tool in de browser die gewone SVG-markup omzet naar geldige React-JSX die je direct in een component kunt plakken. React verwacht DOM-attributen in camelCase (strokeWidth, clipPath, fillRule), gebruikt className in plaats van class en heeft het style-attribuut nodig als object met camelCase-eigenschappen in plaats van een string — deze tool corrigeert dat allemaal automatisch. Front-endontwikkelaars en ontwerpers gebruiken hem bij het exporteren van iconen uit Figma, Illustrator of een iconenset. Zet de optionele opschoning aan om commentaar, editor-metadata en XML-declaraties te verwijderen, en kies of de uitvoer inline-JSX is of een met React.SVGProps getypeerd functie-, memo()- of forwardRef-component.

SVG-naar-JSX-converter gebruiken

1. Plak je SVG-markup in het invoervak, of sleep een .svg-bestand naar de sleepzone.
2. Lees de omgezette JSX in het uitvoervak — attributen staan in camelCase, class wordt className, een inline style wordt een style-object en lege tags worden zelfsluitend.
3. Open Instellingen en kies een Componentuitvoer: inline-JSX, een functiecomponent, een memo()-component of een forwardRef-component.
4. Stel het veld Componentnaam in om de naam te bepalen die in de wrapper wordt gebruikt (bijvoorbeeld MyIcon).
5. Schakel TypeScript-props in om het component te typeren met React.SVGProps, of zet SVG opschonen aan om eerst commentaar en editor-metadata te verwijderen.
6. Klik op Kopiëren om de JSX te kopiëren en plak het vervolgens in je React- of Next.js-project.

Voorbeelden

<svg viewBox="0 0 24 24"><path stroke-width="2" style="fill:none;stroke-linecap:round" d="M4 12h16"/></svg>

<svg viewBox="0 0 24 24"><path strokeWidth="2" style={{ fill: "none", strokeLinecap: "round" }} d="M4 12h16" /></svg>

<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/></svg>

export const MyIcon = React.forwardRef<SVGSVGElement, React.SVGProps<SVGSVGElement>>(function MyIcon(props, ref) {
  return (
    <svg viewBox="0 0 24 24" ref={ref} {...props}><circle cx="12" cy="12" r="10" /></svg>
  );
});

Veelgestelde vragen

Wat verandert de converter aan mijn SVG?

Hij hernoemt attributen met koppelteken en met namespace naar Reacts camelCase-vorm (stroke-width naar strokeWidth, xlink:href naar xlinkHref), zet class om naar className, herschrijft een inline style-string naar een JSX-style-object met camelCase-sleutels en maakt lege elementen zoals path en rect zelfsluitend, zodat ze geldige JSX zijn.

Hoe werken de opties voor componentuitvoer?

Kies inline-JSX om de markup overal te plaatsen, of verpak het als functie-, memo()- of forwardRef-component met de Componentnaam die je invoert. Een forwardRef-component krijgt een ref die aan de root-svg wordt gekoppeld. Schakel TypeScript-props in om elke wrapper te typeren met React.SVGProps en {...props} te spreiden.

Zet het inline-stijlen om?

Ja. Een attribuut style="fill:red;stroke-width:2" wordt herschreven naar een JSX-style-object als style={{ fill: "red", strokeWidth: "2" }}, met eigenschapsnamen in camelCase en waarden als strings. CSS-custom-properties (--var) blijven behouden als string-sleutels.

Wat doet de SVGO-achtige opschoning?

Als SVG opschonen aanstaat, verwijdert de tool XML-declaraties, DOCTYPE, commentaar, <metadata>, editor-namespaces zoals inkscape: en sodipodi:, en het version-attribuut van de svg, en vouwt daarna witruimte samen — allemaal voordat de JSX-omzetting draait.

Wordt mijn SVG ergens geüpload?

Nee. Een bestand slepen of markup plakken voert een pure string-transformatie volledig in je browser uit, dus je SVG wordt nooit naar een server gestuurd en de tool werkt offline.