SVG to JSX

React won't let you paste raw SVG code. Drop your SVG here and get a React component that actually works.

The problem this solves

If you've tried copying an SVG from Figma or a website and dropping it into a React component, you've hit this wall:

// This breaks React:
<svg class="icon" stroke-width="2">...</svg>

// React needs this:
<svg className="icon" strokeWidth={2}>...</svg>

JSX doesn't use HTML attributes - it uses JavaScript properties. So class becomes className, stroke-width becomes strokeWidth, and so on. Doing this by hand for every icon gets old fast.

What this tool does

• Converts all hyphenated attributes to camelCase (fill-rule fillRule)
• Changes class to className
• Removes XML namespace junk that React ignores anyway
• Strips editor metadata (that Figma/Sketch/Illustrator stuff nobody needs)
• Outputs a clean functional component you can drop into your project

What you get

A React component like this:

const MyIcon = (props) => (
  <svg width={24} height={24} viewBox="0 0 24 24" {...props}>
    <path d="M12 2L2 7l10 5 10-5-10-5z" />
  </svg>
);

export default MyIcon;

The {...props} spread means you can pass width, height, fill, className, or any other SVG attribute when you use it.