Skip to main content

SVG to React

Convert SVG to React, JSX, or TSX

Turn SVG files into JSX markup, a ready-to-import React component in TypeScript or JavaScript, or a module that exports the SVG as a string. The converter fixes JSX attributes, converts inline styles, preserves the viewBox, and supports batch downloads.

Drop files here

Editing defaults for new files

Output

A complete module: the imports, the component, and the export.

Module

Names the component, the exported constant, and the generated file. Defaults to the file name in PascalCase.

Language

Wraps the component so a ref reaches the svg element.

Spreads React.SVGProps<SVGSVGElement> onto the root svg element, after the attributes from the file.

Export
Optimization

Runs the safe optimizer preset before the output is generated.

Drops the root width and height so the component sizes from CSS or from the props you pass. The viewBox is always kept.

Styling

Replaces every fill and stroke that names a color, so the artwork inherits the CSS color property. fill="none" is left alone.

Preview

No preview. Add and select files to see results.

No files yet. Drop files above or click SELECT FILES.

What is SVG?

SVG (Scalable Vector Graphics) is an XML-based vector image format. Instead of pixels, an SVG describes shapes, paths, fills, and strokes mathematically, so it can be rendered at any size without losing quality.

SVG is the standard vector format for the web. It is supported natively by every modern browser and can be styled with CSS or animated with JavaScript or SMIL. It is often compact for logos, icons, and illustrations, although complex SVGs can become large.

When to convert SVG to React

Bundlers disagree about what importing an .svg file gives you: inlined markup, a URL, or nothing at all without the right loader. A component committed next to the rest of your code sidesteps that. The icon becomes ordinary JSX that type-checks, tree-shakes, and takes props like any other component. The conversion also handles what JSX needs and raw SVG does not: stroke-width becomes strokeWidth, class becomes className, xlink:href becomes xlinkHref, and an inline style string becomes an object. Turn on Use currentColor and every fill and stroke inherits the CSS color property, so one component covers every color you use it in.

How to convert SVG to React online

  1. 1

    Drop your SVG files, or click SELECT FILES, to add them to the queue. Up to 40 at a time.

  2. 2

    Pick JSX, React Component, or SVG String, then set the component name, the language, and whether to use currentColor. The generated code updates as you change the options.

  3. 3

    Copy the code from the preview, or click SAVE ALL to download one file per SVG, zipped when the queue holds more than one.

Privacy: your files never leave your browser

Conversion runs locally in your browser using JavaScript and WebAssembly. There is no file upload or server-side conversion, so the files you add stay on your device.

Local processing helps protect confidential logos, internal documents, and unreleased client artwork. Pages and conversion code are cached as you use them, so tools you have already opened can continue working without a network connection.

Frequently asked questions

What is the difference between the three outputs?

JSX gives you the bare svg markup to paste inside a component you already have. React Component gives you a complete module, imports and export included, ready to save as HomeIcon.tsx or HomeIcon.jsx. SVG String (TypeScript) is a .ts module that exports the markup as a plain string, for injecting into HTML, email templates, or anything that is not React.

Does the component accept props like className and onClick?

Yes, while Props spread is on. The component takes React.SVGProps<SVGSVGElement> and spreads it onto the root svg element after the attributes from the file, so className, style, onClick, width and aria-label all apply and override what the file said. Turn on forwardRef as well and a ref reaches the svg element itself.

What does Use currentColor change?

Every fill and stroke that names a color is replaced with currentColor, so the artwork paints in whatever the CSS color property resolves to and passing color="red" to the component works. fill="none" is left alone, and keeps meaning "do not paint". It is off by default, because a multicolor illustration collapses to one color when you switch it on.