Free Developer Tool
SVG to JSX
Transform SVG markup into React-compatible JSX syntax.
What is SVG to JSX?
Convert standard SVG markup into JSX syntax for use in React applications. The tool converts SVG attributes and syntax that differ between HTML-style SVG and JSX.
How to use
- Paste SVG markup.
- Convert the SVG to JSX.
- Review the React-compatible output.
- Copy the generated JSX.
Features
- SVG to JSX conversion
- React attribute conversion
- class to className conversion
- SVG attribute normalization
- Browser processing
Common Use Cases
- React development
- SVG icon conversion
- Building React components
- Frontend development
- Migrating SVG assets
Example
Input
<svg class="icon" stroke-width="2" viewBox="0 0 24 24"> <path stroke-linecap="round" d="M5 12h14"/> </svg>
Output
<svg className="icon" strokeWidth="2" viewBox="0 0 24 24"> <path strokeLinecap="round" d="M5 12h14" /> </svg>
FAQ
Can SVG attributes be converted to JSX?
Yes. SVG attributes that use HTML-style naming are converted to the corresponding JSX property names.
Does it convert class to className?
Yes.
Can the output be used in React?
Yes. The generated markup is designed for use inside React JSX components.
Missing a feature?
If this tool doesn't cover your use case or is missing functionality, please let me know through the Contact page.
New improvements and features are added based on user feedback.