Skip to content
SVGtoReact

Many files, one zip

SVG batch ZIP

Choose up to 50 SVG files and download a zip of components. Conversion and the zip both run in this tab. The files are not uploaded.

Components zip is the default. Icon library zip adds an index that re-exports every component that converted. The default format is React JSX. One SVG still downloads as one file from the homepage converter.

Batch zip

Runs in your browser. Your SVGs are not uploaded.

Add SVG files to build a zip.

Zip

Format

SVG files

Drop SVG files here, or choose them.

Up to 50 files, 500 KB each, 25,000 KB combined. Choosing files again replaces this batch. Scripts and external URLs are removed. The homepage converter still downloads one component.

Zip contents

Converted components will be listed here. The download is a zip of those files.

What the zip contains

Each SVG is sanitized, then converted with the same engine as the matching single-file tool. JSX and TSX use the web converter (native stays off). React Native uses SVGR native mode and imports react-native-svg. Vue and Svelte keep SVG attribute names such as class and stroke-width. A file that fails to sanitize is named in the skipped list and is omitted from the zip.

Two files that would produce the same component name get a numeric suffix on the second name, so icon.svg and another icon.svg become Icon.jsx and Icon2.jsx. The name inside the component matches the file. Directory pieces in the original name are dropped, so the zip stays a flat list of component files.

Icon library mode writes index.js or index.ts after the components. It re-exports only the files that converted. Need one file instead? Use the converter, JSX, TSX, Vue, Svelte, or React Native page.

Example

This index is the sample SVG and the attribute demo, converted as an icon library in React JSX. Arrow.jsx and Stroke.jsx are the component files.

index.js
export { default as Arrow } from './Arrow.jsx';
export { default as Stroke } from './Stroke.jsx';

Limits

  • 50 SVGs per batch. Further files are listed as skipped and are not converted.
  • 500 KB per SVG, the same per-file cap as the other tools.
  • 25,000 KB combined. A file that would pass that total is skipped.
  • 10,000 elements per SVG. A larger tree is rejected.
  • The SVG is sanitized before a component is written. A failed sanitize produces no file.
  • Scripts, event handlers, and embedded HTML are removed. Warnings name those removals.
  • The download is the zip of components that converted. The original SVG markup is not in the zip.

Questions

Is my SVG uploaded?

No. Each file is sanitized and converted in this browser tab, and the zip is built here too. The SVGs are not sent to a server, saved in a database, or sent to analytics. Closing the tab discards the files.

What if one file is invalid?

That file is listed under skipped files, with the reason. The zip still downloads when at least one SVG converts. The skipped file is not inside the zip.

What does icon library mode add?

The same components, plus an index file that re-exports each component that converted. A failed file is left out of the index. JSX, Vue, and Svelte use index.js. TSX and React Native use index.ts.

Which format is the default?

React JSX. The format control also offers TSX, React Native, Vue, and Svelte. Those use the same emitters as the single-file tools. The homepage converter still downloads one component.