@svgr/rollup

@svgr/rollup

Rollup plugin for SVGR.

npm install @svgr/rollup

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

Similar packages

Other packages similar to @svgr/rollup

rollup-plugin-image

rollup-plugin-image is a Rollup plugin that allows you to import image files (including SVGs) as data URIs. Unlike @svgr/rollup, it does not transform SVGs into React components but instead provides a way to include images directly in your bundle.

rollup-plugin-svg

rollup-plugin-svg is a Rollup plugin that imports SVG files as strings. This plugin is useful if you want to manipulate SVG content as a string or use it in a different way than transforming it into a React component, which is the primary functionality of @svgr/rollup.

vite-plugin-svgr

vite-plugin-svgr is a Vite plugin that transforms SVGs into React components, similar to @svgr/rollup. It is specifically designed for use with Vite, a build tool that aims to provide a faster and leaner development experience for modern web projects.