Disable inline SVGs

[tobi1220]

Dear community,

I see the point of having inline SVGs because this enables you to style your SVG with stylings from outside, e.g. color variables based on the currently selected theme etc. However, since we have some big graphics displaying a lot of information, we usually want to enable the user to open specific assets in a new tab and, if desired, download them. We currently achieved this by swizzling the MDXComponents/Img component with a wrapper (safe) which, amongst some other marginal things, wraps the <img> in an <a>-tag with the href set to the src of the img if the <img>-tag has the attribute clickable. We always add our assets to our Docs MDX pages with the default <img> HTML tag insted of the MarkDown syntax ![alt](/path/to/asset) and the src set to the import of the asset like this:

import MyAsset from "@site/static/docs/path/to/my/asset.svg";

<img src={MyAsset} clickable />

Question

The problem is that due to SVGR / SVGO, the import of an SVG returns a functional React component which is hard to make openable in a new tab and downloadable.
Is there a way to disable SVGR / SVGO / the conversion from SVG files to React components in Docusaurus? Maybe inside the docusaurus.config.js, in the plugins array?

Workarounds I've tried:

• Just passing the file location instead of the import as src to the img tag and then handle everything in the wrapper.
  However since we use both SVGs and non-vector image formats and for maintainability reasons we don't want to use imports for all non-vector images and just pass the path for all SVGs as this will just make it harder to maintain. However, we also don't want to stop using the imports entirely, as, iirc, importing other assets does some optimizing on them.
• Importing with pathname:///asset.svg
  Yes this lets me import SVGs without having them to go through the SVG loader, however, it's the same as the last point, it makes it harder to maintain if all SVG paths have to be prefixed with pathname:///.
• Blob and URL.createObjectURL()
  I've tried just calling the React function you get back from importing with some default values like ({title: "test", titleId: 0}) (since they are required afaik), store the rendered SVG as a blob, create an object URL for it and then open this URL onClick like this:

  const svgBlob = new Blob([renderToStaticMarkup(svgReact)], {
      type: "image/svg+xml",
  });
  open(URL.createObjectURL(svgBlob));
  //URL.revokeObjectURL(svgBlob);

  and this does indeed open the SVG in a new tab, however, by right-clicking the SVG, the option "Save as..." is greyed out from the
  context menu. This confused me, since this what is opened is exactly the same as if I would just open the SVG in my browser
  manually. I've also tried this with a File() which inherits from Blob like this:

  const svgFile = new File([renderToStaticMarkup(svgReact)], "test.svg", {
      type: "image/svg+xml",
  });
  open(URL.createObjectURL(svgFile));
  //URL.revokeObjectURL(svgFile);

  but that didn't fix it. I guess blobs opened like that just can't be saved.
• Canvas
  I WAS thinking about drawing the SVG into a canvas which displays it and then onClick call toDataURL() and open said URL, but I don't want to have all these huge URLs plus I don't even know if some of our SVGs would be too big to get them into a Data URL and open them. Also, I think this defeats the purpose as the content of a canvas is not scalable / not a vector (not sure though if that would be achieveble). I also thought about getting the CanvasCaptureMediaStreamTrack of the canvas, put it into a MediaSource and createObjectURL() for that but this just seems too farfetch'd.

[slorber]

Webpack allows you to force-override the active loaders for a given file extension:
https://webpack.js.org/concepts/loaders/#inline

It's not super portable (we may move off Webpack later) but you can force this way the usage of:

• file-loader/url-loader: gives you an URL of the SVG asset
• raw-loader: gives you the source string of the SVG asset

One example is documented here: https://docusaurus.io/docs/markdown-features/react#importing-code-snippets

---

Note: if your SVG is in /static you can just reference it without importing it:

<img src="/docs/path/to/my/asset.svg" clickable />

---

An alternative is to use configureWebpack() to register an Asset Modules config: https://webpack.js.org/guides/asset-modules/

I haven't tested it but you can try this:

{
  test: /\.svg/,
  resourceQuery: /myResourceQuery/,
  type: 'asset/resource',
}

import MyAsset from "@site/static/docs/path/to/my/asset.svg?myResourceQuery";

Unfortunately I can't help more on Asset Modules, I was unable to finalize the adoption of this Webpack 5 feature in Docusaurus, see stale PR: #4708

[tobi1220]

Thanks a lot for your quick reply!

Webpack allows you to force-override the active loaders for a given file extension:
https://webpack.js.org/concepts/loaders/#inline

I don't want the import statement for an SVG to look different from the import of any other asset. I thought it would be a better idea to just disable it globally.

---

Note: if your SVG is in /static you can just reference it without importing it:

Same as above, all the other assets are imported as well.

---

An alternative is to use configureWebpack() to register an Asset Modules config: https://webpack.js.org/guides/asset-modules/

Thanks a lot for this! I've now added a custom plugin like this:

plugins: [
    function customWebpackPlugin() {
        return {
            name: "custom-webpack-plugin",
            configureWebpack() {
                const configNext = {
                    module: {
                        rules: [
                            {
                                test: /\.svg$/,
                                use: ["file-loader"],
                            },
                        ],
                    },
                };
                return { ...configNext };
            },
        };
    },
    //...
]

I've tested this and so far it works! However, as you mentioned in #8001, it's not recommended to globally disable SVGR because it's also used in the internal theme? This might be a reason to not implement this. Do you know what might get destroyed in the theme by disabling SVGR?

[slorber]

Hmmm maybe I'm wrong, I think we have inline React SVG components but we don't import any .svg file in the theme so this could be safe. If it renders nicely without failure it's probably fine 👍

Note: you can also play with include/exclude attributes in Webpack rules only to apply a loader to some sub-paths.

I've opened a dedicated issue to make it easier to disable/customize SVGR: #9192

[tobi1220]

If it renders nicely without failure it's probably fine 👍

Thanks, in that case I'll implement it as mentioned.

Note: you can also play with include/exclude attributes in Webpack rules only to apply a loader to some sub-paths.

I'll look more into this. This sounds exactly like what we need, I would narrow my custom rule to only apply to /static/docs/ to make sure not to break anything within the internal theme.

I've opened a dedicated issue to make it easier to disable/customize SVGR: #9192

Thanks a lot for this. I decided against a proposal because I wasn't sure if this is something other people would actually find useful. As I mentioned, I fully get the motivation behind loading SVGs inline instead of from a resource; I just assumed that our usecase of being able to open/save an SVG wouldn't apply to others.

[tobi1220]

Thanks for your suggestion of using the include shorthand for webpack rules. I've implemented it like this now:

const path = require("path");

plugins: [
    function customWebpackPlugin() {
        return {
            name: "custom-webpack-plugin",
            configureWebpack() {
                return {
                    module: {
                        rules: [
                            {
                                test: /\.svg$/,
                                use: ["file-loader"],
                                include: path.resolve(
                                    __dirname,
                                    "static/docs/"
                                ),
                            },
                        ],
                    },
                };
            },
        };
    },
],

That way it is ensured that nothing can internally break.