SVGR Plugin

By default, Rsbuild will treat SVG files as static assets. For processing rules, please refer to: Import Static Assets

With SVGR plugin, Rsbuild supports convert SVG to React components via SVGR.

Quick Start

Install Plugin

You can install the plugin using the following command:

npm
yarn
pnpm
bun
npm add @rsbuild/plugin-svgr -D

Register Plugin

You can register the plugin in the rsbuild.config.ts file:

rsbuild.config.ts
import { pluginSvgr } from '@rsbuild/plugin-svgr';

export default {
  plugins: [pluginSvgr()],
};

Example

After installing the plugin, When import an SVG in a JS file, if you import ReactComponent, Rsbuild will call SVGR to convert the SVG into a React component.

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

export default () => <Logo />;

At this time,if you use the default import, then the SVG will be treated as a normal static asset and you will get a URL:

import logoURL from './static/logo.svg';

console.log(logoURL); // => "/static/logo.6c12aba3.png"

Options

If you need to customize the compilation behavior of Svgr, you can use the following configs.

  • Type:
type PluginSvgrOptions = {
  /**
   * Configure SVGR options.
   */
  svgrOptions?: import('@svgr/core').Config;

  /**
   * Configure the default export type of SVG files.
   */
  svgDefaultExport?: 'component' | 'url';
};

svgrOptions

Modify the options of SVGR, the passed object will be deep merged with the default value. See SVGR - Options for details.

  • Type: import('@svgr/core').Config
  • Default:
const defaultSvgrOptions = {
  svgo: true,
  svgoConfig: {
    plugins: [
      {
        name: 'preset-default',
        params: {
          overrides: {
            removeViewBox: false,
          },
        },
      },
      'prefixIds',
    ],
  },
};
  • Example:
pluginSvgr({
  svgrOptions: {
    svgoConfig: {
      datauri: 'base64',
    },
  },
});

svgDefaultExport

Modify the default export type of SVG files.

  • Type: 'component' | 'url'
  • Default: 'url'

For example, set the default export as a React component:

rsbuild.config.ts
export default {
  plugins: [
    pluginSvgr({
      svgDefaultExport: 'component',
    }),
  ],
};

Then import the SVG, you'll get a React component instead of a URL:

import Logo from './logo.svg';

console.log(Logo); // => React Component

At this time, you can also specify the ?url query to import the URL, for example:

import logo from './logo.svg?url';

console.log(logo); // => asset url
TIP

When svgDefaultExport is set to 'component', the named imports (ReactComponent) cannot be used.

Type Declaration

When you reference an SVG asset in TypeScript code, TypeScript may prompt that the module is missing a type definition:

TS2307: Cannot find module './logo.svg' or its corresponding type declarations.

To fix this, you need to add a type declaration file for the SVG asset, please create a src/env.d.ts file, and add the following type declaration:

declare module '*.svg' {
  export const ReactComponent: React.FunctionComponent<
    React.SVGProps<SVGSVGElement>
  >;
  const content: string;
  export default content;
}

If you set svgDefaultExport to 'component', then change the type declaration to:

declare module '*.svg' {
  const ReactComponent: React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
  export default ReactComponent;
}

After adding the type declaration, if the type error still exists, you can try to restart the current IDE, or adjust the directory where env.d.ts is located, making sure the TypeScript can correctly identify the type definition.