added svg sprite building

assets/js/app.js

@@ -3,6 +3,10 @@
 // its own CSS file.
 import "../css/app.scss";
 
+// Import icons for sprite-loader
+// brand icon
+import "../node_modules/@fortawesome/fontawesome-free/svgs/solid/skull-crossbones.svg";
+
 // webpack automatically bundles all modules in your
 // entry points. Those entry points can be configured
 // in "webpack.config.js".

assets/package.json

@@ -7,8 +7,11 @@
     "watch": "webpack --mode development --watch"
   },
   "dependencies": {
+    "@fortawesome/fontawesome-free": "^5.15.2",
+    "@mdi/svg": "^5.9.55",
     "@popperjs/core": "^2.8.4",
     "bootstrap": "^5.0.0-beta2",
+    "bootstrap-icons": "^1.4.0",
     "phoenix": "file:../deps/phoenix",
     "phoenix_html": "file:../deps/phoenix_html",
     "phoenix_live_view": "file:../deps/phoenix_live_view",
@@ -30,6 +33,7 @@
     "purgecss-webpack-plugin": "^4.0.2",
     "sass": "^1.x",
     "sass-loader": "^10.x",
+    "svg-sprite-loader": "^5.2.1",
     "webpack": "^5.x",
     "webpack-cli": "^4.x"
   }

assets/webpack.config.js

@@ -3,6 +3,7 @@ const glob = require("glob-all");
 const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
 const CopyWebpackPlugin = require("copy-webpack-plugin");
+const SpriteLoaderPlugin = require("svg-sprite-loader/plugin");
 const PurgecssPlugin = require("purgecss-webpack-plugin");
 
 module.exports = (env, options) => {
@@ -35,10 +36,37 @@ module.exports = (env, options) => {
             "postcss-loader",
           ],
         },
+        {
+          test: /\.svg$/,
+          loader: "svg-sprite-loader",
+          options: {
+            extract: true,
+            spriteFilename: "icons.svg",
+            publicPath: "../images/",
+            symbolId: (filePath) => {
+              if (filePath.includes("bootstrap-icons")) {
+                return `bsi-${path.basename(filePath).slice(0, -4)}`;
+              } else if (filePath.includes("@fortawesome")) {
+                if (filePath.includes("brands")) {
+                  return `fab-${path.basename(filePath).slice(0, -4)}`;
+                } else if (filePath.includes("solid")) {
+                  return `fas-${path.basename(filePath).slice(0, -4)}`;
+                } else {
+                  return `far-${path.basename(filePath).slice(0, -4)}`;
+                }
+              } else if (filePath.includes("@mdi")) {
+                return `mdi-${path.basename(filePath).slice(0, -4)}`;
+              } else {
+                return `${path.basename(filePath).slice(0, -4)}`;
+              }
+            },
+          },
+        },
       ],
     },
     plugins: [
       new MiniCssExtractPlugin({ filename: "../css/app.css" }),
+      new SpriteLoaderPlugin({ plainSprite: true }),
       new CopyWebpackPlugin({
         patterns: [{ from: "static/", to: "../" }],
       }),