@svgr/rollup

What is @svgr/rollup?

@svgr/rollup is a Rollup plugin that transforms SVG files into React components. It allows you to import SVG files directly into your React components, making it easier to manage and use SVGs in your projects.

What are @svgr/rollup's main functionalities?

Transform SVG to React Component

This feature allows you to transform SVG files into React components using the @svgr/rollup plugin in your Rollup configuration. The code sample demonstrates how to set up the plugin in a Rollup configuration file.

import { defineConfig } from 'rollup';
import svgr from '@svgr/rollup';

export default defineConfig({
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'cjs'
  },
  plugins: [
    svgr()
  ]
});

Custom SVGR Options

This feature allows you to customize the SVGR options when transforming SVG files. The code sample shows how to enable the 'icon' option and configure SVGO to preserve the viewBox attribute.

import { defineConfig } from 'rollup';
import svgr from '@svgr/rollup';

export default defineConfig({
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'cjs'
  },
  plugins: [
    svgr({
      icon: true,
      svgoConfig: {
        plugins: [{ removeViewBox: false }]
      }
    })
  ]
});

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.

README

@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>
)

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. 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