Switch to Feather Icons for all icons

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">
-									<use xlink:href="/images/fontawesome/solid.svg#{{ section.icon }}" />
+								<svg class="icon" role="img">
+									<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">
-										<use xlink:href="/images/fontawesome/solid.svg#{{ standalonePage.icon }}" />
+									<svg class="icon" role="img">
+										<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">
-								<use xlink:href="/images/fontawesome/brands.svg#{{ externalLink.icon }}" />
+							<svg class="icon" role="img">
+								<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">
-					<use xlink:href="/images/bootstrap-icons.svg#layout-sidebar-inset" />
+				<svg class="icon" role="img" aria-label="Toggle Main Menu">
+					<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
 ---