Switch to Feather Icons for all icons

.eleventy.js

@@ -7,10 +7,7 @@ module.exports = function (eleventyConfig) {
 		files: "./_site/css/**/*.css",
 	});
 	eleventyConfig.addPassthroughCopy({
-		"node_modules/bootstrap-icons/bootstrap-icons.svg":
+		"node_modules/feather-icons/dist/feather-sprite.svg": "images/feather-sprite.svg",
-			"images/bootstrap-icons.svg",
-		"node_modules/@fortawesome/fontawesome-free/sprites":
-			"images/fontawesome",
 		"src/js/site.js": "js/site.js"
 	});
 	eleventyConfig.addPlugin(eleventyNavigationPlugin);

package-lock.json

@@ -9,8 +9,7 @@
       "version": "1.0.0",
       "license": "ISC",
       "dependencies": {
-        "@fortawesome/fontawesome-free": "^6.4.0",
+        "feather-icons": "^4.29.0",
-        "bootstrap-icons": "^1.10.5",
         "normalize.css": "^8.0.1"
       },
       "devDependencies": {
@@ -187,15 +186,6 @@
         "node": ">=6.9.0"
       }
     },
-    "node_modules/@fortawesome/fontawesome-free": {
-      "version": "6.4.0",
-      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-6.4.0.tgz",
-      "integrity": "sha512-0NyytTlPJwB/BF5LtRV8rrABDbe3TdTXqNB3PdZ+UUUZAEIrdOJdmABqKjt4AXwIoJNaRVVZEXxpNrqvE1GAYQ==",
-      "hasInstallScript": true,
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/@iarna/toml": {
       "version": "2.2.5",
       "resolved": "https://registry.npmjs.org/@iarna/toml/-/toml-2.2.5.tgz",
@@ -465,21 +455,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/bootstrap-icons": {
-      "version": "1.10.5",
-      "resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.10.5.tgz",
-      "integrity": "sha512-oSX26F37V7QV7NCE53PPEL45d7EGXmBgHG3pDpZvcRaKVzWMqIRL9wcqJUyEha1esFtM3NJzvmxFXDxjJYD0jQ==",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/twbs"
-        },
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/bootstrap"
-        }
-      ]
-    },
     "node_modules/brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -567,6 +542,11 @@
         "fsevents": "~2.3.2"
       }
     },
+    "node_modules/classnames": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz",
+      "integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw=="
+    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -610,6 +590,16 @@
         "@babel/types": "^7.6.1"
       }
     },
+    "node_modules/core-js": {
+      "version": "3.31.1",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.31.1.tgz",
+      "integrity": "sha512-2sKLtfq1eFST7l7v62zaqXacPc7uG8ZAya8ogijLhTtaKNcpzpB4TMoTw2Si+8GYKRwFPMMtUT0263QFWFfqyQ==",
+      "hasInstallScript": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/core-js"
+      }
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
@@ -878,6 +868,15 @@
         "reusify": "^1.0.4"
       }
     },
+    "node_modules/feather-icons": {
+      "version": "4.29.0",
+      "resolved": "https://registry.npmjs.org/feather-icons/-/feather-icons-4.29.0.tgz",
+      "integrity": "sha512-Y7VqN9FYb8KdaSF0qD1081HCkm0v4Eq/fpfQYQnubpqi0hXx14k+gF9iqtRys1SIcTEi97xDi/fmsPFZ8xo0GQ==",
+      "dependencies": {
+        "classnames": "^2.2.5",
+        "core-js": "^3.1.3"
+      }
+    },
     "node_modules/filelist": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/filelist/-/filelist-1.0.4.tgz",
@@ -2551,11 +2550,6 @@
         "to-fast-properties": "^2.0.0"
       }
     },
-    "@fortawesome/fontawesome-free": {
-      "version": "6.4.0",
-      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-6.4.0.tgz",
-      "integrity": "sha512-0NyytTlPJwB/BF5LtRV8rrABDbe3TdTXqNB3PdZ+UUUZAEIrdOJdmABqKjt4AXwIoJNaRVVZEXxpNrqvE1GAYQ=="
-    },
     "@iarna/toml": {
       "version": "2.2.5",
       "resolved": "https://registry.npmjs.org/@iarna/toml/-/toml-2.2.5.tgz",
@@ -2758,11 +2752,6 @@
       "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
       "dev": true
     },
-    "bootstrap-icons": {
-      "version": "1.10.5",
-      "resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.10.5.tgz",
-      "integrity": "sha512-oSX26F37V7QV7NCE53PPEL45d7EGXmBgHG3pDpZvcRaKVzWMqIRL9wcqJUyEha1esFtM3NJzvmxFXDxjJYD0jQ=="
-    },
     "brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -2827,6 +2816,11 @@
         "readdirp": "~3.6.0"
       }
     },
+    "classnames": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz",
+      "integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw=="
+    },
     "color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -2864,6 +2858,11 @@
         "@babel/types": "^7.6.1"
       }
     },
+    "core-js": {
+      "version": "3.31.1",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.31.1.tgz",
+      "integrity": "sha512-2sKLtfq1eFST7l7v62zaqXacPc7uG8ZAya8ogijLhTtaKNcpzpB4TMoTw2Si+8GYKRwFPMMtUT0263QFWFfqyQ=="
+    },
     "cross-spawn": {
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
@@ -3043,6 +3042,15 @@
         "reusify": "^1.0.4"
       }
     },
