Note: This is a draft! It does work, and all tests are passing, but I'm not very familiar with the repository and wary that I haven't handled loading files and applying them to the webpack configuration correctly. (Or if you're even ok with that approach!)

This is mostly intended to be a starting point, any feedback or mentorship would be appreciated! Once we're happy with the implementation and interface, I can introduce new tests and documentation.

Pre-flight checklist

• I have read the Contributing Guidelines on pull requests.
• [TODO] If this is a code change: I have written unit tests and/or added dogfooding pages to fully verify the new behavior.
• If this is a new API or substantial change: the PR has an accompanying issue (closes #0000) and the maintainers have approved on my working plan.

Motivation

There have been discussions about introducing an easier way for users to configure SVGO. This is an attempt to expose it similarly to how SVGO itself and SVGR does.

• SVGO looks for a svgo.config.js (or .mjs/.cjs) file.
• SVGR supports and recommends using a svgo.config.js file, though… based on the docs I don't know how. 😓

This PR makes it so if a svgo.config.js file is present in the site directory, it loads it instead of using what Docusaurus defines. If it is not present, Docusaurus uses a default config which is the same as before.

Changes

• loadFreshModule is no longer async as it never called await internally anyway, this allowed me to use it in getFileLoaderUtils without much fuss.
• when Docusaurus processes files, writes svgo.config.js to the generated files
• when invoking getFileLoaderUtils, reads svgo.config.js from generated files and passes that config to SVGO.

Test Plan

Test links

Before

This is how the dogfooding page looked originally, and still looks when no svgo.config.js file is present. Docusaurus defines a default config if one isn't defined otherwise.

After

I now created a svgo.config.js file with the following content:

website/svgo.config.js

const path = require('path');

module.exports = {
  plugins: [
    {
      name: 'preset-default',
      params: {
        overrides: {
          removeTitle: false,
          removeViewBox: false,
        },
      },
    },
    {
      name: 'prefixIds',
      params: {
        delim: '',
        prefix: (_, info) => path.parse(info.path).name,
      },
    },
  ],
};

This is how the dogfooding page looks with the config applied. We load the config from the generated files, which is written to while building:

Deploy preview: https://deploy-preview-10211--docusaurus-2.netlify.app/tests/docs/tests/svgs/

Related issues/PRs

• Closes Multiple inline SVGs on a page can clash #8297
• Previous solution chore: tailor svgo config for inline svgs #10205
• cspell errors added upstream in fix: add to software-terms dictionary streetsidesoftware/cspell-dicts#3280

Edit: I also just noticed #9192. No promises, but I'll give it a peek and see if this is something I can handle in the near future.