SVG to JSX converter

What changes between SVG and JSX

Browsers read SVG as XML, so attributes are hyphenated and the style attribute is a string. React expects props: stroke-width becomes strokeWidth, class becomes className, xlink:href becomes xlinkHref, and style="fill:red" becomes style={{ fill: "red" }}. Empty elements such as <path></path> self close, and the XML declaration, doctype and comments go away because JSX has no use for them. The converter parses the markup with the browser's own parser, never with eval or innerHTML, and writes the JSX by hand, so nothing you paste can run on this page. The preview is an image built from the markup, which is why it cannot execute scripts either.

The options

• Spread props removes the fixed width and height from the root and adds {...props}, so <Icon className="size-4" /> sizes the icon from CSS. The viewBox stays, since it is what makes scaling work.
• Use currentColor swaps fill and stroke colours for currentColor, so the icon follows the text colour, including in dark mode. Gradients, none and url() references are left alone.
• Optimize removes ids nothing references, <metadata>, Inkscape and Illustrator namespaces, xml:space and similar export residue, and collapses whitespace in attributes. Ids used by url(#id) or href="#id" are kept, so gradients and clip paths keep working.

import type { SVGProps } from "react"

export function CheckIcon(props: SVGProps<SVGSVGElement>) {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" {...props}>
      <path d="M8 12.5l2.5 2.5L16 9.5" stroke="currentColor" strokeWidth={1.5} strokeLinecap="round" />
    </svg>
  )
}

What the tool does not do

This is a converter, not an optimizer like SVGO: path data is not rewritten and shapes are not merged. It does not rename ids either, so two converted icons on one page that both use id="glow" will clash. For a build-time workflow with those features use SVGR; the output here follows the same conventions, so switching later is painless.