Migrating to iconoir imports

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;