Drop an SVG file into a React component
Design tools export SVG with HTML-invalid attributes. Here is the fast way to turn that markup into a JSX component that actually compiles.
Tools used in this guide
The job
Figma exports <svg class="icon" stroke-width="2" xlink:href="#a"> — JSX rejects all three of those attributes. Renaming by hand is fine for one icon; it is tedious for a whole set.
Convert it
Paste the SVG into the converter. It rewrites class→className, stroke-width→strokeWidth, xlink:href→href, moves style strings into objects, and wraps everything in a named function component. Enable the TypeScript option to get a props type that forwards ...rest onto the svg element.
Worked example
<svg viewBox="0 0 24 24" stroke-width="1.5"><path d="M4 6h16"/></svg> becomes a component whose output is <svg viewBox="0 0 24 24" strokeWidth={1.5}><path d="M4 6h16"/></svg> — drop it in, pass className or style through ...rest, done.
Limits
Comments and processing instructions are dropped; scripts inside the SVG are left as elements but will not run under JSX — strip them yourself. Malformed XML is rejected with a position instead of emitting partial JSX. For smaller payloads, run the SVG minifier first.