Paste SVG
Add the SVG markup.
Code & Data Tool
SVG to JSX
Convert common SVG attributes to JSX-compatible attributes.
Loading workspace...
About this tool
What is SVG to JSX?
SVG to JSX converts common SVG attributes into JSX-compatible ones, such as class to className and stroke-width to strokeWidth, so you can use an SVG inside a React component.
Useful when you need to
- Use an exported icon in React
- Fix attribute errors in JSX
- Learn JSX attribute naming
How to use
How to use SVG to JSX
01 02 Convert
Run the tool.
03 Review
Check attributes and any inline styles.
04 Copy
Paste into your component.
Tips
Get better results
- Inline style strings may need converting to objects.
- Remove fixed width and height if you want it to scale.
FAQ
Frequently asked questions
Does it handle every attribute?
It handles common ones. Check unusual attributes.
Is it private?
Yes.
Does it create a component?
It converts the markup. You wrap it in a component yourself.
More practical guides · File handling and privacy · Report an incorrect instruction