Hand converting an SVG into JSX is tedious and error prone precisely because SVG and HTML attributes look almost identical to JSX but are not. `class` has to become `className`, `stroke-width` has to become `strokeWidth`, a `style` string has to become an object, and self closing tags that HTML tolerates loosely have to be written exactly right or React throws at render time. A script that gets even one of those wrong produces a component that looks correct until it silently fails to style.
Nothing leaves your browser. The SVG text is parsed and rewritten locally using the same DOM parsing the browser already ships with, so a proprietary icon set or an unreleased logo never touches a server. That makes this a genuinely private way to convert svg to react components for a design system or icon library.
What this svg to react component converter actually rewrites
Four categories of change happen on every conversion. Attribute names move from kebab case to camelCase, so `fill-rule` becomes `fillRule` and `stroke-linecap` becomes `strokeLinecap`. The reserved word `class` becomes `className` and `for` becomes `htmlFor` wherever either appears, since both are reserved identifiers in JavaScript. Inline `style="fill:#000;stroke-width:2"` strings are parsed into an object literal, `{ fill: '#000', strokeWidth: 2 }`, because JSX only accepts style as an object, never a string. Finally, every tag that SVG allows to be unclosed, and HTML tolerates being unclosed, is rewritten as an explicit self closing tag, because JSX has no concept of an optional closing tag.
The converter also strips attributes that only make sense in a static file and not inside a component, such as an `xmlns` declaration on the root element when it is not needed, while leaving the visual attributes, the `viewBox`, and any `id` used by an internal `<defs>` reference completely untouched, since removing those would break the icon.
- class and for become className and htmlFor.
- Every hyphenated attribute becomes camelCase, for example stroke-width to strokeWidth.
- Inline style strings become JSX style objects with camelCase keys.
- Self closing tags are normalised so React never throws an unclosed tag error.
- Comments and processing instructions from design tools are removed.
Choosing the output options
Component name sets the function name and the default export. Use PascalCase, for example ArrowIcon, since a lowercase name would make React treat the tag as a plain DOM element instead of a component.
TypeScript adds a typed props interface extending SVGProps<SVGSVGElement> from React, so every standard SVG and DOM prop is available with full autocomplete, and the file is emitted with a .tsx extension instead of .jsx. This is the option to reach for whenever you need a typescript svg component that catches a misspelled prop at compile time instead of at runtime.
Forward ref wraps the component in React.forwardRef so a parent can attach a ref directly to the underlying svg element, which matters for measuring the icon or triggering a CSS animation imperatively.
Prop spreading adds {...props} onto the root svg element so callers can pass an onClick handler, an aria-label, or an extra className without you having to declare every prop by name.
Memo wraps the export in React.memo, which is worth enabling for an icon that renders inside a long list, since it skips re rendering the icon when its props have not changed.
Common svg to jsx mistakes this tool avoids
A find and replace script that only swaps class for className will still produce broken output, because it misses hyphenated attributes entirely and often corrupts a style string that happens to contain the word class inside a selector or a data attribute value. This converter parses the SVG as a real DOM tree using DOMParser rather than treating it as text, so a hyphen inside a URL, a gradient id, or a path's d attribute is never mistaken for an attribute name and rewritten by accident.
The other common failure is losing the viewBox or clipping definitions referenced by an id inside a <defs> block. Because the parser walks the actual element tree rather than pattern matching strings, ids, references and nested defs survive the conversion exactly as authored, so a multi color icon with a clip path still renders correctly as a react svg component.
How the SVG to JSX conversion works under the hood
The browser's built in DOMParser reads the SVG text into a real, walkable node tree, exactly the way it would parse a full HTML page. The converter then recurses through that tree, rewriting each element's tag name, translating every attribute through a lookup table of the roughly 150 SVG attributes that differ between HTML and JSX, and serialising the result back into a string with two space indentation.
That architecture is what makes the tool trustworthy on unusual SVGs. A hand written script based on regular expressions has to guess where one attribute ends and another begins, and gets confused by SVG content that legitimately contains hyphens, quotes or angle brackets inside path data or CSS. Walking the real DOM removes the guessing entirely, at the cost of only running in a browser rather than a build tool, which is exactly where this page runs.
Using the generated component in your project
Save the output as a .tsx or .jsx file with the same name as the component, drop it into your icons or components folder, and import it like any other component. Because the sizing comes from the original width, height and viewBox attributes, the icon scales the same way it did as a static file, and you can still override width, height, fill or className from the parent through the props it now accepts.
For an icon library with dozens of files, convert one SVG at a time and keep the component name aligned with the source filename, so a design tool export named arrow-right.svg becomes ArrowRightIcon.tsx and stays easy to find later.
| SVG attribute | JSX prop | Notes |
|---|---|---|
| class | className | class is a reserved word in JavaScript |
| stroke-width | strokeWidth | Every hyphenated attribute becomes camelCase |
| style="fill:red" | style={{ fill: 'red' }} | JSX style must be an object, never a string |
| <path> | <path /> | Every element must be explicitly self closed |
| xlink:href | xlinkHref | Namespaced attributes collapse to a single camelCase prop |
How to convert SVG to a React component
- 1
Add your SVG
Paste raw SVG markup into the text box, or drop an .svg file onto the upload area. Nothing is uploaded to a server.
- 2
Name the component
Type a PascalCase name such as LogoIcon. This becomes the function name and the default export.
- 3
Choose your output options
Toggle TypeScript, forwardRef, prop spreading and React.memo depending on how the component will be used.
- 4
Copy or download the component
Review the generated JSX in the preview, then copy it to your clipboard or download it as a .tsx or .jsx file.
Related tools worth bookmarking
Sources and further reading
- React docs: Writing markup with JSXThe official React explanation of why JSX requires camelCase attributes and a style object instead of a string.react.dev
- MDN: DOMParserThe browser API this converter uses to parse SVG markup into a real, walkable element tree.developer.mozilla.org
- W3C: Scalable Vector Graphics specificationThe official SVG specification, covering the attributes and elements this converter reads and rewrites.w3.org
Frequently asked questions
Common questions about the svg to react component converter.
No. Parsing and rewriting happen entirely in your browser using the built in DOMParser. Your SVG markup, including any proprietary logo or unreleased icon, is never sent to a server, stored anywhere or seen by anyone other than you.
Yes. The tool parses the SVG as a real DOM tree rather than using text replacement, so ids referenced by clip-path, mask or a linear gradient fill are preserved exactly as authored. Nested defs blocks and their references survive the conversion intact.
A TSX file includes a generated props interface that extends React's SVGProps type, giving you autocomplete and type checking for every prop the component accepts. A JSX file is the same component without that interface, for projects that are not using TypeScript.
class is a reserved word in JavaScript, so JSX uses className to set the CSS class attribute instead. The converter renames every occurrence automatically, along with the related for to htmlFor rename and every hyphenated SVG attribute that JSX requires in camelCase form.
Enable it when a parent component needs direct access to the underlying svg element, for example to measure its size or trigger a CSS animation with a ref. For a simple decorative icon rendered inline, forwardRef adds complexity with no benefit, so leaving it off keeps the component simpler.
Yes. Design tool exports often include editor specific namespaces and comments that this converter strips automatically, leaving only the attributes that affect rendering. If the export still looks cluttered, running it through the svg optimizer first produces cleaner input and a smaller resulting component.