SVG to JSX / React Component
Paste raw SVG markup and get a ready-to-use React component
Component will appear here…About this tool
The SVG to JSX converter parses raw SVG markup with the browser's native DOMParser and rebuilds it as a complete, ready-to-use React functional component — every attribute translated to its correct JSX form: kebab-case becomes camelCase (stroke-width → strokeWidth), namespaced attributes convert the same way (xlink:href → xlinkHref), and data-*/aria-* attributes are left exactly as written, since JSX specifically keeps those in their original hyphenated form rather than camelCasing them like everything else. The root <svg> element spreads {...props} automatically, so the generated component's size, color, and event handlers stay fully overridable by whoever uses it — exactly how a hand-written icon component is normally structured.
When to use it
- →Converting an exported SVG icon from Figma or Illustrator into a usable React component
- →Building out an icon component library from a folder of raw SVG files
- →Understanding exactly which SVG attributes need to change for JSX versus which stay the same
- →Quickly turning a one-off SVG (a logo, a custom shape) into a component without installing SVGR
Tips
- ◆data-* and aria-* attributes are deliberately left unconverted — writing them as camelCase (e.g. dataFoo) in real JSX would actually render as a non-standard attribute, not the data-foo the browser expects.
- ◆Numeric attribute values (cx="12") are converted to JSX number expressions (cx={12}) rather than strings, matching how hand-written SVG React components are typically styled.
- ◆xmlns and xmlns:xlink declarations are dropped from the output — React's JSX runtime handles the SVG/XLink namespaces automatically, so keeping them is unnecessary noise.
Frequently asked questions
Why does the output drop the xmlns attribute?
xmlns (and xmlns:xlink) declarations tell a raw XML parser which namespace an element belongs to — necessary when an .svg file stands alone, but redundant inside a React component, where the JSX runtime already knows it's rendering SVG elements and handles the relevant namespaces itself.
Will this work for SVGs with inline <style> or <script> tags?
The structural conversion (tags, attributes, nesting) works the same way, but note that a <script> tag inside SVG markup won't execute via React/JSX the way it might in a raw HTML context — and generally, hand-authored icon SVGs rarely include one. A <style> block converts structurally but its content is left as literal CSS text, not a JSX style object.
Does the generated component accept a className or style prop?
Yes — because the root <svg> spreads {...props}, any prop you pass when using the component (className, style, onClick, width, height, fill) gets applied to the root element exactly as it would on a plain <svg> tag.