From 638d6015b1c49863468a0599609e3e107d08bc2d Mon Sep 17 00:00:00 2001
From: Aleksandr Kitov <akitov@alfabank.ru>
Date: Mon, 9 Nov 2020 18:38:57 +0300
Subject: [PATCH] feat(webpack-client): use svg-url-loader for svg

---
 .pnp.js                                       | 48 +++++++++++++++++++
 packages/arui-scripts/package.json            |  1 +
 .../src/configs/webpack.client.dev.ts         | 11 ++++-
 .../src/configs/webpack.client.prod.ts        | 11 ++++-
 yarn.lock                                     | 36 ++++++++++++++
 5 files changed, 105 insertions(+), 2 deletions(-)

diff --git a/.pnp.js b/.pnp.js
index 6b5580e..038406f 100755
--- a/.pnp.js
+++ b/.pnp.js
@@ -4847,6 +4847,10 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) {
         "supports-hyperlinks",
         "npm:2.1.0"
       ],
+      [
+        "svg-url-loader",
+        "virtual:2e1cfe8ca4b94041027a551f92706165e18b0d6493f6e559da277f2ca53e1af7ab73aac8bd8b94a9a5b92cf04bb71a71dc7d071380908874ca77c2132070d0ad#npm:6.0.0"
+      ],
       [
         "svgo",
         "npm:1.3.2"
@@ -9663,6 +9667,7 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) {
             ["start-server-webpack-plugin", "npm:2.2.5"],
             ["strip-ansi", "npm:6.0.0"],
             ["style-loader", "virtual:2e1cfe8ca4b94041027a551f92706165e18b0d6493f6e559da277f2ca53e1af7ab73aac8bd8b94a9a5b92cf04bb71a71dc7d071380908874ca77c2132070d0ad#npm:1.1.3"],
+            ["svg-url-loader", "virtual:2e1cfe8ca4b94041027a551f92706165e18b0d6493f6e559da277f2ca53e1af7ab73aac8bd8b94a9a5b92cf04bb71a71dc7d071380908874ca77c2132070d0ad#npm:6.0.0"],
             ["tar", "npm:4.4.8"],
             ["terser-webpack-plugin", "virtual:2e1cfe8ca4b94041027a551f92706165e18b0d6493f6e559da277f2ca53e1af7ab73aac8bd8b94a9a5b92cf04bb71a71dc7d071380908874ca77c2132070d0ad#npm:1.4.5"],
             ["ts-jest", "virtual:c9c5f564594538def146b96d58b5530e5c64119a8985a14e08f7df0912f9769655b9f869a7f492698e972590c47fd3c1a217d4267fb0fbf0da45c1184f8c2df2#npm:25.5.1"],
@@ -9788,6 +9793,7 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) {
             ["start-server-webpack-plugin", "npm:2.2.5"],
             ["strip-ansi", "npm:6.0.0"],
             ["style-loader", "virtual:2e1cfe8ca4b94041027a551f92706165e18b0d6493f6e559da277f2ca53e1af7ab73aac8bd8b94a9a5b92cf04bb71a71dc7d071380908874ca77c2132070d0ad#npm:1.1.3"],
+            ["svg-url-loader", "virtual:2e1cfe8ca4b94041027a551f92706165e18b0d6493f6e559da277f2ca53e1af7ab73aac8bd8b94a9a5b92cf04bb71a71dc7d071380908874ca77c2132070d0ad#npm:6.0.0"],
             ["tar", "npm:4.4.8"],
             ["terser-webpack-plugin", "virtual:2e1cfe8ca4b94041027a551f92706165e18b0d6493f6e559da277f2ca53e1af7ab73aac8bd8b94a9a5b92cf04bb71a71dc7d071380908874ca77c2132070d0ad#npm:1.4.5"],
             ["ts-jest", "virtual:2e1cfe8ca4b94041027a551f92706165e18b0d6493f6e559da277f2ca53e1af7ab73aac8bd8b94a9a5b92cf04bb71a71dc7d071380908874ca77c2132070d0ad#npm:25.5.1"],
@@ -13868,6 +13874,21 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) {
             "webpack"
           ],
           "linkType": "HARD",
