removed fontawesome, added heroicons, implemented custom navbar-toggler-icons

assets/css/app.scss

@@ -13,6 +13,21 @@
 /* LiveView specific CSS */
 @import "phx-liveview";
 
+/* Navbar toggler icon override */
+.navbar-toggler-icon {
+  -webkit-transition: background 150ms ease;
+  -moz-transition: background 150ms ease;
+  -o-transition: background 150ms ease;
+  -ms-transition: background 150ms ease;
+  transition: background 150ms ease;
+}
+.navbar-light .navbar-toggler.collapsed .navbar-toggler-icon {
+  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="rgba(0, 0, 0, 0.55)"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" /></svg>');
+}
+.navbar-light .navbar-toggler .navbar-toggler-icon {
+  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="rgba(0, 0, 0, 0.55)"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg>');
+}
+
 /* Alerts and form errors */
 .alert:empty {
   display: none;

assets/js/app.js

@@ -4,8 +4,8 @@
 import "../css/app.scss";
 
 // Import icons for sprite-loader
-// brand icon
+// navbar brand icon
-import "../node_modules/@fortawesome/fontawesome-free/svgs/solid/skull-crossbones.svg";
+import "../node_modules/@mdi/svg/svg/skull-crossbones.svg";
 
 // webpack automatically bundles all modules in your
 // entry points. Those entry points can be configured

assets/package-lock.json

@@ -7,11 +7,11 @@
       "license": "MIT",
       "dependencies": {
         "@fontsource/lato": "^4.2.1",
-        "@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",
+        "heroicons": "^0.4.2",
         "phoenix": "file:../deps/phoenix",
         "phoenix_html": "file:../deps/phoenix_html",
         "phoenix_live_view": "file:../deps/phoenix_live_view",
@@ -1279,15 +1279,6 @@
       "resolved": "https://registry.npmjs.org/@fontsource/lato/-/lato-4.2.1.tgz",
       "integrity": "sha512-prsPmSttIWKF52AK6fNbe1a/wT3Rm5ho2qwegXlU0Qu72dksQIjGrttDtuvs3OlXdlmYXFTmLKOWQKwBMAsMmQ=="
     },
-    "node_modules/@fortawesome/fontawesome-free": {
-      "version": "5.15.2",
-      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-5.15.2.tgz",
-      "integrity": "sha512-7l/AX41m609L/EXI9EKH3Vs3v0iA8tKlIOGtw+kgcoanI7p+e4I4GYLqW3UXWiTnjSFymKSmTTPKYrivzbxxqA==",
-      "hasInstallScript": true,
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/@mdi/svg": {
       "version": "5.9.55",
       "resolved": "https://registry.npmjs.org/@mdi/svg/-/svg-5.9.55.tgz",
@@ -4042,6 +4033,11 @@
         "he": "bin/he"
       }
     },
+    "node_modules/heroicons": {
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/heroicons/-/heroicons-0.4.2.tgz",
+      "integrity": "sha512-24Bc6LKmamKHzGiNC80/r9v/7pQrma2V5KlaLUHGoarqm+hggmxnngU+RjHQT8sANWPa5FWKLftn4fpmvry/7w=="
+    },
     "node_modules/hex-color-regex": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/hex-color-regex/-/hex-color-regex-1.1.0.tgz",
@@ -10806,11 +10802,6 @@
       "resolved": "https://registry.npmjs.org/@fontsource/lato/-/lato-4.2.1.tgz",
       "integrity": "sha512-prsPmSttIWKF52AK6fNbe1a/wT3Rm5ho2qwegXlU0Qu72dksQIjGrttDtuvs3OlXdlmYXFTmLKOWQKwBMAsMmQ=="
     },
-    "@fortawesome/fontawesome-free": {
-      "version": "5.15.2",
-      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-5.15.2.tgz",
-      "integrity": "sha512-7l/AX41m609L/EXI9EKH3Vs3v0iA8tKlIOGtw+kgcoanI7p+e4I4GYLqW3UXWiTnjSFymKSmTTPKYrivzbxxqA=="
-    },
     "@mdi/svg": {
       "version": "5.9.55",
       "resolved": "https://registry.npmjs.org/@mdi/svg/-/svg-5.9.55.tgz",
@@ -12945,6 +12936,11 @@
       "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==",
       "dev": true
     },
+    "heroicons": {
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/heroicons/-/heroicons-0.4.2.tgz",
+      "integrity": "sha512-24Bc6LKmamKHzGiNC80/r9v/7pQrma2V5KlaLUHGoarqm+hggmxnngU+RjHQT8sANWPa5FWKLftn4fpmvry/7w=="
+    },
     "hex-color-regex": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/hex-color-regex/-/hex-color-regex-1.1.0.tgz",

assets/package.json

@@ -8,11 +8,11 @@
   },
   "dependencies": {
     "@fontsource/lato": "^4.2.1",
-    "@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",
+    "heroicons": "^0.4.2",
     "phoenix": "file:../deps/phoenix",
     "phoenix_html": "file:../deps/phoenix_html",
     "phoenix_live_view": "file:../deps/phoenix_live_view",

assets/webpack.config.js

@@ -59,16 +59,14 @@ module.exports = (env, options) => {
             symbolId: (filePath) => {
               if (filePath.includes("bootstrap-icons")) {
                 return `bi-${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 if (filePath.includes("heroicons")) {
+                if (filePath.includes("outline")) {
+                  return `hio-${path.basename(filePath).slice(0, -4)}`;
+                } else {
+                  return `his-${path.basename(filePath).slice(0, -4)}`;
+                }
               } else {
                 return `${path.basename(filePath).slice(0, -4)}`;
               }

lib/bones73k_web/templates/layout/_navbar.html.eex

@@ -1,12 +1,12 @@
 <nav class="navbar navbar-expand-lg navbar-light bg-light">
   <div class="container">
 
-    <%= link to: Routes.page_path(@conn, :index), class: "navbar-brand" do %>
+    <%= link to: Routes.page_path(@conn, :index), class: "navbar-brand py-0" do %>
-      <%= icon_div @conn, "fas-skull-crossbones", [class: "icon baseline"] %>
+      <%= icon_div @conn, "mdi-skull-crossbones", [class: "icon baseline fs-3"] %>
-      Bones73k
+      <span>Bones73k</span>
     <% end %>
 
-    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+    <button class="navbar-toggler collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
       <span class="navbar-toggler-icon"></span>
     </button>