SVG Forge

SVG to React Component

Paste SVG, get a ready-to-import JSX or TSX component.

or drop a file / paste code below
React component
Output appears here

How it works

  1. 1Paste SVG code or drop an .svg file.
  2. 2Toggle TypeScript output and set the component name.
  3. 3Copy the generated component into your codebase.

Free, no signup, no watermark — everything runs locally in your browser, so your files never leave your machine.

Frequently asked questions

What gets converted?

Attributes are camelCased (stroke-width → strokeWidth), class → className, and {...props} is spread on the root so you can pass size and color.

Should I optimize the SVG first?

Yes — run it through the SVG Optimizer first for a smaller, cleaner component. The two tools are one click apart.

Related tools

SVG to Vue

Turn any SVG into a Vue 3 single-file component.

SVG Optimizer

SVGO-powered cleanup: smaller files, same pixels. See the savings instantly.

SVG to Data URI

Encode SVG for img src, CSS url() or anywhere a URI fits.