Rollup

SVGR can be used as a rollup plugin, this way you can import your SVG directly as a React Component.

Install

npm install @svgr/rollup --save-dev
# or use yarn
yarn add @svgr/rollup --dev

Usage

In your rollup.config.js:

const svgr = require('@svgr/rollup').default
{
  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>
)

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

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 })]
}