# rolldown-vite-plugin-svgr

> This plugin is entirely entirely based on [vite-plugin-svgr](https://github.com/pd4d10/vite-plugin-svgr) with modifications to (also) work with `rolldown-vite`.  
> PR-fix for original plugin [available here](https://github.com/pd4d10/vite-plugin-svgr/pull/130), and this module will be deprecated as soon as that, or similar functionality, is merged into `vite-plugin-svgr`.  
> No further fixes or updates will be made available here.

[![npm](https://img.shields.io/npm/v/rolldown-vite-plugin-svgr.svg)](https://www.npmjs.com/package/rolldown-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 rolldown-vite-plugin-svgr

# yarn
yarn add -D rolldown-vite-plugin-svgr

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

## Usage

```js
// vite.config.js
import svgr from "rolldown-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="rolldown-vite-plugin-svgr/client" />
```

### Options

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

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

  // 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