added unplugin-icons

package.json

@@ -30,6 +30,7 @@
     "@fontsource/ibm-plex-sans": "^5.0.17",
     "@fontsource/ibm-plex-serif": "^5.0.8",
     "@fontsource/iosevka": "^5.0.7",
+    "@iconify/json": "^2.2.156",
     "@savvywombat/tailwindcss-grid-areas": "^3.1.0",
     "@tailwindcss/forms": "^0.5.7",
     "@tailwindcss/typography": "^0.5.10",

src/components/Header.astro

@@ -5,7 +5,10 @@ import DropDown from "@components/navigation/DropDown.astro";
 import { NAV_LINKS } from "@consts";
 import { isNavLinkActive } from "@lib/utils";
 import type { Link } from "@types";
-import { Icon } from "astro-icon";
+import SunSolid from "~icons/heroicons/sun-solid";
+import MoonSolid from "~icons/heroicons/moon-solid";
+import Bars3BottomLeft20Solid from "~icons/heroicons/bars-3-bottom-left-20-solid";
+import Bars3BottomRight20Solid from "~icons/heroicons/bars-3-bottom-right-20-solid";
 const pathname = new URL(Astro.request.url).pathname;
 const currentPath = pathname.slice(1); // remove the first "/"
 ---
@@ -19,8 +22,7 @@ const currentPath = pathname.slice(1); // remove the first "/"
       aria-label="Toggle Mobile Sidebar"
       class="h-full p-3 duration-75 hover:backdrop-brightness-75 inline-flex place-items-center dark:hover:backdrop-brightness-125 lg:hidden"
       @click="sidebarOpen = !sidebarOpen">
-      <Icon
-        name="heroicons/bars-3-bottom-left-20-solid"
+      <Bars3BottomLeft20Solid
         class="w-5 h-5 transition duration-150 text-branding-black dark:text-branding-white"
         :class="{'rotate-90': sidebarOpen === true}"
         focusable="false"
@@ -61,14 +63,12 @@ const currentPath = pathname.slice(1); // remove the first "/"
         class="h-full p-3 duration-75 hover:backdrop-brightness-75 inline-flex place-items-center dark:hover:backdrop-brightness-125"
         aria-label="Toggle Dark Mode"
         @click="darkMode = !darkMode">
-        <Icon
-          name="heroicons/sun-solid"
+        <SunSolid
           class="text-branding-white hidden dark:inline-block w-5 h-5"
           focusable="false"
           aria-hidden="true"
         />
-        <Icon
-          name="heroicons/moon-solid"
+        <MoonSolid
           class="text-branding-black dark:hidden inline-block w-5 h-5"
           focusable="false"
           aria-hidden="true"
@@ -79,8 +79,7 @@ const currentPath = pathname.slice(1); // remove the first "/"
         aria-label="Toggle mobile menu"
         class="h-full p-3 hover:backdrop-brightness-75 dark:hover:backdrop-brightness-125 duration-150 lg:hidden text-branding-black dark:text-branding-white"
         x-on:click="mobileOpen = !mobileOpen">
-        <Icon
-          name="heroicons/bars-3-bottom-right-20-solid"
+        <Bars3BottomRight20Solid
           class="h-5 w-5"
           aria-hidden="true"
           focusable="false"

src/components/Pagination.astro

@@ -1,7 +1,7 @@
 ---
 // component imports
-import { Icon } from "astro-icon";
-
+import Backward20Solid from "~icons/heroicons/backward-20-solid";
+import Forward20Solid from "~icons/heroicons/forward-20-solid";
 const { prevUrl, nextUrl } = Astro.props;
 ---
 
@@ -13,7 +13,7 @@ const { prevUrl, nextUrl } = Astro.props;
       <a
         href={prevUrl}
         class="align-baseline p-2 bg-branding-navy text-white uppercase rounded justify-start mr-auto ml-0">
-        <Icon name="heroicons/backward-20-solid" class="inline w-5 h-5 mb-1" />
+        <Backward20Solid class="inline w-5 h-5 mb-1" />
         Previous
       </a>
     )
@@ -25,7 +25,7 @@ const { prevUrl, nextUrl } = Astro.props;
         href={nextUrl}
         class="align-baseline p-2 bg-branding-navy text-white uppercase rounded justify-end ml-auto mr-0">
         Next
