Add better icons

package.json

@@ -14,10 +14,11 @@
     "@astrojs/mdx": "^1.1.5",
     "@astrojs/tailwind": "^5.0.2",
     "astro": "^3.5.5",
-    "astro-icon": "^0.8.1",
     "tailwindcss": "^3.3.5"
   },
   "devDependencies": {
+    "@iconify/json": "^2.2.143",
+    "@iconify/tailwind": "^0.1.3",
     "prettier": "^3.0.3",
     "prettier-plugin-astro": "^0.12.1"
   }

src/components/Navigation.astro

@@ -1,5 +1,4 @@
 ---
-import { Icon } from "astro-icon";
 import { Image } from "astro:assets";
 import Logo from "../images/logo.png";
 
@@ -66,8 +65,8 @@ const { className } = Astro.props;
         toggle-theme-button
         aria-label="Toggle theme"
       >
-        <Icon name="ph:moon-fill" class="w-6 h-6 hidden dark:block" />
-        <Icon name="ph:sun-fill" class="w-6 h-6 block dark:hidden" />
+        <span class="icon-[ph--moon-fill] text-2xl hidden dark:block" />
+        <span class="icon-[ph--sun-fill] text-2xl block dark:hidden" />
       </button>
     </section>
   </div>

src/components/Project.astro

@@ -1,5 +1,4 @@
 ---
-import Icon from "astro-icon";
 import type { CollectionEntry } from "astro:content";
 
 interface Props {
@@ -18,28 +17,23 @@ const { project } = Astro.props;
   <p class="text-gray- dark:text-gray-400 mb-2">
     {project.data.description}
   </p>
-  <div class="flex flex-row space-between gap-2">
+  <div class="flex flex-row align-middle gap-2">
     <a
       href={project.data.url}
       rel="noopener noreferrer"
       target="_blank"
       aria-label={`Visit project ${project.data.name}'s webpage`}
     >
-      <Icon
-        name="mdi:globe"
-        class="inline-block w-5 h-5 mr-1 hover:scale-110"
-      />
+      <span
+        class="icon-[mdi--globe] text-xl hover:scale-110" />
     </a>
     <a
       href={project.data.github}
       rel="noopener noreferrer"
       target="_blank"
       aria-label={`Visit project ${project.data.name}'s GitHub`}
     >
-      <Icon
-        name="mdi:github"
-        class="inline-block w-5 h-5 mr-1 hover:scale-110"
-      />
+      <span class="icon-[mdi--github] text-xl hover:scale-110" />
     </a>
   </div>
 </div>

src/components/Socials.astro

@@ -1,7 +1,3 @@
----
-import { Icon } from "astro-icon";
----
-
 <p class="flex flex-row gap-4 justify-center">
   <a
     class="hover:scale-110"
@@ -10,7 +6,7 @@ import { Icon } from "astro-icon";
     rel="noopener noreferrer"
     aria-label="Altuğ's GitHub"
   >
-    <Icon name="mdi:github" class="w-8 h-8 dark:fill-white" />
+    <span class="icon-[mdi--github] text-4xl dark:fill-white" />
   </a>
   <a
     class="hover:scale-110"
@@ -19,7 +15,7 @@ import { Icon } from "astro-icon";
     rel="noopener noreferrer"
     aria-label="Altuğ's Twitter"
   >
-    <Icon name="mdi:twitter" class="w-8 h-8 dark:fill-white" />
+    <span class="icon-[mdi--twitter] text-4xl dark:fill-white" />
   </a>
   <a
     class="hover:scale-110"
@@ -28,13 +24,13 @@ import { Icon } from "astro-icon";
     rel="noopener noreferrer"
     aria-label="Altuğ's LinkedIn"
   >
-    <Icon name="mdi:linkedin" class="w-8 h-8 dark:fill-white" />
+    <span class="icon-[mdi--linkedin] text-4xl dark:fill-white" />
   </a>
   <a
     class="hover:scale-110"
     href="mailto:[email protected]"
     aria-label="Send an e-mail to Altuğ"
   >
-    <Icon name="mdi:email" class="w-8 h-8 dark:fill-white" />
+    <span class="icon-[mdi--email] text-4xl dark:fill-white" />
   </a>
 </p>

src/components/TechIcon.astro

@@ -0,0 +1,22 @@
+---
+interface Props {
+  name: string;
+}
+
+const { name } = Astro.props;
+
+function getIcon(): string {
+  switch (name) {
+    case "Arduino":
+      return "icon-[devicon--arduino]";
+    case "C++":
+      return "icon-[devicon--cplusplus]";
+    case "Rust":
+      return "icon-[simple-icons--rust]";
+    default:
+      return `icon-[carbon--unknown]`;
+  }
+}
+---
+
+<span class={`${getIcon()} text-4xl`} />

src/layouts/BaseLayout.astro

@@ -27,7 +27,6 @@ const { title } = Astro.props;
       as="style"
       onload="this.onload=null; this.rel='stylesheet'; document.body.classList.add('fontLoaded')"
     />
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devicons/[email protected]/devicon.min.css">
     <title>{title}</title>
 
     <!-- Open Graph / Facebook -->

src/layouts/ProjectLayout.astro

@@ -1,8 +1,7 @@
 ---
-import Icon from "astro-icon";
 import BaseLayout from "./BaseLayout.astro";
+import TechIcon from "../components/TechIcon.astro";
 import type { CollectionEntry } from "astro:content";
-import {techToIcon} from "../utils/techToIcon";
 
 interface Props {
   project: CollectionEntry<"projects">;
@@ -36,6 +35,6 @@ const { project } = Astro.props;
   </div>
   <h2 class="text-2xl font-bold mt-4 mb-2">Technologies</h2>
   <p class="flex flex-row gap-2">
-    {project.data.technologies.map((tech) => <span>{tech}</span>)}
+    {project.data.technologies.map((tech) => <TechIcon name={tech} />)}
   </p>
 </BaseLayout>

src/pages/404.astro

@@ -1,6 +1,4 @@
 ---
-import { Icon } from "astro-icon";
-
 import BaseLayout from "../layouts/BaseLayout.astro";
 ---
 
@@ -12,7 +10,7 @@ import BaseLayout from "../layouts/BaseLayout.astro";
     href="/"
     aria-label="Go back home"
   >
-    <Icon name="mdi:arrow-left" class="w-4 h-4" />
+    <span class="icon-[mdi--arrow-left]" />
     <span class="text-center">Go back home</span>
   </a>
 </BaseLayout>

tailwind.config.ts

@@ -1,4 +1,5 @@
 import type { Config } from "tailwindcss";
+import { addDynamicIconSelectors } from "@iconify/tailwind";
 
 export default {
   content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
@@ -12,5 +13,6 @@ export default {
       },
     },
   },
+  plugins: [addDynamicIconSelectors()],
   darkMode: "class",
 } satisfies Config;