SVG to JSX Converter

Q: What does the converter change about my SVG?

It applies the transformations JSX requires: class → className, for → htmlFor, hyphenated and colon attributes (stroke-width, xlink:href) become camelCase (strokeWidth, xlinkHref), inline style="..." strings become a style={{ ... }} object, and HTML comments become JSX comments. data-* and aria-* attributes are left unchanged.

Q: Can I pass props like className or an onClick to the generated component?

Yes. The generated component takes React.SVGProps and spreads {...props} onto the root , so any prop you pass — className, width, style, onClick, aria-label — is forwarded to the SVG.

Q: Is my SVG uploaded anywhere?

No. The conversion runs entirely client-side in your browser with plain JavaScript — the SVG never leaves your machine.

Q: Does it need a build step or the SVGR library?

No. This is a dependency-free string transform; the output is a plain .tsx React component you can paste directly into a project. It covers the common attribute/style/comment fixes rather than the full SVGO optimization pipeline.

Your SVG

Paste raw SVG markup (an icon export from Figma, Illustrator, or a design system) and get a ready-to-use React component back. The conversion fixes everything JSX requires: class becomes className, hyphenated and namespaced attributes like stroke-width and xlink:href become strokeWidth and xlinkHref, inline style strings become a style object,  become JSX comments, and the root <svg> spreads props so you can pass className, width, or event handlers. data-* and aria-* attributes are preserved as-is. Everything runs in your browser — nothing is uploaded.

SVG to JSX Converter

FAQ

What does the converter change about my SVG?

Can I pass props like className or an onClick to the generated component?

Is my SVG uploaded anywhere?

Does it need a build step or the SVGR library?

See also