Convert SVG to JSX for React
Paste raw SVG and get JSX that compiles in React. This tool camel-cases attributes like stroke-width and xlink:href, renames class to className and for to htmlFor, turns an inline style string into a style object, self-closes empty elements, and converts HTML comments to JSX comments. Toggle the component wrapper to get a ready-to-use React component. Everything runs in your browser, so your markup is never uploaded.
How to convert SVG to JSX
- Paste your SVG markup into the input box.
- Optionally name the component and turn on the component wrapper.
- Copy the JSX and paste it straight into your React file.
Examples
Icon attributes to JSX
<path stroke-width="2" fill-rule="evenodd" d="M0 0h24v24H0z"/>
<path strokeWidth="2" fillRule="evenodd" d="M0 0h24v24H0z" />
Frequently asked questions
Why does SVG not work directly in React?
JSX is not HTML. SVG uses hyphenated and namespaced attributes like stroke-width and xlink:href, reserved words like class and for, and inline style strings, all of which JSX rejects. This tool rewrites those into the camelCased names, className, htmlFor and style objects that React expects.
What exactly does it convert?
It camel-cases hyphenated and colon attributes (stroke-width to strokeWidth, xlink:href to xlinkHref), maps class to className and for to htmlFor, converts a style string to a JSX style object with camelCased CSS properties, self-closes empty elements such as path and circle, and turns HTML comments into JSX comments. data-* and aria-* attributes are left as is.
Can it wrap the SVG in a React component?
Yes. Turn on the component wrapper and the output becomes an exported function component that returns the SVG, using the component name you choose. Leave it off to get just the converted JSX to drop into existing markup.
Is my SVG uploaded anywhere?
No. The conversion runs entirely in your browser as you type. Nothing is sent to a server, so private or proprietary artwork stays on your device.
Does it minify or optimize the SVG?
No. It only rewrites the markup so it is valid JSX, leaving your paths, viewBox and structure unchanged. To shrink the file first, optimize the SVG separately, then paste the result here.
Related tools
HTML to JSX
Convert HTML to JSX for React. Rename class and for, camelCase attributes and events, turn inline styles into objects and self-close void tags.
CSS Formatter
Beautify and format messy or minified CSS online. Indent rules, put one declaration per line and tidy spacing. Runs in your browser.
JSON Formatter
Format, validate and minify JSON online. Pretty-print with custom indentation, sort keys and catch syntax errors. Runs in your browser.
.env to JSON
Convert a .env file to JSON, or JSON back to .env. Parses KEY=value lines, comments, quotes and export. Runs entirely in your browser.
ASCII Table
Full ASCII table for all 128 codes with decimal, hex, octal and binary values, character names and descriptions. Search by code, hex or character.
Aspect Ratio Box Generator
Generate CSS for a responsive aspect-ratio container. Use the modern aspect-ratio property or the padding-top fallback, then copy the ready code.