1. @svgr/webpack
SVGR webpack loader.
@svgr/webpack
Package: @svgr/webpack
Created by: gregberge
Last modified: Tue, 15 Aug 2023 06:46:24 GMT
Version: 8.1.0
License: MIT
Downloads: 26,163,429
Repository: https://github.com/gregberge/svgr

Install

npm install @svgr/webpack
yarn add @svgr/webpack

@svgr/webpack

Build Status
Version
MIT License

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

RELATED POST

10 Must-Know Windows Shortcuts That Will Save You Time

10 Must-Know Windows Shortcuts That Will Save You Time

Arrays vs Linked Lists: Which is Better for Memory Management in Data Structures?

Arrays vs Linked Lists: Which is Better for Memory Management in Data Structures?

Navigating AWS Networking: Essential Hacks for Smooth Operation

Navigating AWS Networking: Essential Hacks for Smooth Operation

Achieving Stunning Visuals with Unity's Global Illumination

Achieving Stunning Visuals with Unity's Global Illumination

Nim's Hidden Gems: Lesser-known Features for Writing Efficient Code

Nim's Hidden Gems: Lesser-known Features for Writing Efficient Code