📦 plugin-svgr

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

Instalação

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.

Configuração

Campos aceitos:

Nome	Type	Padrão	Descrição
svgrConfig	object	{}	The SVGR config options, shallow-merged over the default SVGR config

Configuração de exemplo

You can configure this plugin through plugin options.

Opções de predefinição

Se você usar uma predefinição, configure este plugin através do opções de predefinição:

docusaurus.config.js

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

Opções do plugin

Se você estiver usando um plugin independente, forneça opções diretamente para o 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.