Motivation

We historically include SVGR in core by default

This works but it's a bit annoying since it doesn't make it easy for configuring it, including SVGO optimizations that cause troubles in some cases:

Since we don't really want core to expose configuration options, let's extract all this logic to a dedicated plugin instead, that allows passing plugin options to configure both SVGR and SVGO.

Breaking change?

For v3 retro compatibility, I'm adding the new SVGR plugin to the classic preset. Since everybody uses the preset (afaik),

I'm not going to consider it a breaking change unless someone complains in which case we'll look for a solution that we could implement in a patch release.

Note: better retro-compatibility is possible to achieve. But it's more complex and probably not worth it. If any user doesn't use the preset, that's super easy to install/use the plugin manually.

Note: we may change our current SVGR/SVGO defaults in another PR, but that will be a breaking change. Tracked in #10679.

Usage

Preset:

export default {
  presets: [
    [
      'classic',
      {
        svgr: {
          svgrConfig: { /* SVGR options here */ }
        } 
      },
    ],
  ],
};

Plugin:

export default {
  plugins: [
    [
      'svgr',
      {
        svgrConfig: { /* SVGR options here */ }
      }
    ]
  ],
}

Note the API is using svgr.svgrConfig on purpose, it's not a mistake. We might add plugin options that are not directly SVGR options in the future but are more related to the SVGR + Webpack (loader) integration. Or options that decide whether or not to merge the provided config into the default one.

Customizing SVGO

Provide custom SVGO options this way:

export default {
  presets: [
    [
      'classic',
      {
        svgr: {
          svgrConfig: { svgoConfig: { } }
        } 
      },
    ],
  ],
};

If you want to use a custom svgo.config.js file you can use svgoConfig: undefined. When not passing any explicit SVGO config options (which we do by default), the SVGO config file will be used.

Test Plan

CI + Argos

Test links

Pages with SVGs:

• https://deploy-preview-10677--docusaurus-2.netlify.app/docs/markdown-features/assets/#inline-svgs
• https://deploy-preview-10677--docusaurus-2.netlify.app/tests/pages/svg

Docs:

• https://deploy-preview-10677--docusaurus-2.netlify.app/docs/api/plugins/@docusaurus/plugin-svgr
• https://deploy-preview-10677--docusaurus-2.netlify.app/docs/using-plugins#using-presets

Configuration	Without custom .svgo.config.js	With custom .svgo.config.js
Image

Related issues/PRs

See:

• fix Multiple inline SVGs on a page can clash #8297
• fix Unable to import SVG generated by Lucidchart failing with "SyntaxError: unknown file: Namespace tags are not supported by default" #10636
• chore: tailor svgo config for inline svgs #10205
• chore: load or create svgo.config.js #10211