Merge pull request 'Fixed Iconoir Icons' (#19) from dev into main

Reviewed-on: #19

package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@firq/fgosite",
 	"type": "module",
-	"version": "0.1.16",
+	"version": "0.1.17",
 	"private": true,
 	"scripts": {
 		"dev": "astro dev",

src/components/navbar.astro

@@ -1,6 +1,8 @@
 ---
 import { Image } from 'astro:assets';
 import logo from '../assets/logo.svg'
+import hamburger from 'iconoir/icons/menu.svg'
+const hamburger_src_url = `url("${hamburger.src}")`;
 ---
 
 <header>
@@ -15,11 +17,11 @@ import logo from '../assets/logo.svg'
       <slot />
     </ul>
     <div class="placeholder"></div>
-    <i class="iconoir-menu"></i>
+    <div class="icon"></div>
   </button>
 </header>
 
-<style>
+<style define:vars={{ hamburger_src_url }}>
   header {
     z-index: 1000;
     position: sticky;
@@ -81,16 +83,6 @@ import logo from '../assets/logo.svg'
     height: 64px;
   }
 
-  .mobile > i {
-    position: static;
-    color: white;
-    font-weight: bold;
-    font-size: 2em;
-    align-self: flex-start;
-    padding-right: 1em;
-    padding-top: 1.15rem;
-  }
-
   .mobile > ul {
     display: none;
     padding: 0px;
@@ -113,6 +105,17 @@ import logo from '../assets/logo.svg'
     justify-self: top;
   }
 
+  .icon {
+    mask: var(--hamburger_src_url) no-repeat center;
+    background-color: white;
+    width: 2em;
+    height: 2em;
+    position: static;
+    align-self: flex-start;
+    padding-right: 1em;
+    padding-top: 2.5em;
+  }
+
   @media (min-width: 1140px) {
     .mobile {
       display: none;

src/components/navbarEntry.astro

@@ -3,7 +3,7 @@ export interface Props {
   currentPage?: string
   link: string
   text: string
-  icon: string
+  icon: ImageMetadata
 }
 
 const { icon, text, link, currentPage } = Astro.props
@@ -17,6 +17,7 @@ if (currentPage === slug) {
   currPage = 'current'
 }
 
+const icon_src_url = `url("${icon.src}")`;
 const fulllink = `/${slug}`
 ---
 
@@ -28,12 +29,12 @@ const fulllink = `/${slug}`
     class={currPage}
     tabindex="0"
   >
-    <i class={icon}></i>
+    <div class="icon"></div>
     {text}
   </a>
 </li>
 
-<style>
+<style define:vars={{ icon_src_url }}>
   li {
     align-items: center;
     justify-content: center;
@@ -41,6 +42,7 @@ const fulllink = `/${slug}`
     display: flex;
     width: 200px;
   }
+
   li > a {
     display: inline-flex;
     color: white;
@@ -52,10 +54,27 @@ const fulllink = `/${slug}`
     font-weight: bold;
     gap: 0.2em;
   }
+
   li > a:hover {
     color: var(--c-purplepink);
   }
+
+  li > a:hover > .icon {
+    background-color: var(--c-purplepink);
+  }
+
   .current {
     color: var(--c-darkpurple) !important;
   }
+
+  .current > .icon {
+    background-color: var(--c-darkpurple) !important;
+  }
+
+  .icon {
+    mask: var(--icon_src_url) no-repeat center;
+    background-color: white;
+    width: 1.4em;
+    height: 1.4em;
+  }
 </style>

src/layouts/Layout.astro

@@ -3,7 +3,12 @@ import Navbar from '../components/navbar.astro'
 import NavbarEntry from '../components/navbarEntry.astro'
 import navdata from '../../static/data/_navdata.json'
 import embed from '../assets/embed.png'
-import "iconoir/css/iconoir.css"
+
+import home from 'iconoir/icons/home.svg'
+import servants from 'iconoir/icons/task-list.svg'
+import ta_collection from 'iconoir/icons/database.svg'
+import blog from 'iconoir/icons/bookmark-book.svg'
+import about from 'iconoir/icons/mail.svg'
 
 export interface Props {
   title: string
@@ -11,6 +16,18 @@ export interface Props {
   descriptionOverride?: string
 }
 
+interface IconsLookup {
+  [key: string]: ImageMetadata
+}
+
+const icons: IconsLookup = {
+  home: home,
+  servants: servants,
+  ta_collection: ta_collection,
+  blog: blog,
+  about: about,
+}
+
 const { descriptionOverride, currentpage, title } = Astro.props
 let description
 
@@ -24,9 +41,14 @@ let currPage = 'https://firq.dev/'
 if (currentpage !== 'home') {
   currPage += currentpage
 }
+
+const mapped_navdata = navdata.map((item) => ({
+  ...item,
+  ...{ icon: icons[item.icon] },
+}))
 ---
 
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <title>{title}</title>
@@ -54,7 +76,7 @@ if (currentpage !== 'home') {
   <body>
     <Navbar>
       {
-        navdata.map((item) => (
+        mapped_navdata.map((item) => (
           <NavbarEntry currentPage={currentpage} {...item} />
         ))
       }

static/data/_navdata.json

@@ -2,26 +2,26 @@
 	{
         "link": "/",
         "text": "Home",
-        "icon": "iconoir-home"
+        "icon": "home"
 	},
     {
         "link": "/servants",
         "text": "Servants",
-        "icon": "iconoir-task-list"
+        "icon": "servants"
 	},
     {
         "link": "/ta-collection",
         "text": "TA Collection",
-        "icon": "iconoir-database"
+        "icon": "ta_collection"
 	},
     {
         "link": "/blog",
         "text": "Blog",
-        "icon": "iconoir-bookmark-book"
+        "icon": "blog"
 	},
     {
         "link": "/about",
         "text": "About",
-        "icon": "iconoir-mail"
+        "icon": "about"
 	}
 ]