@svgr/webpack

What is @svgr/webpack?

The @svgr/webpack package is a webpack loader that allows you to import SVG files as React components. This enables you to manipulate SVGs in your React applications with ease, such as changing colors or sizes, and integrating them as if they were regular React components.

What are @svgr/webpack's main functionalities?

Import SVGs as React Components

This feature allows you to import an SVG file directly into a React component file and use it as a React component. The SVG file is transformed into a React component, which can then be rendered in the JSX.

import React from 'react';
import { ReactComponent as Logo } from './logo.svg';

const App = () => (
  <div>
    <h1>Welcome to React</h1>
    <Logo />
  </div>
);

export default App;

Customize SVGs with Props

This feature allows you to pass props to the imported SVG component to customize its appearance. You can change the fill color, size, and other properties by passing props as you would to any other React component.

import React from 'react';
import { ReactComponent as Star } from './star.svg';

const App = () => (
  <div>
    <Star fill="#FFD700" width={100} height={100} />
  </div>
);

export default App;

Use with CSS Modules

This feature integrates with CSS Modules, allowing you to apply scoped CSS to the SVG component. You can style the SVG using a CSS module and pass the generated class name as a prop to the SVG component.

import React from 'react';
import styles from './App.module.css';
import { ReactComponent as Logo } from './logo.svg';

const App = () => (
  <div className={styles.app}>
    <Logo className={styles.logo} />
  </div>
);

export default App;

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.

README

@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