+        }],
+        ["virtual:ae006568accb80f153c5c83bd38f55496c565061fbe9b55b486b01b510ac520c6af895d91654b7c97716f5d256d1fcaa846a9a49cab925d984144a0e5f2d06d0#npm:6.0.0", {
+          "packageLocation": "./.yarn/$$virtual/file-loader-virtual-7955467c42/0/cache/file-loader-npm-6.0.0-56aa137384-745f5ee763.zip/node_modules/file-loader/",
+          "packageDependencies": [
+            ["file-loader", "virtual:ae006568accb80f153c5c83bd38f55496c565061fbe9b55b486b01b510ac520c6af895d91654b7c97716f5d256d1fcaa846a9a49cab925d984144a0e5f2d06d0#npm:6.0.0"],
+            ["@types/webpack", "npm:4.41.22"],
+            ["loader-utils", "npm:2.0.0"],
+            ["schema-utils", "npm:2.7.1"],
+            ["webpack", "npm:4.41.5"]
+          ],
+          "packagePeers": [
+            "@types/webpack",
+            "webpack"
+          ],
+          "linkType": "HARD",
         }]
       ]],
       ["file-uri-to-path", [
@@ -17054,6 +17075,16 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) {
             ["json5", "npm:1.0.1"]
           ],
           "linkType": "HARD",
+        }],
+        ["npm:2.0.0", {
+          "packageLocation": "./.yarn/cache/loader-utils-npm-2.0.0-cf7d5aadbf-a1c2e48781.zip/node_modules/loader-utils/",
+          "packageDependencies": [
+            ["loader-utils", "npm:2.0.0"],
+            ["big.js", "npm:5.2.2"],
+            ["emojis-list", "npm:3.0.0"],
+            ["json5", "npm:2.1.3"]
+          ],
+          "linkType": "HARD",
         }]
       ]],
       ["locate-path", [
@@ -22394,6 +22425,23 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) {
           "linkType": "HARD",
         }]
       ]],
