What does the component look like?

A default-exported function that renders your optimised SVG and spreads props onto , so you can set className, width or aria attributes.

SVG to React Component Converter

Optimise an SVG with SVGO and get a ready React component in JSX or TypeScript, with props passed to the <svg>.

Precision3MultipassPretty

Drop SVG files here, or paste SVG code

Up to 100 files at once · optimised with SVGO in your browser — nothing is uploaded.

Loading Tool...

Help shape SVG to React Component Converter

The bug you just noticed will fade in 3 minutes. The feature idea will vanish after your next tab switch. Crazy peps don't suffer silently.

0/1000

A default-exported function that renders your optimised SVG and spreads props onto <svg>, so you can set className, width or aria attributes.

Yes: class becomes className, stroke-width becomes strokeWidth, and inline style strings become style objects.

Drop up to 100 SVGs; each file has its own component output and all optimised SVGs can be downloaded as a ZIP.

No. Conversion runs entirely in your browser.