fix(core): restore core svg file-loader (#10820)

packages/docusaurus-plugin-svgr/src/index.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import {createLoader} from './svgrLoader';
+import {enhanceConfig} from './svgrLoader';
 import type {LoadContext, Plugin} from '@docusaurus/types';
 import type {PluginOptions, Options} from './options';
 
@@ -16,11 +16,7 @@ export default function pluginSVGR(
   return {
     name: 'docusaurus-plugin-svgr',
     configureWebpack: (config, isServer) => {
-      return {
-        module: {
-          rules: [createLoader({isServer, svgrConfig: options.svgrConfig})],
-        },
-      };
+      enhanceConfig(config, {isServer, svgrConfig: options.svgrConfig});
     },
   };
 }

packages/docusaurus-plugin-svgr/src/svgrLoader.ts

@@ -8,7 +8,7 @@
 import {getFileLoaderUtils} from '@docusaurus/utils';
 
 import type {SVGRConfig, SVGOConfig} from './options';
-import type {RuleSetRule} from 'webpack';
+import type {Configuration, RuleSetRule} from 'webpack';
 
 // TODO Docusaurus v4: change these defaults?
 //  see https://github.com/facebook/docusaurus/issues/8297
@@ -37,7 +37,7 @@ const DefaultSVGRConfig: SVGRConfig = {
 
 type Params = {isServer: boolean; svgrConfig: SVGRConfig};
 
-function createSVGRLoader(params: Params): RuleSetRule {
+function createSVGRRule(params: Params): RuleSetRule {
   const options: SVGRConfig = {
     ...DefaultSVGRConfig,
     ...params.svgrConfig,
@@ -48,22 +48,42 @@ function createSVGRLoader(params: Params): RuleSetRule {
   };
 }
 
-export function createLoader(params: Params): RuleSetRule {
+export function enhanceConfig(config: Configuration, params: Params): void {
   const utils = getFileLoaderUtils(params.isServer);
-  return {
+
+  const rules = config?.module?.rules as RuleSetRule[];
+
+  const existingSvgRule: RuleSetRule = (() => {
+    const rule = rules.find(
+      (r) => String(r.test) === String(utils.rules.svgs().test),
+    );
+    if (!rule) {
+      throw new Error(
+        "Docusaurus built-in SVG rule couldn't be found. The SVGR plugin can't enhance it.",
+      );
+    }
+    return rule;
+  })();
+
+  const newSvgRule: RuleSetRule = {
     test: /\.svg$/i,
     oneOf: [
       {
-        use: [createSVGRLoader(params)],
+        use: [createSVGRRule(params)],
         // 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: [utils.loaders.url({folder: 'images'})],
-      },
+      existingSvgRule,
     ],
   };
+
+  // This is annoying, but we have to "wrap" the existing SVG rule
+  // Adding another extra SVG rule (first or last) will not "override"
+  // the default: both rules will be applied (from last to bottom) leading to
+  // conflicting behavior.
+  const index = rules.indexOf(existingSvgRule);
+  rules[index] = newSvgRule;
 }

packages/docusaurus-types/src/plugin.d.ts

@@ -140,7 +140,7 @@ export type Plugin<Content = unknown> = {
     isServer: boolean,
     configureWebpackUtils: ConfigureWebpackUtils,
     content: Content,
-  ) => ConfigureWebpackResult;
+  ) => ConfigureWebpackResult | void;
   configurePostCss?: (options: PostCssOptions) => PostCssOptions;
   getThemePath?: () => string;
   getTypeScriptThemePath?: () => string;

packages/docusaurus-utils/src/webpackUtils.ts

@@ -43,6 +43,7 @@ type FileLoaderUtils = {
   };
   rules: {
     images: () => RuleSetRule;
+    svgs: () => RuleSetRule;
     fonts: () => RuleSetRule;
     media: () => RuleSetRule;
     otherAssets: () => RuleSetRule;
@@ -119,6 +120,15 @@ function createFileLoaderUtils({
       test: /\.(?:ico|jpe?g|png|gif|webp|avif)(?:\?.*)?$/i,
     }),
 
+    /**
+     * The SVG rule is isolated on purpose: our SVGR plugin enhances it
+     * See https://github.com/facebook/docusaurus/pull/10820
+     */
+    svgs: () => ({
+      use: [loaders.url({folder: 'images'})],
+      test: /\.svg$/i,
+    }),
+
     fonts: () => ({
       use: [loaders.url({folder: 'fonts'})],
       test: /\.(?:woff2?|eot|ttf|otf)$/i,

packages/docusaurus/src/webpack/base.ts

@@ -251,6 +251,7 @@ export async function createBaseConfig({
     module: {
       rules: [
         fileLoaderUtils.rules.images(),
+        fileLoaderUtils.rules.svgs(),
         fileLoaderUtils.rules.fonts(),
         fileLoaderUtils.rules.media(),
         fileLoaderUtils.rules.otherAssets(),

project-words.txt

@@ -323,6 +323,7 @@ Sucipto
 sunsetting
 supabase
 Supabase
+svgs
 swizzlable
 Tagkey
 Teik

website/_dogfooding/dogfooding.css

@@ -10,6 +10,15 @@ html {
     &.plugin-docs.plugin-id-docs-tests {
       .red > a {
         color: red;
+
+        &::after {
+          background-image: url('./red.svg');
+          background-size: contain;
+          margin-left: 0.5rem;
+          width: 1rem;
+          height: 1rem;
+          content: ' ';
+        }
       }
 
       .navbar {

website/_dogfooding/red.svg

@@ -0,0 +1,4 @@
+
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1">
+  <path d="M0,0h1v1H0" fill="#f00"/>
+</svg>