Migrate SVGR support from core to plugin

[slorber]

Have you read the Contributing Guidelines on issues?

• [X] I have read the Contributing Guidelines on issues.

Motivation

The SVGR support is currently in Docusaurus core:

// webpackUtils.ts

    svg: () => ({
      test: /\.svg$/i,
      oneOf: [
        {
          use: [
            {
              loader: require.resolve('@svgr/webpack'),
              options: {
                prettier: false,
                svgo: true,
                svgoConfig: {
                  plugins: [
                    {
                      name: 'preset-default',
                      params: {
                        overrides: {
                          removeTitle: false,
                          removeViewBox: false,
                        },
                      },
                    },
                  ],
                },
                titleProp: true,
                ref: ![path],
              },
            },
          ],
          // We don't want to use SVGR loader for non-React source code
          // ie we don't want to use SVGR for CSS files...
          issuer: {
            and: [/\.(?:tsx?|jsx?|mdx?)$/i],
          },
        },
        {
          use: [loaders.url({folder: 'images'})],
        },
      ],
    }),`

We should try to:

• move it from core to an official SVGR plugin
• add it by default to the preset ({svgr: true}) with ability to disable ({svgr: false})
• mention it's a breaking change but unlikely to affect most users
• make it possible to customize the SVGR + SVGO config {svgr: false}, {svgr: {...svgrOptions}}...)
• document it's not particularly a recommended pattern, see https://kurtextrem.de/posts/svg-in-js

Challenges:

• Not sure how to deal with the oneOf Webpack rule so that we can keep url/file-loader support in core and CSS files by default.
• Is SVGR needed for any theme component? This requires to be double-checked.

Motivation:

• Some users want to customize the SVGR / SVGO config
• Some users want to plainly disable support: https://github.com/facebook/docusaurus/discussions/9187

Self-service

• [ ] I'd be willing to do some initial work on this proposal myself.

[pritipsingh]

Hey @slorber I know it says it's for apprentice, but I would love to take this up. Will it be possible?

[slorber]

@pritipsingh if you understand what should be done and feel confortable handling it alone (ie I can't spend time helping you), please submit a draft PR.

[pritipsingh]

thanks @slorber happy to take it up alone as I have some experience with component library. will start working on it tomorrow and will try to make a pr asap