From 58adc67e4b9024ee4fb63c2deb63241660a41a77 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sun, 26 Sep 2021 20:00:16 -0500
Subject: [PATCH] Webpack: serve SVG icons as files

---
 package.json            |  1 -
 webpack/production.js   |  1 +
 webpack/rules/assets.js | 17 ++++++++---------
 yarn.lock               |  5 -----
 4 files changed, 9 insertions(+), 15 deletions(-)

diff --git a/package.json b/package.json
index 6d07c8306..595d63c79 100644
--- a/package.json
+++ b/package.json
@@ -103,7 +103,6 @@
     "mark-loader": "^0.1.6",
     "marky": "^1.2.1",
     "mini-css-extract-plugin": "^1.6.2",
-    "mini-svg-data-uri": "^1.3.3",
     "object-assign": "^4.1.1",
     "object-fit-images": "^3.2.3",
     "object.values": "^1.1.0",
diff --git a/webpack/production.js b/webpack/production.js
index 0e1643fee..e74d09dc2 100644
--- a/webpack/production.js
+++ b/webpack/production.js
@@ -32,6 +32,7 @@ module.exports = merge(sharedConfig, {
         additional: [
           ':externals:',
           'packs/images/32-*.png', // used in emoji-mart
+          'packs/icons/*.svg',
         ],
         optional: [
           '**/locale_*.js', // don't fetch every locale; the user only needs one
diff --git a/webpack/rules/assets.js b/webpack/rules/assets.js
index e27e51cb0..a71abe5e0 100644
--- a/webpack/rules/assets.js
+++ b/webpack/rules/assets.js
@@ -2,7 +2,6 @@
 // https://webpack.js.org/guides/asset-modules/
 
 const { resolve } = require('path');
-const svgToMiniDataURI = require('mini-svg-data-uri');
 
 // These are processed in reverse-order
 // We use the name 'packs' instead of 'assets' for legacy reasons
@@ -43,32 +42,32 @@ module.exports = [{
   },
 }, {
   test: /\.svg$/,
-  type: 'asset/inline',
+  type: 'asset/resource',
   include: resolve('app', 'icons'),
   generator: {
-    dataUrl: content => svgToMiniDataURI(content.toString()),
+    filename: 'packs/icons/[name]-[contenthash:8][ext]',
   },
 }, {
   test: /\.svg$/,
-  type: 'asset/inline',
+  type: 'asset/resource',
   include: resolve('node_modules', 'bootstrap-icons'),
   generator: {
-    dataUrl: content => svgToMiniDataURI(content.toString()),
+    filename: 'packs/icons/[name]-[contenthash:8][ext]',
   },
 }, {
 
   test: /\.svg$/,
-  type: 'asset/inline',
+  type: 'asset/resource',
   include: resolve('node_modules', 'feather-icons'),
   generator: {
-    dataUrl: content => svgToMiniDataURI(content.toString()),
+    filename: 'packs/icons/[name]-[contenthash:8][ext]',
   },
 }, {
   test: /\.svg$/,
-  type: 'asset/inline',
+  type: 'asset/resource',
   include: resolve('node_modules', '@tabler'),
   generator: {
-    dataUrl: content => svgToMiniDataURI(content.toString()),
+    filename: 'packs/icons/[name]-[contenthash:8][ext]',
   },
 }, {
   test: /\.svg$/,
diff --git a/yarn.lock b/yarn.lock
index df3e25e53..ed9b10b29 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6511,11 +6511,6 @@ mini-css-extract-plugin@^1.6.2:
     schema-utils "^3.0.0"
     webpack-sources "^1.1.0"
 
-mini-svg-data-uri@^1.3.3:
-  version "1.3.3"
-  resolved "https://registry.yarnpkg.com/mini-svg-data-uri/-/mini-svg-data-uri-1.3.3.tgz#91d2c09f45e056e5e1043340b8b37ba7b50f4fac"
-  integrity sha512-+fA2oRcR1dJI/7ITmeQJDrYWks0wodlOz0pAEhKYJ2IVc1z0AnwJUsKY2fzFmPAM3Jo9J0rBx8JAA9QQSJ5PuA==
-
 minimalistic-assert@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz#2e194de044626d4a10e7f7fbc00ce73e83e4d5c7"