SVG to JSX Converter
Turn any SVG file into a ready-to-drop React component. Converts kebab-case attributes to camelCase, class to className, inline styles to style objects, and wraps everything in a functional component with optional TypeScript typings and spread props.
Paste SVG above — React component appears here.About SVG to JSX Converter
React does not accept SVG the way HTML does — attributes need to be camelCase (fill-opacity becomes fillOpacity), 'class' must be renamed to 'className', inline styles need to be JSX objects rather than string values, and reserved JavaScript keywords like 'for' become 'htmlFor'. Copying an SVG from Figma, Inkscape, or a designer's export and pasting it into a React component throws parser errors — every attribute needs manual conversion. This SVG to JSX Converter automates the conversion in one paste.
The tool wraps the converted SVG in a functional React component with your chosen name, adds spread props to the root <svg> element (so callers can pass size, className, style, etc.), and optionally adds TypeScript typing (React.SVGProps<SVGSVGElement>). Inline styles are converted from CSS string format to JSX object format automatically. Data-* and aria-* attributes are preserved as-is because they use hyphens legally in JSX. Ideal for building custom icon components without an SVGR build step, one-off conversions from a design file, learning how JSX differs from SVG markup, and quickly prototyping icon libraries. The output is a complete .jsx or .tsx file — drop it into your project and import.
How to Use
Paste your SVG code into the input box — full <svg>...</svg> markup, ideally with proper opening and closing tags.
Set the component name. Use PascalCase (MyIcon, ArrowRight, LogoDark) — that is the JSX convention.
Toggle 'Spread props on root' if you want the component to accept size, className, and other props from callers. Recommended for icon components.
Toggle 'TypeScript' if your project uses .tsx files — it adds React.SVGProps<SVGSVGElement> typing.
Copy the output and paste into a new .jsx or .tsx file in your React project.
Frequently Asked Questions
Why does React require different attribute names than HTML?
React's JSX uses camelCase for attributes because that is how DOM property names are exposed in JavaScript. So fill-opacity (SVG attribute) becomes fillOpacity (DOM property). Similarly, class becomes className because 'class' is a reserved JavaScript keyword.
Does this handle animations, filters, and gradients?
Yes for the markup — all SVG tags convert correctly. But note: some SVG features like <animate> and complex filter chains sometimes need manual review when embedded in React because their IDs need to be unique per component instance. For icon libraries with animations, tools like SVGR are more thorough.
What is the difference between this tool and SVGR?
SVGR is a Node.js library used at build time (webpack/vite loaders). This tool is the browser-based one-off equivalent — paste and go, no install required. For occasional conversions or learning, use this. For a build pipeline with hundreds of icons, use SVGR.
Should I strip the width/height attributes for responsive icons?
Often yes — for icons that scale with font-size, remove width and height (or set them to 1em) and let the viewBox handle the shape. This tool leaves width/height as-is; edit the output if you want responsive icons.
Can I convert SVGs with embedded scripts or interactivity?
Technically yes, but SVGs with <script> tags are a security concern and React strips them anyway. If your SVG contains scripts, factor the behavior into your React component code — do not paste executable SVG.