-        <Icon name="heroicons/forward-20-solid" class="inline w-5 h-5 mb-1" />
+        <Forward20Solid class="inline w-5 h-5 mb-1" />
       </a>
     )
   }

src/components/ProjectCard.astro

@@ -1,6 +1,6 @@
 ---
 import type Project from "@content/config.ts";
-import { Icon } from "astro-icon";
+import MdiGit from "~icons/mdi/git";
 import "@fontsource/ibm-plex-sans/300.css";
 interface Props {
   project: Project;
@@ -38,7 +38,7 @@ const { project } = Astro.props;
       <a
         href={project.data.links.repo}
         class="inline-flex place-items-center rounded-sm text-sm bg-branding-brown hover:bg-branding-brown-600 w-fit text-white h-fit px-2 py-1 mt-1 duration-100 transition-colors">
-        <Icon name="mdi/git" class="h-4 w-4 fill-white mr-1 -mb-px" />
+        <MdiGit class="h-4 w-4 fill-white mr-1 -mb-px" />
         <span>Repo</span>
       </a>
     </div>

src/components/blog/PostHeader.astro

@@ -8,8 +8,9 @@ interface Props {
 }
 
 import { formatPostDate, hashtagPostTags, slugifyUrl } from "@lib/utils";
-import { Icon } from "astro-icon";
-
+import Tag20Solid from "~icons/heroicons/tag-20-solid";
+import MdiCalendar from "~icons/mdi/mdi-calendar";
+import MdiFolderOpen from "~icons/mdi/mdi-folder-open";
 const {
   title,
   pubDate,
@@ -22,8 +23,7 @@ const postTags = hashtagPostTags(tags);
 
 <header class="align-baseline">
   <h1 class="mt-1 text-wrap-balance">{title}</h1>
-  <Icon
-    name="mdi/calendar"
+  <MdiCalendar
     class="w-5 mb-1 mr-1 inline-block dark:fill-neutral-300 fill-neutral-700"
   />
   <span class="font-bold mr-1 dark:text-neutral-300 text-neutral-700"
@@ -35,7 +35,7 @@ const postTags = hashtagPostTags(tags);
   {
     lastModDate.getTime() > pubDate.getTime() ? (
       <div class="inline ml-8">
-        <Icon name="mdi/calendar" class="w-5 mb-1 inline-block" />
+        <MdiCalendar class="w-5 mb-1 inline-block" />
         <span class="font-bold">Last Updated:</span>
         <time class="inline">{formatPostDate(lastModDate)}</time>
       </div>
@@ -45,7 +45,7 @@ const postTags = hashtagPostTags(tags);
   }
 
   <div class="block">
-    <Icon name="heroicons/tag-20-solid" class="h-5 w-5 mr-1 inline mb-1" />
+    <Tag20Solid class="h-5 w-5 mr-1 inline mb-1" />
     <strong class="mr-1 dark:text-neutral-300 text-neutral-700">Tags:</strong>
     {
       postTags.map((tag, index) => {
@@ -63,7 +63,7 @@ const postTags = hashtagPostTags(tags);
     }
   </div>
   <div class="block">
-    <Icon name="mdi/folder-open" class="h-5 w-5 mr-1 inline mb-1" />
+    <MdiFolderOpen class="h-5 w-5 mr-1 inline mb-1" />
     <strong class="mr-1 dark:text-neutral-300 text-neutral-700"
       >Categories:</strong
     >

src/components/blog/PostInfo.astro

@@ -1,6 +1,7 @@
 ---
 import type { BlogPost } from "@content/config.ts";
-import { Icon } from "astro-icon";
+import MdiCalendar from "~icons/mdi/mdi-calendar";
+import MdiClockOutline from "~icons/mdi/mdi-clock-outline";
 import { formatPostDate, calcReadingTime, slugifyPostDate } from "@lib/utils";
 
 interface Props {
@@ -20,8 +21,7 @@ const postBody = marked.parse(body);
 
 <article class="py-3.5 grid md:grid-cols-[18rem_auto]">
   <aside class="md:row-span-1 md:mb-0 -mb-2 align-baseline md:px-2">
-    <Icon
-      name="mdi/calendar"
+    <MdiCalendar
       class="inline-block -mt-px text-sm w-4 h-4 fill-gray-700 dark:fill-gray-400"
     />
     <span class="ml-1 font-bold text-sm text-gray-700 dark:text-gray-400"
@@ -34,8 +34,7 @@ const postBody = marked.parse(body);
     >
     <span
       class="block mt-1 text-branding-gray-600 dark:text-branding-gray-400 text-sm font-semibold">
-      <Icon
-        name="mdi/clock-outline"
+      <MdiClockOutline
         class="inline-block w-4 h-4 -mt-1 mr-1 fill-gray-600 dark:fill-gray-400"
       />
       {calcReadingTime(post.body)}

src/components/index/FeaturedProjectSection.astro

@@ -1,6 +1,8 @@
 ---
-import Icon from "astro-icon";
 import { type Project } from "@content/config";
+import MdiGit from "~icons/mdi/git";
+import MdiBookOpenBlankVariant from '~icons/mdi/book-open-blank-variant'
+import ArrowRight20Solid from "~icons/heroicons/arrow-right-20-solid"
 import { FEATURED_PROJECT_COUNT } from "@consts";
 import { getCollection } from "astro:content";
 const projects: Project[] = (await getCollection("projects", ({ data }) => {
@@ -53,8 +55,7 @@ const projects: Project[] = (await getCollection("projects", ({ data }) => {
                     class="text-sm w-fit hover:underline align-baseline text-branding-blue-500 dark:text-branding-blue-400 dark:hover:text-branding-blue-300 hover:text-branding-blue-600 transition-all duration-100 motion-reduce:duration-0 group "
                     aria-label=`${project.data.title} Repo`
                     title=`${project.data.title} Repo`>
-                    <Icon
-                      name="mdi/git"
+                    <MdiGit
                       class="h-4 w-4 inline mr-1 mb-1 fill-branding-blue-500 dark:fill-branding-blue-400 group-hover:text-branding-blue-600 dark:group-hover:text-branding-blue-300"
                     />
                     <span>Repo</span>
@@ -66,8 +67,7 @@ const projects: Project[] = (await getCollection("projects", ({ data }) => {
                     class="text-sm hover:underline align-baseline text-branding-blue-500 dark:text-branding-blue-400 dark:hover:text-branding-blue-300 hover:text-branding-blue-600 transition-all duration-100 motion-reduce:duration-0 group "
                     aria-label=`${project.data.title} Docs`
                     title=`${project.data.title} Docs`>
-                    <Icon
-                      name="mdi/book-open-blank-variant"
+                    <MdiBookOpenBlankVariant
                       class="h-4 w-4 inline mr-1 mb-1 fill-branding-blue-500 dark:fill-branding-blue-400 group-hover:text-branding-blue-600 dark:group-hover:text-branding-blue-300"
                     />
                     <span>Docs</span>
@@ -79,8 +79,7 @@ const projects: Project[] = (await getCollection("projects", ({ data }) => {
                     <span>
                     About {project.data.title}
                     </span>
-                    <Icon
-                      name="heroicons/arrow-right-20-solid"
+                    <ArrowRight20Solid
                       class="h-4 w-4 inline mr-1 fill-branding-blue-500 dark:fill-branding-blue-400 group-hover:text-branding-blue-600 dark:group-hover:text-branding-blue-300"
                     />
                   </a>

src/components/index/HeroSection.astro

@@ -2,7 +2,7 @@
 import { Image } from "astro:assets";
 import Button from "../Button.astro";
 import Hero from "@assets/Hero.jpeg";
-import Icon from "astro-icon";
+import WavingHand from "~icons/twemoji/waving-hand";
 import { SITE_META } from "@consts";
 ---
 
@@ -23,10 +23,7 @@ import { SITE_META } from "@consts";
       <span class="text-branding-navy-600 dark:text-branding-navy-400"
         >Jacob</span
       >
-      <Icon
-        name="twemoji/waving-hand"
-        class="text-5xl inline w-10 h-10 -mt-4 ml-2"
-      />
+      <WavingHand class="text-5xl inline w-10 h-10 -mt-4 ml-2" />
     </h1>
     <h2
       class="text-3xl font-bold my-4 lg:my-6 text-branding-text/90 dark:text-branding-white/90">

src/components/navigation/DropDown.astro

@@ -8,7 +8,7 @@ interface Props {
 }
 
 const { name, active = false, children, isMobile = false } = Astro.props;
-import { Icon } from "astro-icon";
+import ChevronRight20Solid from "~icons/heroicons/chevron-right-20-solid";
 ---
 
 {
@@ -18,8 +18,7 @@ import { Icon } from "astro-icon";
         class="text-sm px-3 py-2 text-right hover:text-branding-blue-600 dark:hover:text-branding-blue-400 flex items-center ml-auto mr-0 text-branding-black dark:text-branding-white"
         x-on:click="open = !open">
         <span class="w-full text-right">{name}</span>
-        <Icon
-          name="heroicons/chevron-right-20-solid"
+        <ChevronRight20Solid
           class="h-5 w-5 mt-0.5 transform-transition duration-200"
           :class="{'rotate-90': open===true}"
         />
@@ -65,7 +64,7 @@ import { Icon } from "astro-icon";
       x-data="{ open: false }">
       <button @click="open = !open" class="flex items-center">
         <span>{name}</span>
-        <Icon name="heroicons/chevron-right-20-solid" class="h-5 w-5 mt-0.5 transform-transition duration-200" :class="{'rotate-90': open}"/>        
+        <ChevronRight20Solid class="h-5 w-5 mt-0.5 transform-transition duration-200" :class="{'rotate-90': open}"/>        
       </button>
        <nav
     class="absolute mt-2 bg-gray-200 rounded shadow-xl l-0 dark:bg-gray-800 w-36 duration-75 hover:backdrop-brightness-75 text-branding-black dark:text-branding-white"

src/pages/projects/[...slug].astro

@@ -8,7 +8,7 @@ import { getCollection } from "astro:content";
 import type { Project } from "@content/config.ts";
 import { slugifyUrl } from "@lib/utils";
 import BaseLayout from "@layouts/BaseLayout.astro";
-import { Icon } from "astro-icon";
+import TwemojiHammerAndWrench from "~icons/twemoji/hammer-and-wrench";
 export const getStaticPaths = (async () => {
   const projects: Project[] = await getCollection("projects");
   return projects.map((project: Project) => {
@@ -34,7 +34,7 @@ const { Content } = await project.render();
     <header class="align-baseline">
       <h1 class="mt-1 text-wrap-balance">{project.data.title}</h1>
       <div>
-        <Icon name="twemoji/hammer-wrench" class="inline h-5 w-5 mr-1" />
+        <TwemojiHammerAndWrench class="inline h-5 w-5 mr-1" />
         <strong>
           Built With:
           <span class="font-normal">{project.data.tools.join(" • ")}</span>

src/pages/series/index.astro

@@ -5,7 +5,7 @@ import { getCollection } from "astro:content";
 import { findPostsInSeries } from "@lib/blog.ts";
 import { slugifyUrl } from "@lib/utils.ts";
 import BaseLayout from "@layouts/BaseLayout.astro";
-import { Icon } from "astro-icon";
+import TwemojiBlueBook from "~icons/twemoji/blue-book";
 
 const posts: BlogPost[] = await getCollection("blog", ({ data }) => {
   return import.meta.env.PROD ? data.draft !== true : true;
@@ -50,10 +50,7 @@ const allSeries = seriesNames.reduce(
           <>
             <div class="md:w-72 md:mb-0 -mb-2 align-baseline">
               <div class="px-2 ml-2">
-                <Icon
-                  name="twemoji:blue-book"
-                  class="inline-block -mt-px text-sm w-4 h-4"
-                />
+                <TwemojiBlueBook class="inline-block -mt-px text-sm w-4 h-4" />
                 <span class="ml-1 font-bold text-sm text-gray-700 dark:text-gray-400">
                   {postLength}
                 </span>

tsconfig.json

@@ -2,6 +2,7 @@
   "extends": "astro/tsconfigs/strict",
   "compilerOptions": {
     "baseUrl": ".",
+    "types": ["unplugin-icons/types/astro"],
     "paths": {
       "@components/*": ["src/components/*"],
       "@assets/*": ["src/assets/*"],