+    "feather-icons": {
+      "version": "4.29.0",
+      "resolved": "https://registry.npmjs.org/feather-icons/-/feather-icons-4.29.0.tgz",
+      "integrity": "sha512-Y7VqN9FYb8KdaSF0qD1081HCkm0v4Eq/fpfQYQnubpqi0hXx14k+gF9iqtRys1SIcTEi97xDi/fmsPFZ8xo0GQ==",
+      "requires": {
+        "classnames": "^2.2.5",
+        "core-js": "^3.1.3"
+      }
+    },
     "filelist": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/filelist/-/filelist-1.0.4.tgz",

package.json

@@ -18,8 +18,7 @@
     "markdown-it-deflist": "^2.1.0"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-free": "^6.4.0",
+    "feather-icons": "^4.29.0",
-    "bootstrap-icons": "^1.10.5",
     "normalize.css": "^8.0.1"
   }
 }

src/_includes/layouts/layout.njk

@@ -24,8 +24,8 @@
 					<li {% if section.url == page.url %}class="active"{% endif %}>
 						<a href="/#{{ section.title | slugify }}">
 							{% if section.icon is defined %}
-								<svg class="bi" fill="currentColor" role="img">
+								<svg class="icon" role="img">
-									<use xlink:href="/images/fontawesome/solid.svg#{{ section.icon }}" />
+									<use xlink:href="/images/feather-sprite.svg#{{ section.icon }}" />
 								</svg>
 							{% endif %}
 							{{ section.title }}
@@ -44,8 +44,8 @@
 						<li {% if page.url and page.url.startsWith(standalonePage.url) %}class="active"{% endif %}>
 							<a href="{{ standalonePage.url }}">
 								{% if standalonePage.icon is defined %}
-									<svg class="bi" fill="currentColor" role="img">
+									<svg class="icon" role="img">
-										<use xlink:href="/images/fontawesome/solid.svg#{{ standalonePage.icon }}" />
+										<use xlink:href="/images/feather-sprite.svg#{{ standalonePage.icon }}" />
 									</svg>
 								{% endif %}
 
@@ -60,8 +60,8 @@
 				{% for externalLink in socialLinks %}
 					<li>
 						<a href="{{ externalLink.url }}" title="{{ externalLink.name }}">
-							<svg class="bi" fill="currentColor" role="img">
+							<svg class="icon" role="img">
-								<use xlink:href="/images/fontawesome/brands.svg#{{ externalLink.icon }}" />
+								<use xlink:href="/images/feather-sprite.svg#{{ externalLink.icon }}" />
 							</svg>
 						</a>
 					</li>
@@ -75,8 +75,8 @@
 			{{ title }}
 
 			<button class="sidebar-toggle" onclick="setSidebar()">
-				<svg class="bi" fill="currentColor" role="img" aria-label="Toggle Main Menu">
+				<svg class="icon" role="img" aria-label="Toggle Main Menu">
-					<use xlink:href="/images/bootstrap-icons.svg#layout-sidebar-inset" />
+					<use xlink:href="/images/feather-sprite.svg#sidebar" />
 				</svg>
 			</button>
 		</h1>

src/_sections/Colors.njk

@@ -2,7 +2,7 @@
 title: Colors
 eleventyNavigation:
   key: Colors
-  icon: eye-dropper
+  icon: droplet
   order: 3
 tags: [ "MainPage" ]
 sectionOrder: 3

src/_sections/Contact.md

@@ -2,7 +2,7 @@
 title: Contact
 eleventyNavigation:
   key: Contact
-  icon: envelope
+  icon: mail
   order: 2
 tags: [ "MainPage" ]
 sectionOrder: 2

src/_sections/Projects.njk

@@ -2,7 +2,7 @@
 title: Projects
 eleventyNavigation:
   key: Projects
-  icon: screwdriver-wrench
+  icon: tool
   order: 1
 tags: [ "MainPage" ]
 sectionOrder: 1

src/css/Components/_bootstrap-icons.scss

@@ -1,5 +0,0 @@
-// this allows changing the size using font-size
-.bi {
-	width: 1em;
-	height: 1em;
-}

src/css/Components/_icons.scss

@@ -0,0 +1,10 @@
+// this allows changing the size using font-size
+.icon {
+	width: 1em;
+	height: 1em;
+	stroke: currentColor;
+	stroke-width: 2;
+	stroke-linecap: round;
+	stroke-linejoin: round;
+	fill: none;
+}

src/css/site.scss

@@ -2,7 +2,7 @@
 
 @use 'Components/_variables';
 @use 'Components/_base';
-@use 'Components/_bootstrap-icons';
+@use 'Components/_icons';
 @use 'Components/_columns';
 @use 'Components/_navbar';
 @use 'Components/_headings';

src/index.njk

@@ -2,7 +2,7 @@
 title: Neil Brommer
 eleventyNavigation:
   key: Neil Brommer
-  icon: house
+  icon: home
   order: 0
 tags: [ "MainPage" ]
 ---

src/posts/index.njk

@@ -2,7 +2,7 @@
 title: Posts
 eleventyNavigation:
   key: Posts
-  icon: pencil
+  icon: edit-2
   order: 1
 ---
 

src/resume.md

@@ -2,7 +2,7 @@
 title: Resume
 eleventyNavigation:
   key: Resume
-  icon: file-lines
+  icon: file-text
   order: 2
 ---