SVG to React Component Converter
Paste raw SVG and get a React functional component, with attributes converted to JSX (className, camelCase, style objects) and props spread onto the root. Runs in your browser.
⚠ DOMParser is not defined
About this tool
Dropping raw SVG markup straight into JSX does not work: React uses DOM property names, not HTML/SVG attribute names, so class must become className, hyphenated attributes like stroke-width become strokeWidth, and an inline style string must become a style object. This converter parses your SVG with the browser's own SVG parser and re-emits it as a clean React functional component, doing all of those renames automatically and spreading {...props} onto the root <svg> so the component accepts size, color, className, and event handlers from the outside. It can emit a TypeScript signature typed as React.SVGProps<SVGSVGElement>, or plain JSX. data-* and aria-* attributes are left untouched, as JSX expects. The result is a reusable icon or illustration component you can paste straight into a project. Conversion happens entirely in your browser using the native parser, so it matches how the browser actually reads your SVG and nothing is uploaded.
How to use it
- Paste your SVG markup.
- Set the component name and choose TypeScript or plain JSX.
- Copy the generated component into your project.
- Use it like <Icon width={32} stroke="blue" /> — props pass through to the SVG.
Frequently asked questions
- Why can't I just paste SVG into a React component?
- JSX uses DOM property names, so SVG attributes need renaming: class → className, stroke-width → strokeWidth, fill-rule → fillRule, and inline style strings must become objects. Pasted raw, those attributes are invalid or ignored. This tool performs every conversion.
- What is the {...props} spread for?
- It forwards any props you pass to the component onto the root <svg> element, so a single icon component can be resized, recolored, given a className, or wired to onClick without editing the SVG. Spreading last lets callers override the defaults.
- How are inline styles handled?
- A style="fill:red;stroke-width:2" attribute becomes a JSX style object: style={{ fill: "red", strokeWidth: "2" }}, with CSS property names camelCased as React requires.
- Are data- and aria- attributes changed?
- No. JSX keeps data-* and aria-* attributes hyphenated, so the converter leaves them exactly as written while camelCasing the other attributes.
- Does it use currentColor for theming?
- It preserves whatever your SVG already uses. If your SVG sets stroke="currentColor" or fill="currentColor", the component inherits the surrounding text color — a common pattern for themeable icons. Edit the source SVG to add it if needed.
- Is my SVG uploaded?
- No. The SVG is parsed and converted entirely in your browser with the native parser, so nothing is sent anywhere.