SVG → React

SVG to React Component

Paste-ready JSX from any SVG file — attributes renamed the way React wants them, props spread onto the root, TypeScript if you need it.

SVG → React

☞ tout se passe dans ton navigateur — rien n’est envoyé

Drop your SVG here

or click to browse — SVG only

React component (.jsx)

The component name comes from the file name, so arrow-left.svg becomes ArrowLeft.

TypeScript component (.tsx)

Same component, typed as SVGProps<SVGSVGElement>.

JSX snippet

Just the markup, for pasting inside a component you already have.

icons as components

Why an SVG cannot be pasted into JSX as-is

JSX looks like markup but it is JavaScript. Hyphenated attributes such as stroke-width are not valid identifiers, class collides with a reserved word, and curly braces inside an inline style block are read as expressions. An SVG copied straight from a design tool usually fails to compile for at least one of those reasons.

This converter renames what has to be renamed and leaves everything else alone. data- and aria- attributes keep their hyphens, because React passes those through untouched — renaming them is a common way to silently lose an accessible label.

three steps

How to convert an SVG to a React component

Drop the SVG

Pick a .svg file — it stays on your device.

Copy the block you need

A full component, its TypeScript twin, or the bare JSX.

Drop it in your project

Import it like any other component and style it with props.

quick answers

SVG to React FAQ

Why is {...props} at the end of the svg tag?

So that anything you pass in wins. In JSX a later attribute overrides an earlier one, so with the spread last you can set className, width or an onClick from the outside. Put it first and the values baked into the file would quietly override yours.

How do I recolour the icon?

Replace the hard-coded fill or stroke in the output with currentColor, then set the colour in CSS on any parent element. If the file has colours scattered across many nodes, run it through the SVG color changer first — it can switch every one of them to currentColor in one go.

Can I use this with React Native?

Not directly. React Native has no DOM, so SVG there needs react-native-svg and capitalised element names such as Svg and Path. The attribute renaming shown here is still the right shape, but the imports and tags are different.

The output is one very long line

That is the source file — minified SVG stays minified, because reformatting is a separate job. Run it through the SVG beautifier first and the component comes out with readable indentation.

Is my file uploaded?

No. The conversion is plain string work done in your browser.

SVG to React Component

SVG → React

Drop your SVG here

React component (.jsx)

TypeScript component (.tsx)

JSX snippet

Why an SVG cannot be pasted into JSX as-is

How to convert an SVG to a React component

Drop the SVG

Copy the block you need

Drop it in your project

SVG to React FAQ

Outils similaires

Convertisseur d’image en icône

PNG vers WebP

Convertisseur d’image

JPG vers PNG

WebP vers PNG

Image vers Base64

GIF en images fixes

Images en GIF

Décodeur de QR code

Nettoyeur de QR code

Générateur de code-barres

PNG vers JPG

JPG vers WebP

WebP vers JPG

SVG vers PNG

QR code vCard

Générateur de QR code

SVG to JPG

SVG to WebP

SVG to ICO

SVG to PDF

SVG to Base64

SVG to Vue

PNG to SVG

JPG to SVG

PDF to JPG

PDF to PNG

Image to PDF

JPG to PDF

PNG to PDF