TTULAKITO
Developer

SVG to JSX Converter

Convert raw SVG markup into React JSX with camelCase attributes.

All tools

SVG

JSX

export function Icon() {
  return (
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M5 12h14M12 5l7 7-7 7"/>
    </svg>
  );
}

Frequently asked questions

Why does React complain about stroke-width or fill-rule in SVG?
JSX requires camelCase for hyphenated SVG attributes, so stroke-width becomes strokeWidth and fill-rule becomes fillRule. The converter rewrites these along with xmlns:xlink and similar namespaced attributes.
What happens to inline style attributes when converting SVG to JSX?
An inline style="fill:red" string becomes a style={{ fill: "red" }} object because JSX treats the style prop as a JavaScript object. Multiple declarations are split into separate camelCased keys.
Can I use the converted JSX as a React component directly?
Yes, wrap the JSX in a function component and forward props if you need dynamic colors or sizes. Replace hardcoded fill, stroke, or width attributes with prop values to make the icon reusable.