From 3570aa06c88fd79b975196418f37896bdd628baa Mon Sep 17 00:00:00 2001
From: Bogdan Doroschenko <bogdandoroschenko@gmail.com>
Date: Mon, 14 Dec 2020 18:17:03 +0300
Subject: [PATCH] fix(v2): don't remove viewBox from svg

---
 .../src/webpack/__tests__/base.test.ts        | 33 ++++++++++++++++++-
 .../src/webpack/__tests__/utils.test.ts       | 18 +++++++++-
 packages/docusaurus/src/webpack/base.ts       |  5 +--
 packages/docusaurus/src/webpack/utils.ts      | 20 +++++++++++
 4 files changed, 70 insertions(+), 6 deletions(-)

diff --git a/packages/docusaurus/src/webpack/__tests__/base.test.ts b/packages/docusaurus/src/webpack/__tests__/base.test.ts
index 43ead9104f..db6acff6dc 100644
--- a/packages/docusaurus/src/webpack/__tests__/base.test.ts
+++ b/packages/docusaurus/src/webpack/__tests__/base.test.ts
@@ -7,7 +7,13 @@
 
 import path from 'path';
 
-import {excludeJS, clientDir, getDocusaurusAliases} from '../base';
+import {
+  excludeJS,
+  clientDir,
+  getDocusaurusAliases,
+  createBaseConfig,
+} from '../base';
+import * as utils from '../utils';
 import {mapValues} from 'lodash';
 
 describe('babel transpilation exclude logic', () => {
@@ -69,3 +75,28 @@ describe('getDocusaurusAliases()', () => {
     expect(relativeDocusaurusAliases).toMatchSnapshot();
   });
 });
+
+describe('base webpack config', () => {
+  const props = {
+    outDir: '',
+    siteDir: '',
+    baseUrl: '',
+    generatedFilesDir: '',
+    routesPaths: '',
+  };
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  test('should use svg rule', () => {
+    const fileLoaderUtils = utils.getFileLoaderUtils();
+    const mockSvg = jest.spyOn(fileLoaderUtils.rules, 'svg');
+    jest
+      .spyOn(utils, 'getFileLoaderUtils')
+      .mockImplementation(() => fileLoaderUtils);
+
+    createBaseConfig(props, false, false);
+    expect(mockSvg).toBeCalled();
+  });
+});
diff --git a/packages/docusaurus/src/webpack/__tests__/utils.test.ts b/packages/docusaurus/src/webpack/__tests__/utils.test.ts
index 993acd35af..5785bb7d89 100644
--- a/packages/docusaurus/src/webpack/__tests__/utils.test.ts
+++ b/packages/docusaurus/src/webpack/__tests__/utils.test.ts
@@ -12,7 +12,7 @@ import {
 } from 'webpack';
 import path from 'path';
 
-import {applyConfigureWebpack} from '../utils';
+import {applyConfigureWebpack, getFileLoaderUtils} from '../utils';
 import {
   ConfigureWebpackFn,
   ConfigureWebpackFnMergeStrategy,
@@ -132,3 +132,19 @@ describe('extending generated webpack config', () => {
     });
   });
 });
+
+describe('getFileLoaderUtils()', () => {
+  test('plugin svgo/removeViewBox should be disabled', () => {
+    const use = getFileLoaderUtils().rules.svg().use;
+    expect(use).toContainEqual(
+      expect.objectContaining({
+        loader: '@svgr/webpack',
+        options: expect.objectContaining({
+          svgoConfig: {
+            plugins: [{removeViewBox: false}],
+          },
+        }),
+      }),
+    );
+  });
+});
diff --git a/packages/docusaurus/src/webpack/base.ts b/packages/docusaurus/src/webpack/base.ts
index fb5264ec01..c165d79a95 100644
--- a/packages/docusaurus/src/webpack/base.ts
+++ b/packages/docusaurus/src/webpack/base.ts
@@ -151,6 +151,7 @@ export function createBaseConfig(
       rules: [
         fileLoaderUtils.rules.images(),
         fileLoaderUtils.rules.media(),
+        fileLoaderUtils.rules.svg(),
         fileLoaderUtils.rules.otherAssets(),
         {
           test: /\.(j|t)sx?$/,
@@ -183,10 +184,6 @@ export function createBaseConfig(
             onlyLocals: isServer,
           }),
         },
-        {
-          test: /\.svg$/,
-          use: '@svgr/webpack?-prettier,+svgo,+titleProp,+ref![path]',
-        },
       ],
     },
     plugins: [
diff --git a/packages/docusaurus/src/webpack/utils.ts b/packages/docusaurus/src/webpack/utils.ts
index 58f63c4fba..e3eb231c9c 100644
--- a/packages/docusaurus/src/webpack/utils.ts
+++ b/packages/docusaurus/src/webpack/utils.ts
@@ -298,6 +298,26 @@ export function getFileLoaderUtils(): Record<string, any> {
       };
     },
 
+    svg: (): RuleSetRule => {
+      return {
+        use: [
+          {
+            loader: '@svgr/webpack',
+            options: {
+              prettier: false,
+              svgo: true,
+              svgoConfig: {
+                plugins: [{removeViewBox: false}],
+              },
+              titleProp: true,
+              ref: ![path],
+            },
+          },
+        ],
+        test: /\.svg$/,
+      };
+    },
+
     otherAssets: (): RuleSetRule => {
       return {
         use: [loaders.file({folder: 'files'})],