chore: load or create svgo.config.js

[SethFalco]

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.

[netlify]

✅ [V2]

Built without sensitive environment variables

Name	Link
🔨 Latest commit	6398ae8
🔍 Latest deploy log	https://app.netlify.com/sites/docusaurus-2/deploys/66677a38a437600008bf777d
😎 Deploy Preview	https://deploy-preview-10211--docusaurus-2.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[github-actions]

⚡️ Lighthouse report for the deploy preview of this PR

URL	Performance	Accessibility	Best Practices	SEO	PWA	Report
/	🟠 67	🟢 98	🟢 96	🟢 100	🟠 88	Report
/docs/installation	🟠 65	🟢 96	🟢 100	🟢 100	🟠 88	Report
/docs/category/getting-started	🟠 74	🟢 100	🟢 100	🟢 90	🟠 88	Report
/blog	🟠 70	🟢 100	🟢 100	🟢 90	🟠 88	Report
/blog/preparing-your-site-for-docusaurus-v3	🟠 64	🟢 96	🟢 100	🟢 100	🟠 88	Report
/blog/tags/release	🟠 67	🟢 100	🟢 100	🟢 90	🟠 88	Report
/blog/tags	🟠 73	🟢 100	🟢 100	🟢 90	🟠 88	Report