# @svgr/rollup

> SVGR Rollup plugin.

Latest version **8.1.0** (published 2023-08-15) · MIT license · 0 weekly downloads

## Install

```sh
npm install @svgr/rollup
pnpm add @svgr/rollup
yarn add @svgr/rollup
bun add @svgr/rollup
```

## Health

**Score 40/100 (D)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; popular repo.

Warnings: low downloads.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 8.1.0 |
| Published | 2023-08-15 |
| First published | 2018-06-12 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=14 |
| Dependencies | 9 |
| Unpacked size | 13.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 11061 |
| Author | Greg Bergé |
| Maintainers | neoziro |
| Keywords | svgr, svg, react, rollup, rollup-plugin |

## Links

- npm: https://www.npmjs.com/package/@svgr/rollup
- Repository: https://github.com/gregberge/svgr.git#main
- Homepage: https://react-svgr.com
- Issues: https://github.com/gregberge/svgr/issues
- Funding: https://github.com/sponsors/gregberge
- npm.io page: https://npm.io/package/@svgr/rollup

## Dependencies (9)

- [@svgr/core](https://npm.io/package/@svgr/core.md) 8.1.0
- [@babel/core](https://npm.io/package/@babel/core.md) ^7.21.3
- [@svgr/plugin-jsx](https://npm.io/package/@svgr/plugin-jsx.md) 8.1.0
- [@babel/preset-env](https://npm.io/package/@babel/preset-env.md) ^7.20.2
- [@svgr/plugin-svgo](https://npm.io/package/@svgr/plugin-svgo.md) 8.1.0
- [@babel/preset-react](https://npm.io/package/@babel/preset-react.md) ^7.18.6
- [@rollup/pluginutils](https://npm.io/package/@rollup/pluginutils.md) ^5.0.2
- [@babel/preset-typescript](https://npm.io/package/@babel/preset-typescript.md) ^7.21.0
- [@babel/plugin-transform-react-constant-elements](https://npm.io/package/@babel/plugin-transform-react-constant-elements.md) ^7.21.3

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 8.1.0 (latest) — 2023-08-15
- 6.0.0-alpha.4 (next) — 2021-11-13
- 2.0.0-alpha.26fa501a (canary) — 2018-06-12
- 8.0.1 — 2023-05-09
- 8.0.0 — 2023-05-09
- 7.0.0 — 2023-03-24
- 6.5.1 — 2022-10-27
- 6.5.0 — 2022-10-14
- 6.4.0 — 2022-10-01
- 6.3.1 — 2022-07-22
- 6.3.0 — 2022-07-18
- 6.2.1 — 2022-01-30
- 6.2.0 — 2022-01-10
- 6.1.2 — 2021-12-12
- 6.1.1 — 2021-12-04
- … 35 more at https://npm.io/package/@svgr/rollup/versions

## README

# @svgr/rollup

[![Build Status](https://img.shields.io/travis/smooth-code/svgr.svg)](https://travis-ci.org/smooth-code/svgr)
[![Version](https://img.shields.io/npm/v/@svgr/rollup.svg)](https://www.npmjs.com/package/@svgr/rollup)
[![MIT License](https://img.shields.io/npm/l/@svgr/rollup.svg)](https://github.com/smooth-code/svgr/blob/master/LICENSE)

Rollup plugin for SVGR.

```
npm install @svgr/rollup --save-dev
```

In your `rollup.config.js`:

```js
{
  plugins: [svgr()]
}
```

In your code:

```js
import Star from './star.svg'

const App = () => (
  <div>
    <Star />
  </div>
)
```

### Passing options

```js
{
  plugins: [svgr({ native: true })]
}
```

### Using with `url` plugin

It is possible to use it with [`url`](https://github.com/rollup/rollup-plugin-url).

In your `rollup.config.js`:

```js
{
  plugins: [url(), svgr()]
}
```

In your code:

```js
import starUrl, { ReactComponent as Star } from './star.svg'

const App = () => (
  <div>
    <img src={starUrl} alt="star" />
    <Star />
  </div>
)
```

The named export defaults to `ReactComponent`, but can be customized with the `namedExport` option.

Please note that by default, `@svgr/rollup` will try to export the React Component via default export if there is no other plugin handling svg files with default export. When there is already any other plugin using default export for svg files, `@svgr/rollup` will always export the React component via named export.

If you prefer named export in any case, you may set the `exportType` option to `named`.

### Use your own Babel configuration

By default, `@svgr/rollup` applies a babel transformation with [optimized configuration](https://github.com/gregberge/svgr/blob/main/packages/rollup/src/index.ts). In some case you may want to apply a custom one (if you are using Preact for an example). You can turn off Babel transformation by specifying `babel: false` in options.

```js
{
  plugins: [svgr({ babel: false })]
}
```

## License

MIT

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