@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

Current Tags

• 2.0.0-alpha.26fa501a                                ...           canary (7 years ago)
• 6.2.1                                ...           latest (4 years ago)

7 Versions

• 6.0.0-alpha.4                                ...           4 years ago
• 6.2.1                                ...           4 years ago
• 5.5.0                                ...           5 years ago
• 5.4.0                                ...           5 years ago
• 2.0.0-alpha.26fa501a                                ...           7 years ago
• 4.3.3                                ...           6 years ago
• 4.3.1                                ...           6 years ago