SVG to JSX Converter (React & React Native)
Turn an SVG file into a React component: camelCase attributes, className, style objects, {...props}, TypeScript, or react-native-svg elements.
Use it as <StarIcon /> — props such as className, width or onClick are passed to the <svg>. With React 17+ no React import is needed.
Pasting an SVG straight into a React component fails: class must become className, stroke-width must become strokeWidth, style must be an object, and editor leftovers such as inkscape:label are not valid JSX at all. This converter reads the SVG as XML and writes clean JSX — as a ready-to-use React component that passes its props to the <svg>, as TypeScript, as a React Native component built on react-native-svg, or as bare JSX to paste into your own markup.
How to use this tool
- Open the .svg file in a text editor, copy everything and paste it here.
- Choose React, React Native or JSX only, and type a component name.
- Decide how width and height are handled — 1em makes an icon follow the font size.
- Copy the code into a .jsx or .tsx file and import the component.
Formula
class → className · stroke-width → strokeWidth · xlink:href → xlinkHref · style="a:b" → style={{ a: "b" }}
Hyphenated SVG attributes become camelCase, the names React uses; data-* and aria-* stay as they are. Attributes with editor prefixes (inkscape:, sodipodi:, sketch:) and their namespace declarations are removed, because JSX has no prefixed names. Text that contains { } < > or & is written as a string expression so it is shown exactly. Inline event handlers and <script> are removed. Values are never changed.
Example
The sample star icon becomes const StarIcon = (props) => (…) with 7 elements: class="icon" turns into className="icon", stop-color into stopColor, stroke-width="1.5" into strokeWidth="1.5", and style="opacity:0.9;mix-blend-mode:multiply" into style={{ opacity: "0.9", mixBlendMode: "multiply" }}. {...props} is added last, so <StarIcon width={48} /> overrides the size.
Frequently asked questions
Why is {...props} added at the end?
Props listed later win in JSX, so anything you pass — className, width, onClick, aria-label — overrides what the SVG file had. Turn it off if the icon must never change.
What is the 1em option for?
With width and height set to 1em the icon is exactly as tall as the surrounding text and follows font-size, which is how icon libraries usually work.
Does React Native support every SVG feature?
No. react-native-svg draws shapes, text, gradients, masks, patterns and some filters, but not <style>, CSS classes, <title> or animations. Those are removed and listed in the notes.
Is my SVG uploaded?
No. The conversion runs in your browser.
Sources
Last updated:
Page address with these inputs: https://kakao.mobile/tools/svg-to-jsx-converter/
Cite or embed this tool
kakaoCalc. (2026, November 8). SVG to JSX Converter (React & React Native). https://kakao.mobile/tools/svg-to-jsx-converter/
“SVG to JSX Converter (React & React Native).” kakaoCalc, 8 Nov. 2026, kakao.mobile/tools/svg-to-jsx-converter/.
Paste this code into your page. The widget runs in your visitors' browsers, shows no ads and keeps a link back to this page. Embedding terms