Use mini-svg-data-uri to compress svg

package-lock.json

@@ -11,6 +11,7 @@
       "devDependencies": {
         "css-loader": "^6.0.0",
         "file-loader": "^6.2.0",
+        "mini-svg-data-uri": "^1.3.3",
         "sass": "^1.35.2",
         "sass-loader": "^12.1.0",
         "style-loader": "^3.1.0",
@@ -1035,6 +1036,15 @@
         "node": ">=6"
       }
     },
+    "node_modules/mini-svg-data-uri": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/mini-svg-data-uri/-/mini-svg-data-uri-1.3.3.tgz",
+      "integrity": "sha512-+fA2oRcR1dJI/7ITmeQJDrYWks0wodlOz0pAEhKYJ2IVc1z0AnwJUsKY2fzFmPAM3Jo9J0rBx8JAA9QQSJ5PuA==",
+      "dev": true,
+      "bin": {
+        "mini-svg-data-uri": "cli.js"
+      }
+    },
     "node_modules/minimist": {
       "version": "1.2.5",
       "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
@@ -2677,6 +2687,12 @@
       "integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
       "dev": true
     },
+    "mini-svg-data-uri": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/mini-svg-data-uri/-/mini-svg-data-uri-1.3.3.tgz",
+      "integrity": "sha512-+fA2oRcR1dJI/7ITmeQJDrYWks0wodlOz0pAEhKYJ2IVc1z0AnwJUsKY2fzFmPAM3Jo9J0rBx8JAA9QQSJ5PuA==",
+      "dev": true
+    },
     "minimist": {
       "version": "1.2.5",
       "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",

package.json

@@ -25,6 +25,7 @@
   "devDependencies": {
     "css-loader": "^6.0.0",
     "file-loader": "^6.2.0",
+    "mini-svg-data-uri": "^1.3.3",
     "sass": "^1.35.2",
     "sass-loader": "^12.1.0",
     "style-loader": "^3.1.0",

webpack.config.js

@@ -1,5 +1,10 @@
 var path = require('path');
 
+/* mini-svg-data-uri */
+// converts SVGs into the most compact, compressible data: URI that SVG-supporting browsers tolerate
+// https://github.com/tigt/mini-svg-data-uri
+var svgToMiniDataURI = require('mini-svg-data-uri');
+
 module.exports = {
   mode: "development", // "production" | "development" | "none"
   entry: "./src/index.js", // string | object | array
@@ -17,7 +22,8 @@ module.exports = {
         use: ['style-loader', 'css-loader', 'sass-loader'],
       },
       {
-        test: /\.(png|svg|jpe?g|gif)$/i,
+        //test: /\.(png|svg|jpe?g|gif)$/i,
+        test: /\.(png|jpe?g|gif)$/i,
         //type: 'asset/resource',
         use: [
           {
@@ -34,6 +40,17 @@ module.exports = {
         //  },
         //],
       },
+      {
+        test: /\.svg$/i,
+        use: [
+          {
+            loader: 'url-loader',
+            options: {
+              generator: (content) => svgToMiniDataURI(content.toString()),
+            },
+          },
+        ],
+      },
     ],
   },
 };