fix(v2): fix svg loader for CSS files (#3965)

* bug(v2): fix svg loader for styles re #3964

* ensure we only use SVGR loader in source code that can use React (ie not in CSS files)

* fix test

Co-authored-by: slorber <lorber.sebastien@gmail.com>

packages/docusaurus/src/webpack/__tests__/utils.test.ts

@@ -135,8 +135,8 @@ describe('extending generated webpack config', () => {
 
 describe('getFileLoaderUtils()', () => {
   test('plugin svgo/removeViewBox should be disabled', () => {
-    const {use} = getFileLoaderUtils().rules.svg();
+    const {oneOf} = getFileLoaderUtils().rules.svg();
-    expect(use).toContainEqual(
+    expect(oneOf[0].use).toContainEqual(
       expect.objectContaining({
         loader: '@svgr/webpack',
         options: expect.objectContaining({

packages/docusaurus/src/webpack/utils.ts

@@ -300,21 +300,33 @@ export function getFileLoaderUtils(): Record<string, any> {
 
     svg: (): RuleSetRule => {
       return {
-        use: [
+        test: /\.svg?$/,
+        oneOf: [
           {
-            loader: '@svgr/webpack',
+            use: [
-            options: {
+              {
-              prettier: false,
+                loader: '@svgr/webpack',
-              svgo: true,
+                options: {
-              svgoConfig: {
+                  prettier: false,
-                plugins: [{removeViewBox: false}],
+                  svgo: true,
+                  svgoConfig: {
+                    plugins: [{removeViewBox: false}],
+                  },
+                  titleProp: true,
+                  ref: ![path],
+                },
               },
-              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: {
+              test: /\.(ts|tsx|js|jsx|md|mdx)$/,
             },
           },
+          {
+            use: [loaders.url({folder: 'images'})],
+          },
         ],
-        test: /\.svg$/,
       };
     },