# vite-plugin-svgr

> Vite plugin to transform SVGs into React components

Latest version **5.2.0** (published 2026-04-02) · MIT license · 0 weekly downloads

## Install

```sh
npm install vite-plugin-svgr
pnpm add vite-plugin-svgr
yarn add vite-plugin-svgr
bun add vite-plugin-svgr
```

## Health

**Score 60/100 (C)** — status: active.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 5.2.0 |
| Published | 2026-04-02 |
| First published | 2021-01-09 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 12.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 754 |
| Author | Rongjian Zhang |
| Maintainers | pd4d10 |
| Keywords | vite, vite-plugin |

## Links

- npm: https://www.npmjs.com/package/vite-plugin-svgr
- Repository: https://github.com/pd4d10/vite-plugin-svgr
- Homepage: https://github.com/pd4d10/vite-plugin-svgr#readme
- Issues: https://github.com/pd4d10/vite-plugin-svgr/issues
- npm.io page: https://npm.io/package/vite-plugin-svgr

## Dependencies (3)

- [@svgr/core](https://npm.io/package/@svgr/core.md) ^8.1.0
- [@svgr/plugin-jsx](https://npm.io/package/@svgr/plugin-jsx.md) ^8.1.0
- [@rollup/pluginutils](https://npm.io/package/@rollup/pluginutils.md) ^5.3.0

## Alternatives

- [raw-loader](https://npm.io/package/raw-loader.md) — 4.3M weekly downloads
- [plop](https://npm.io/package/plop.md) — 1.4M weekly downloads
- [webpack-deadcode-plugin](https://npm.io/package/webpack-deadcode-plugin.md) — 80.3K weekly downloads
- [@storybook/preact-vite](https://npm.io/package/@storybook/preact-vite.md) — 54.2K weekly downloads
- [vite-plugin-transform](https://npm.io/package/vite-plugin-transform.md) — 2.4K weekly downloads

## Recent versions

- 5.2.0 (latest) — 2026-04-02
- 5.1.0 — 2026-04-02
- 5.0.0 — 2026-03-28
- 4.5.0 — 2025-08-24
- 4.3.0 — 2024-11-01
- 4.2.0 — 2023-11-17
- 4.1.0 — 2023-09-29
- 4.0.0 — 2023-09-20
- 3.3.0 — 2023-09-20
- 3.2.0 — 2023-05-03
- 3.1.0 — 2023-05-03
- 3.0.0 — 2023-05-03
- 2.4.0 — 2022-12-12
- 2.3.0 — 2022-12-10
- 2.2.2 — 2022-10-13
- … 16 more at https://npm.io/package/vite-plugin-svgr/versions

## README

# vite-plugin-svgr

[![npm](https://img.shields.io/npm/v/vite-plugin-svgr.svg)](https://www.npmjs.com/package/vite-plugin-svgr)

Vite plugin to transform SVGs into React components. Uses [svgr](https://github.com/gregberge/svgr) under the hood.

## Installation

```sh
# npm
npm install --save-dev vite-plugin-svgr

# yarn
yarn add -D vite-plugin-svgr

# pnpm
pnpm add -D vite-plugin-svgr
```

## Usage

```js
// vite.config.js
import svgr from "vite-plugin-svgr";

export default {
  // ...
  plugins: [svgr()],
};
```

Then SVG files can be imported as React components:

```js
import Logo from "./logo.svg?react";
```

If you are using TypeScript, there is also a declaration helper for better type inference. Add the following to `vite-env.d.ts`:

```ts
/// <reference types="vite-plugin-svgr/client" />
```

### Options

```js
svgr({
  // svgr options: https://react-svgr.com/docs/options/
  svgrOptions: {
    // ...
  },

  // esbuild options, to transform jsx to js
  esbuildOptions: {
    // ...
  },

  // oxc options, used by rolldown / vite 8+
  oxcOptions: {
    // ...
  },

  // A minimatch pattern, or array of patterns, which specifies the files in the build the plugin should include.
  include: "**/*.svg?react",

  //  A minimatch pattern, or array of patterns, which specifies the files in the build the plugin should ignore. By default no files are ignored.
  exclude: "",
});
```

If you want to enable SVGO you can install `@svgr/plugin-svgo` and use following options to enable and configure it:

```js
svgr({
  svgrOptions: {
    plugins: ["@svgr/plugin-svgo", "@svgr/plugin-jsx"],
    svgoConfig: {
      floatPrecision: 2,
    },
  },
  // ...
});
```

## License

MIT

---
_Source: https://npm.io/package/vite-plugin-svgr · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._