📦 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

astuce

Si vous utilisez le preset @docusaurus/preset-classic, vous n'avez pas besoin d'installer ce plugin en tant que dépendance.

Vous pouvez configurer ce plugin via les options du preset.

Configuration

Champs acceptés :

Nom	Type	Par défaut	Description
svgrConfig	object	{}	The SVGR config options, shallow-merged over the default SVGR config

Exemple de configuration

Vous pouvez configurer ce plugin via les options du plugin.

Options du preset

Si vous utilisez un preset, configurez ce plugin via le options du preset :

docusaurus.config.js

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

Options du plugin

Si vous utilisez un plugin autonome, fournissez des options directement au 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,
  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.

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