Skip to content
SvgJsx
Language: English

SVG to TSX: Typed React Icon Components

Generate TypeScript React components from SVG with correct prop types, so every icon accepts className, aria attributes and event handlers with full autocompletion.

Quick presets:
Drop .svg files here orFiles are read locally with FileReader and are never uploaded.
Options
Export:
import type { SVGProps } from "react";

const HeartIcon = (props: SVGProps<SVGSVGElement>) => (
  <svg width="24" height="24" viewBox="0 0 24 24" className="icon icon-heart" {...props}>
    <g id="Layer_1" fill="none" stroke="#e11d48" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M19.0001 14.0002c1.4900-1.4600 3.0000-3.2100 3.0000-5.5000A5.5000 5.5000 0 0 0 16.5000 3c-1.7600 0-3.0000.5000-4.5000 2-1.5000-1.5000-2.7400-2-4.5000-2A5.5000 5.5000 0 0 0 2 8.5000c0 2.3000 1.5000 4.0500 3 5.5000l7 7Z" style={{ fillOpacity: "0.15", fill: "#e11d48" }} />
    </g>
  </svg>
);

export default HeartIcon;

Preview

Preview of the converted SVG
Original SVG
706B
Optimized SVG
538B(-24%)
Component
631B

How the generated types work

The component's props are typed as SVGProps<SVGSVGElement>, the same type React uses for the <svg> element. That gives you autocompletion for every SVG attribute and event handler, and TypeScript will reject invalid props at compile time.

With the size option enabled the props become SVGProps<SVGSVGElement> & { size?: number | string }, and width and height are set from size. With forwardRef enabled the ref is typed as Ref<SVGSVGElement>, so parents can attach refs for measurement or animation libraries.

TSX output checklist

Before committing a generated icon, check that:

  • The component name is PascalCase and matches the file name (ArrowLeft.tsx).
  • Only type imports are used for SVGProps and Ref, so they disappear from the JavaScript bundle.
  • The viewBox is present; without it the icon cannot scale.
  • Named exports are used if your codebase forbids default exports.

Strict mode friendly

The code compiles with "strict": true and with isolatedModules, which Next.js, Vite and esbuild require. No any types are generated, and default values for size are written as literal defaults in the destructuring pattern.

Frequently asked questions

Should I use SVGProps or ComponentProps<"svg">?

Both describe the same attributes. SVGProps<SVGSVGElement> is explicit about the element type and is what React's own type definitions use for <svg>, so the converter uses it.

Does forwardRef still matter in React 19?

React 19 lets function components receive ref as a normal prop, so forwardRef is optional there. It is still useful for libraries that must support React 18, which is why it is an option and off by default.

Why is the size prop typed as number | string?

Numbers become pixel values, while strings let you pass CSS units such as "1em" or "1.5rem" so the icon scales with the surrounding text.

Can I convert a whole icon folder to TSX?

Yes. Drop all files at once; each becomes a .tsx file named after the SVG, bundled into a ZIP with an index.ts barrel file.