SVG to JSX Converter
Paste raw SVG markup to instantly convert it into a React JSX component, with kebab-case attributes like fill-rule and stroke-width renamed to their camelCase equivalents. Free online developer tool.
Paste SVG Markup
JSX Component
JSX component will appear here...
Free SVG to JSX Converter
Paste raw SVG markup to instantly convert it into a React JSX component. Kebab-case SVG attributes like fill-rule and stroke-width are renamed to their camelCase JSX equivalents (fillRule, strokeWidth), and class becomesclassName, so the output drops straight into a React component.
How to Use It
Paste any SVG markup into the input box, or click "Load Example" to see a sample icon run through the converter. The tool parses the markup with the browser's native DOM parser, walks the resulting element tree, and emits a JSX component function with props spread onto the root<svg> element so you can pass through className, onClick, and other standard props.
Example
An input attribute like fill-rule="evenodd" becomes fillRule="evenodd",stroke-width="1.5" becomes strokeWidth="1.5", andclass="icon-path" becomes className="icon-path" — all other attributes and the element structure are preserved exactly.
Common Use Cases
- Converting icons exported from Figma or Illustrator into reusable React components.
- Bringing third-party SVG assets into a React codebase without manual attribute renaming.
- Building an icon component library from a folder of raw
.svgfiles. - Avoiding React's "unknown DOM attribute" console warnings caused by pasting raw SVG into JSX.
FAQs
Which attributes get renamed?
Common SVG presentation attributes (fill-rule, clip-rule, stroke-width,stroke-linecap, font-family, xlink:href, and more) are mapped to their exact React/JSX camelCase equivalents. Any other kebab-case attribute without a known mapping is still camelCased automatically rather than dropped, and class always becomesclassName.
Does it handle nested groups and gradients?
Yes — the converter walks the entire element tree recursively, so nested <g>,<defs>, <linearGradient>, and other child elements are all converted and indented to match their depth in the original markup.
Is my SVG uploaded anywhere?
No — parsing and conversion happen entirely client-side in your browser using the native DOM parser. Nothing you paste is sent to a server.