📦 plugin-svgr

An SVGR plugin to transform SVG files into React components automatically at build time.

Installation

npm

npm install --save @docusaurus/plugin-svgr

Yarn

yarn add @docusaurus/plugin-svgr

pnpm

pnpm add @docusaurus/plugin-svgr

Bun

bun add @docusaurus/plugin-svgr

tip

If you use the preset @docusaurus/preset-classic, you don't need to install this plugin as a dependency.

You can configure this plugin through the preset options.

Configuration

Accepted fields:

Name	Type	Default	Description
svgrConfig	object	{}	The SVGR config options, shallow-merged over the default SVGR config

Example configuration

You can configure this plugin through plugin options.

Preset options

If you use a preset, configure this plugin through the preset options:

docusaurus.config.js

module.exports = {
  presets: [
    [
      '@docusaurus/preset-classic',
      {
        svgr: {
          svgrConfig: {/* SVGR config */},
        },
      },
    ],
  ],
};

Plugin options

If you are using a standalone plugin, provide options directly to the plugin:

docusaurus.config.js

module.exports = {
  plugins: [
    [
      '@docusaurus/plugin-svgr',
      {
        svgrConfig: {/* SVGR config */},
      },
    ],
  ],
};

Default config

The svgrConfig option is shallow-merged over the following default SVGR config:

const defaultSvgrConfig = {
  prettier: false,
  svgo: true,
  titleProp: true,
  runtimeConfig: false,
  svgoConfig: {
    plugins: [
      {
        name: 'preset-default',
        params: {
          overrides: {
            removeTitle: false,
            removeViewBox: false,
          },
        },
      },
      {
        name: 'prefixIds',
        params: {
          delim: '',
          // Short hash of the SVG file path, relative to the site directory
          prefix: (node, info) => `svg-${hash(info.path)}-`,
          prefixClassNames: false,
        },
      },
    ],
  },
};

The prefixIds plugin prefixes SVG ids (for example, id="a" becomes id="svg-3f2a1c-a") to avoid clashes between multiple SVGs inlined in the same page. Class names are not prefixed.

runtimeConfig: false disables discovery of SVGR configuration files (for example svgr.config.js) in the site directory and ancestor directories. Configure SVGR through the svgrConfig option.

Providing svgoConfig replaces the default SVGO config entirely. Use svgoConfig: undefined to read your own svgo.config.js file instead.