handyman
Hazuu Tools

SVG to JSX Converter

Convert SVG markup to React JSX components — paste, configure, and copy instantly.

Input SVG · 0 chars
Output JSX
Converted JSX will appear here...
info

About SVG to JSX Converter

SVG to JSX Converter is a free online tool that transforms raw SVG markup into React-compatible JSX functional components. SVG files exported from Figma, Illustrator, or icon libraries contain HTML-style attributes that break in React: class must become className, stroke-width becomes strokeWidth, fill-rule becomes fillRule, and inline style strings must be rewritten as JavaScript style objects. This tool performs every one of those transformations automatically, wrapping the result in a named React component you can drop straight into your codebase.

Beyond attribute renaming, the converter gives you two workflow options. "Expand Props" adds {...props} to the root SVG element so callers can pass className, onClick, aria-label, or any other prop without modifying the component. "Optimize SVG" strips xmlns declarations, xml:space, version attributes, metadata elements, empty defs blocks, and XML comments — the cruft design-tool exports attach but React does not need. Both options can be toggled independently before you convert, so you get exactly the output your project requires.

Every conversion runs entirely in your browser using the native DOMParser. Your SVG code is never uploaded, logged, or transmitted to any server. That makes the tool safe for proprietary icon systems, client brand assets, and any graphic you are not ready to share publicly. There are no rate limits, no account required, and no charge.

star

Key Features

check_circle

Full attribute renaming

Every kebab-case SVG attribute — stroke-width, fill-rule, clip-path, stop-color, and dozens more — is converted to its camelCase JSX equivalent automatically.

check_circle

Inline style string to object

style="fill: #fff; opacity: 0.5" becomes style={{ fill: '#fff', opacity: 0.5 }} so React can apply it without a runtime warning or error.

check_circle

Named functional component output

The result is a complete const Arrow = (props) => (...); export default Arrow; block, not just a snippet — paste it into any .tsx or .jsx file and you are done.

check_circle

Expand Props for reusable icons

Toggle "Expand Props" to add {...props} to the root SVG, letting consumers override size, color, or event handlers from outside the component.

check_circle

Optimize option strips design-tool noise

Remove xmlns, xml:space, version, empty defs, metadata elements, and XML comments in one click — output is leaner and passes stricter linters.

check_circle

Client-side, private, and free

The DOMParser runs in your browser tab. No server call is ever made, so proprietary icons and unreleased brand assets stay on your machine.

help

How to Use

01

Paste SVG

Copy your SVG code from a design tool or file and paste it into the input pane.

02

Configure Options

Set your component name, toggle props expansion, and choose whether to optimize the SVG.

03

Convert & Copy

Click "Convert" to generate the JSX component, then copy it to your clipboard.

code_blocks

Example

A Figma-exported alert icon with kebab-case attributes. After conversion, stroke-width becomes strokeWidth, the xmlns is stripped (Optimize on), and the output is a ready-to-use React component.

SVG from Figma export
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
  viewBox="0 0 24 24" fill="none" stroke="currentColor"
  stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <circle cx="12" cy="12" r="10"/>
  <line x1="12" y1="8" x2="12" y2="12"/>
  <line x1="12" y1="16" x2="12.01" y2="16"/>
</svg>
React JSX component
const AlertCircle = (props) => (
  <svg width="24" height="24" viewBox="0 0 24 24"
    fill="none" stroke="currentColor"
    strokeWidth="2" strokeLinecap="round"
    strokeLinejoin="round" {...props}>
    <circle cx="12" cy="12" r="10" />
    <line x1="12" y1="8" x2="12" y2="12" />
    <line x1="12" y1="16" x2="12.01" y2="16" />
  </svg>
);

export default AlertCircle;
lightbulb

Common Use Cases

  • arrow_circle_right

    Importing Figma or Illustrator exports into React

    Design tools export SVG with xmlns, xml:space, and kebab-case attributes that React rejects. This converter produces a JSX component you can import directly without editing the file by hand.

  • arrow_circle_right

    Building a custom icon library

    Turn a folder of SVG icon files into individual React components with consistent prop APIs. Enable Expand Props so every icon accepts className and style overrides from the parent component.

  • arrow_circle_right

    Dropping inline illustrations into a landing page

    Hero images and decorative graphics from a designer arrive as SVG files. Convert them to named JSX components so they live in your component tree, benefit from React re-renders, and stay out of the public folder.

  • arrow_circle_right

    Making SVG icons theme-aware with currentColor

    Once the SVG is a JSX component, you can replace hardcoded fill or stroke values with currentColor and control the icon color purely via the parent element's CSS color property.

  • arrow_circle_right

    Fixing React warnings about unknown DOM attributes

    If the browser console shows "Invalid DOM property: use strokeWidth instead", paste the SVG here to get a corrected JSX version in seconds rather than hunting through the markup manually.

quiz

Frequently Asked Questions

What is SVG to JSX Converter? expand_more
SVG to JSX Converter is a free online tool that converts standard SVG markup into React JSX component syntax. It automatically transforms HTML-style attributes into JSX equivalents, converts inline style strings to style objects, and wraps the output in a reusable React functional component.
What attributes does it convert? expand_more
The tool converts all kebab-case SVG attributes to camelCase JSX equivalents. For example, stroke-width becomes strokeWidth, fill-rule becomes fillRule, clip-path becomes clipPath, and class becomes className. It also converts xlink:href to xlinkHref and inline style strings into JavaScript style objects.
Is my SVG data secure? expand_more
Yes. All conversion happens entirely in your browser using JavaScript. No SVG data is sent to any server, ensuring your design assets and code remain completely private and secure.
What does the Optimize SVG option do? expand_more
When enabled, the Optimize SVG option removes unnecessary attributes and elements from your SVG such as xmlns declarations, xml:space attributes, version attributes, metadata elements, empty defs elements, and XML comments. This produces cleaner, lighter JSX output.
What does the Expand Props option do? expand_more
When enabled, the Expand Props option adds {...props} to the root SVG element in the generated component. This allows you to pass additional props like className, style, onClick, or aria-label to the SVG component when you use it in your React application.
How is SVG to JSX different from XML to JSON converter? expand_more
The XML to JSON converter on this site converts any XML document into a JSON data structure — it has no knowledge of React or JSX syntax. SVG to JSX Converter is specifically designed for React developers: it produces a functional component with camelCase props, style objects, and optional prop spreading. Use XML to JSON when you want the raw data; use SVG to JSX when you want a working React component.
Can I use this for SVG animations? expand_more
Yes. Animated SVG attributes such as animateTransform, animateMotion, and SMIL-style attributes are passed through. Inline style animations are converted to style objects. Complex CSS animations embedded in a style block are preserved as-is inside the JSX.
Does it handle data-* and aria-* attributes? expand_more
Yes. data-* and aria-* attributes are intentionally left unchanged because React expects them in their original hyphenated form. Only non-data, non-aria kebab-case attributes are converted to camelCase.