+      ["svg-url-loader", [
+        ["virtual:2e1cfe8ca4b94041027a551f92706165e18b0d6493f6e559da277f2ca53e1af7ab73aac8bd8b94a9a5b92cf04bb71a71dc7d071380908874ca77c2132070d0ad#npm:6.0.0", {
+          "packageLocation": "./.yarn/$$virtual/svg-url-loader-virtual-ae006568ac/0/cache/svg-url-loader-npm-6.0.0-c65934e254-d783933fab.zip/node_modules/svg-url-loader/",
+          "packageDependencies": [
+            ["svg-url-loader", "virtual:2e1cfe8ca4b94041027a551f92706165e18b0d6493f6e559da277f2ca53e1af7ab73aac8bd8b94a9a5b92cf04bb71a71dc7d071380908874ca77c2132070d0ad#npm:6.0.0"],
+            ["@types/webpack", "npm:4.41.22"],
+            ["file-loader", "virtual:ae006568accb80f153c5c83bd38f55496c565061fbe9b55b486b01b510ac520c6af895d91654b7c97716f5d256d1fcaa846a9a49cab925d984144a0e5f2d06d0#npm:6.0.0"],
+            ["loader-utils", "npm:2.0.0"],
+            ["webpack", "npm:4.41.5"]
+          ],
+          "packagePeers": [
+            "@types/webpack",
+            "webpack"
+          ],
+          "linkType": "HARD",
+        }]
+      ]],
       ["svgo", [
         ["npm:1.3.2", {
           "packageLocation": "./.yarn/cache/svgo-npm-1.3.2-4cceb54daa-e165973842.zip/node_modules/svgo/",
diff --git a/packages/arui-scripts/package.json b/packages/arui-scripts/package.json
index 02a9193..13021c7 100644
--- a/packages/arui-scripts/package.json
+++ b/packages/arui-scripts/package.json
@@ -83,6 +83,7 @@
         "start-server-webpack-plugin": "^2.2.1",
         "strip-ansi": "^6.0.0",
         "style-loader": "1.1.3",
+        "svg-url-loader": "^6.0.0",
         "tar": "4.4.8",
         "terser-webpack-plugin": "1.4.5",
         "ts-jest": "25.5.1",
diff --git a/packages/arui-scripts/src/configs/webpack.client.dev.ts b/packages/arui-scripts/src/configs/webpack.client.dev.ts
index 9a088cb..d6eef68 100644
--- a/packages/arui-scripts/src/configs/webpack.client.dev.ts
+++ b/packages/arui-scripts/src/configs/webpack.client.dev.ts
@@ -97,11 +97,20 @@ const webpackClientDev = applyOverrides<webpack.Configuration>(['webpack', 'webp
                 // match the requirements. When no loader matches it will fall
                 // back to the "file" loader at the end of the loader list.
                 oneOf: ([
+                    {
+                        test: [/\.svg$/],
+                        loader: require.resolve('svg-url-loader'),
+                        options: {
+                            limit: 10000,
+                            iesafe: true,
+                            name: '[name].[hash:8].[ext]',
+                        },
+                    },
                     // "url" loader works like "file" loader except that it embeds assets
                     // smaller than specified limit in bytes as data URLs to avoid requests.
                     // A missing `test` is equivalent to a match.
                     {
-                        test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/, /\.svg$/],
+                        test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
                         loader: require.resolve('url-loader'),
                         options: {
                             limit: 10000,
diff --git a/packages/arui-scripts/src/configs/webpack.client.prod.ts b/packages/arui-scripts/src/configs/webpack.client.prod.ts
index f10fcdf..ec255d2 100644
--- a/packages/arui-scripts/src/configs/webpack.client.prod.ts
+++ b/packages/arui-scripts/src/configs/webpack.client.prod.ts
@@ -152,11 +152,20 @@ const config  = applyOverrides<webpack.Configuration>(['webpack', 'webpackClient
                 // match the requirements. When no loader matches it will fall
                 // back to the "file" loader at the end of the loader list.
                 oneOf: ([
+                    {
+                        test: [/\.svg$/],
+                        loader: require.resolve('svg-url-loader'),
+                        options: {
+                            limit: 10000,
+                            iesafe: true,
+                            name: '[name].[hash:8].[ext]',
+                        },
+                    },
                     // "url" loader works like "file" loader except that it embeds assets
                     // smaller than specified limit in bytes as data URLs to avoid requests.
                     // A missing `test` is equivalent to a match.
                     {
-                        test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/, /\.svg$/],
+                        test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
                         loader: require.resolve('url-loader'),
                         options: {
                             limit: 10000,
diff --git a/yarn.lock b/yarn.lock
index becac09..2f098fd 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3475,6 +3475,7 @@ __metadata:
     start-server-webpack-plugin: ^2.2.1
     strip-ansi: ^6.0.0
     style-loader: 1.1.3
+    svg-url-loader: ^6.0.0
     tar: 4.4.8
     terser-webpack-plugin: 1.4.5
     ts-jest: 25.5.1
@@ -7102,6 +7103,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"file-loader@npm:~6.0.0":
+  version: 6.0.0
+  resolution: "file-loader@npm:6.0.0"
+  dependencies:
+    loader-utils: ^2.0.0
+    schema-utils: ^2.6.5
+  peerDependencies:
+    webpack: ^4.0.0 || ^5.0.0
+  checksum: 745f5ee763fe46f2124921ff4fb7ed601eb1e8d6ac975cf6af321b3957ce8f78afb885c636e64a9031634e85e26dc9e8ef40ebeb532153c6a80a7d06b56876cb
+  languageName: node
+  linkType: hard
+
 "file-uri-to-path@npm:1.0.0":
   version: 1.0.0
   resolution: "file-uri-to-path@npm:1.0.0"
@@ -10044,6 +10057,17 @@ fsevents@^1.2.7:
   languageName: node
   linkType: hard
 
+"loader-utils@npm:^2.0.0, loader-utils@npm:~2.0.0":
+  version: 2.0.0
+  resolution: "loader-utils@npm:2.0.0"
+  dependencies:
+    big.js: ^5.2.2
+    emojis-list: ^3.0.0
+    json5: ^2.1.2
+  checksum: a1c2e48781e1501e126a32c39bc1fb1a7e2f02bd99e5aeb8853ddaf3c121fffefcc4579367f97ca6890b58369e571af1c9ec82e4e20db238d560ab359ff25c33
+  languageName: node
+  linkType: hard
+
 "locate-path@npm:^2.0.0":
   version: 2.0.0
   resolution: "locate-path@npm:2.0.0"
@@ -14867,6 +14891,18 @@ resolve@1.1.7:
   languageName: node
   linkType: hard
 
+"svg-url-loader@npm:^6.0.0":
+  version: 6.0.0
+  resolution: "svg-url-loader@npm:6.0.0"
+  dependencies:
+    file-loader: ~6.0.0
+    loader-utils: ~2.0.0
+  peerDependencies:
+    webpack: ^4.0.0 || ^5.0.0
+  checksum: d783933fab8f9dabe6d05dd46a1cc81f5443442297c7db09406c88048254b71c92f27bbe80ce4655c5247c9df05a5c19faee83276cacd838db2160827756a5e5
+  languageName: node
+  linkType: hard
+
 "svgo@npm:^1.0.0":
   version: 1.3.2
   resolution: "svgo@npm:1.3.2"