📦 plugin-svgr

SVGR插件用于在构建时间将SVG 文件自动转换为React组件。

安装流程

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

提示

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.

配置

接受的字段：

参数	类型	默认值	描述
svgrConfig	object	{}	The SVGR config options, shallow-merged over the default SVGR config

示例配置

你可以通过插件选项来配置这个插件。

预设选项

如果你使用预设，你可以通过预设选项配置这个插件：

docusaurus.config.js

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

插件选项

如果你用的是独立插件，直接向插件提供选项：

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.