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 transform SVG to React components via SVGR.

Quick Start#

Install Plugin#

You can install the plugin using the following command:

npm add @rsbuild/plugin-svgr -D

Register Plugin#

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

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

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

Example#

Default Usage#

After registering the plugin, when import an SVG in a JS file, if the imported path contains the ?react suffix, Rsbuild will call SVGR to transform the SVG into a React component.

import Logo from './logo.svg?react';

export const App = () => <Logo />;

If the imported path does not contain the ?react suffix, 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"

Named Import#

@rsbuild/plugin-svgr supports named imports for ReactComponent when using SVGR. You need to set svgrOptions.exportType to 'named':

pluginSvgr({
  svgrOptions: {
    exportType: 'named',
  },
});

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

export const App = () => <Logo />;

@rsbuild/plugin-svgr also supports default imports and mixed imports:

• Enable default imports by setting svgrOptions.exportType to 'default'.
• Enable mixed imports by setting the mixedImport option to use both default and named imports at the same time.

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;
  /**
   * Whether to allow the use of default import and named import at the same time.
   * @default false
   */
  mixedImport?: boolean;
};

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',
    },
  },
});

When you set svgoConfig.plugins, the configuration for plugins with the same name is automatically merged. For example, the following configuration will be merged with the built-in preset-default:

pluginSvgr({
  svgrOptions: {
    svgoConfig: {
      plugins: [
        {
          name: 'preset-default',
          params: {
            overrides: {
              cleanupIds: false,
            },
          },
        },
      ],
    },
  },
});

The merged svgoConfig will be:

const mergedSvgoConfig = {
  plugins: [
    {
      name: 'preset-default',
      params: {
        overrides: {
          removeViewBox: true,
          cleanupIds: false,
        },
      },
    },
    'prefixIds',
  ],
};

svgrOptions.exportType#

Set the export type of SVG React components.

• Type: 'default' | 'named'
• Default: undefined

exportType can be set as:

• default: use default export.
• named: use ReactComponent named export.

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

pluginSvgr({
  svgrOptions: {
    exportType: 'default',
  },
});

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

mixedImport#

• Type: boolean
• Default: false

Whether to enable mixed import, allowing to use default import and named import at the same time.

Mixed import is usually used with svgrOptions.exportType: 'named', for example:

pluginSvgr({
  mixedImport: true,
  svgrOptions: {
    exportType: 'named',
  },
});

At this time, the imported SVG file will export both URL and the React component:

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

console.log(logoUrl); // -> string
console.log(Logo); // -> React component

Limitations#

It is recommended to use ?react to transform SVG to React component instead of using mixed import. Because mixed import has the following limitations:

1. Increased bundle size: Mixed import causes a single SVG module to be compiled into two types of code (even if some exports are not used), which will increase the bundle size.
2. Slow down compiling: Mixed import will cause extra compilation overhead. Even if the ReactComponent export is not used in the code, the SVG file will still be compiled by SVGR. And SVGR is based on Babel, which has a high performance overhead.

query#

• Type: RegExp
• Default: /react/

Used to custom the query suffix to match SVGR transformation.

For example, if you need to match import paths with the ?svgr suffix:

pluginSvgr({
  query: /svgr/,
});

import Logo from './logo.svg?svgr';

export const App = () => <Logo />;

exclude#

• Type: RuleSetCondition
• Default: undefined

Exclude some SVG files, they will not be transformed by SVGR.

For example, if a project includes a.svg and b.svg, you can add b.svg to exclude:

pluginSvgr({
  svgrOptions: {
    exportType: 'default',
  },
  exclude: /b\.svg/,
});

When imported, a.svg will be transformed into a React component, while b.svg will be treated as a regular static asset:

import component from './a.svg';
import url from './b.svg';

console.log(component); // => React component
console.log(url); // => resource url

excludeImporter#

• Type: RuleSetCondition
• Default: undefined

Exclude some modules, the SVGs imported by these modules will not be transformed by SVGR.

For example, if your project contains page-a/index.ts and page-b/index.ts, you can add page-b to excludeImporter:

pluginSvgr({
  svgrOptions: {
    exportType: 'default',
  },
  excludeImporter: /\/page-b\/index\.ts/,
});

• SVGs referenced in page-a will be transformed to React components:

import Logo from './logo.svg';

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

• SVGs referenced in page-b will be treated as static assets:

import url from './logo.svg';

console.log(url); // => Resource url

Type Declaration#

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

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

• By default, you can add the following type declarations:

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

• If the value of svgrOptions.exportType is 'default', set the type declaration to:

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

• If the value of svgrOptions.exportType is 'named', set the type declaration to:

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

• If the value of svgrOptions.exportType is 'named', and mixedImport is enabled, set the type declaration to:

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

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