Micro Tools
Advertisement

SVG to JSX

Paste SVG markup and convert it into JSX ready for React. Hyphenated attributes become camelCase, class becomes className, comments become JSX comments and shapes self-close.

SVG to JSX

Paste SVG markup below.

Advertisement

How the conversion works

The converter rewrites every SVG attribute to its React DOM equivalent: stroke-width becomes strokeWidth, fill-rule becomes fillRule, and class becomes className. HTML comments turn into {/* */} blocks, and empty shapes like path and circle are self-closed so JSX parses them.

From file to component

Export an icon from Figma or Illustrator, paste the SVG here, and drop the JSX into a component file. Wrap it in a function returning the markup and you have a reusable React icon with props for size and color.

Related tools

JSON formatterFormat and validate JSON, privately. Regex testerTest regex live with highlighting. Base64 encoderBase64 encode and decode, plus URL encoder and JWT decoder.

SVG to JSX FAQs

Why does React need camelCase attributes?
React DOM uses JavaScript property names, so stroke-width is not a valid prop. The converter maps every hyphenated SVG attribute to its camelCase form automatically.
Are xlink:href attributes handled?
Yes. xlink:href becomes xlinkHref, which is the prop name React expects for legacy SVG references.
What about the xmlns attribute?
xmlns is kept as written. It is harmless inside JSX and keeps the markup valid if you copy it back into a standalone SVG file.
Do I need to wrap the output?
The output is a JSX fragment you can return directly from a component. Add your own function wrapper, props and viewBox scaling as needed.
Is my SVG uploaded?
No. Conversion runs entirely in your browser, so proprietary icons and illustrations never leave your device.
Advertisement