Webpack: serve SVG icons as files

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",

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

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$/,

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"