@svgr/rollup

Rollup plugin for SVGR.

npm install @svgr/rollup --save-dev

In your rollup.config.js:

{
  plugins: [svgr()]
}

In your code:

import Star from './star.svg'

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

Passing options

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

Using with url plugin

It is possible to use it with url.

In your rollup.config.js:

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

In your code:

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

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

Use your own Babel configuration

By default, @svgr/rollup applies a babel transformation with optimized configuration. 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.

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

License

MIT