📦 plugin-svgr

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

설치

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

설정 예시

You can configure this plugin through plugin options.

프리셋 옵션

프리셋을 사용하는 경우 프리셋 옵션를 통해 플러그인을 구성합니다.

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.