@svgr/webpack

@svgr/webpack

Webpack loader for SVGR.

npm install @svgr/webpack --save-dev

Usage

In your webpack.config.js:

{
  test: /\.svg$/,
  use: ['@svgr/webpack'],
}

In your code:

import Star from './star.svg'

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

Passing options

{
  test: /\.svg$/,
  use: [
    {
      loader: '@svgr/webpack',
      options: {
        native: true,
      },
    },
  ],
}

Using with url-loader or file-loader

It is possible to use it with url-loader or file-loader.

In your webpack.config.js:

{
  test: /\.svg$/,
  use: ['@svgr/webpack', 'url-loader'],
}

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/webpack will try to export the React Component via default export if there is no other loader handling svg files with default export. When there is already any other loader using default export for svg files, @svgr/webpack 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/webpack includes a babel-loader with an 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.

// Example using preact
{
  test: /\.svg$/,
  use: [
    {
      loader: 'babel-loader',
      options: {
        presets: ['preact', 'env'],
      },
    },
    {
      loader: '@svgr/webpack',
      options: { babel: false },
    }
  ],
}

Handle SVG in CSS, Sass or Less

It is possible to detect the module that requires your SVG using Rule.issuer in Webpack 5. Using it you can specify two different configurations for JavaScript and the rest of your files.

;[
  {
    test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
    issuer: /\.[jt]sx?$/,
    use: ['babel-loader', '@svgr/webpack', 'url-loader'],
  },
  {
    test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
    loader: 'url-loader',
  },
]

Rule.issuer in Webpack 4 has additional conditions which are not available in Webpack 5.

License

MIT

Similar packages

Other packages similar to @svgr/webpack

react-svg-loader

react-svg-loader is another webpack loader that provides similar functionality to @svgr/webpack. It also allows you to import SVG files as React components. However, @svgr/webpack offers additional features such as SVGO optimization and JSX transformation.

svg-inline-loader

svg-inline-loader is a webpack loader that inlines SVG as module exports. Unlike @svgr/webpack, it does not convert SVGs into React components but rather provides the SVG content directly, which can be useful for different use cases.

svg-sprite-loader

svg-sprite-loader compiles all SVGs into an SVG sprite, which can be beneficial for performance as it reduces the number of HTTP requests. This is different from @svgr/webpack's approach of handling SVGs as individual React components.