Convert SVG to a React component
Paste SVG code or drop a file and get a ready-to-use React component. Attributes are converted to their JSX names (stroke-width → strokeWidth, class → className), inline styles become style objects, and props are spread onto the root <svg> so you can size and color it from your app.
How to use it
- 1
Drop an SVG file or paste its code.
- 2
Pick JavaScript (JSX) or TypeScript (TSX) and name the component.
- 3
Copy the component or download it as a .jsx / .tsx file.
Questions
What does the converter change?
SVG attributes become JSX props (fill-rule → fillRule, xlink:href → xlinkHref, class → className), style strings become objects, and comments and XML declarations are dropped. Everything else — gradients, masks, filters — is kept.
How do I change the icon's size or color?
The component spreads its props onto the <svg>, so <Icon width={32} className="text-blue-500" /> works. For color, set fill or stroke to currentColor in the source SVG and it follows the CSS text color.
Does it work with React Native?
The output targets React for the web. React Native needs react-native-svg components, which use different element names.
Is my SVG uploaded?
No. The conversion runs in your browser; nothing is sent anywhere.
More free SVG tools
Need more than one change?
The Splice editor edits SVGs visually — shapes, text, colors, layers — across many files at once, with the code in sync.
Open the editor