feat: ✨ Move from FontAwesome to astro-icons + iconify

Using: https://www.astroicon.dev

astro.config.mjs

@@ -5,11 +5,13 @@ import preact from "@astrojs/preact";
 
 import tailwind from "@astrojs/tailwind";
 
+import icon from "astro-icon";
+
 // https://astro.build/config
 export default defineConfig({
   site: "https://aria.coffee",
-  integrations: [preact(), tailwind()],
+  integrations: [preact(), tailwind(), icon()],
   image: {
     domains: ["buymymojo.net", "aria.coffee", "github.com", "githubusercontent.com", "avatars.githubusercontent.com", "camo.githubusercontent.com", "user-images.githubusercontent.com", "private-user-images.githubusercontent.com"],
-  }
+  },
 });

package.json

@@ -13,16 +13,17 @@
     "@astrojs/preact": "^4.0.0",
     "@astrojs/rss": "^4.0.10",
     "@astrojs/tailwind": "^5.1.3",
-    "@fortawesome/fontawesome-svg-core": "^6.7.1",
-    "@fortawesome/free-brands-svg-icons": "^6.7.1",
-    "@fortawesome/free-solid-svg-icons": "^6.7.1",
     "astro": "^5.1.0",
+    "astro-icon": "^1.1.4",
     "preact": "^10.25.2",
     "sharp": "^0.33.5",
     "tailwindcss": "^3.4.16",
     "typescript": "^5.7.2"
   },
   "devDependencies": {
+    "@iconify-json/mdi": "^1.2.2",
+    "@iconify-json/meteor-icons": "^1.2.1",
+    "@iconify-json/tabler": "^1.2.13",
     "@tailwindcss/typography": "^0.5.15"
   }
 }

src/components/Footer.astro

@@ -1,13 +1,7 @@
 ---
 const buttonFormat = "gif";
 
-import { library, icon } from "@fortawesome/fontawesome-svg-core";
+import { Icon } from 'astro-icon/components'
-import { faCodeBranch, faRss } from "@fortawesome/free-solid-svg-icons";
-
-library.add(faCodeBranch, faRss);
-
-const sourceCodeIcon = icon({ prefix: "fas", iconName: faCodeBranch.iconName });
-const rssIcon = icon({ prefix: "fas", iconName: faRss.iconName });
 ---
 
 <hr class="h-1" style="" />
@@ -15,9 +9,9 @@ const rssIcon = icon({ prefix: "fas", iconName: faRss.iconName });
     <div class="flexrow">
         <p>
             <a href="https://github.com/BuyMyMojo/aria.coffee" target="_blank"
-                ><Fragment set:html={sourceCodeIcon.html} /> Source Code</a
+                ><Icon name="mdi:source-branch" class={"svg-inline"}/> Source Code</a
             > | <a href="https://aria.coffee/rss.xml" target="_blank"
-                ><Fragment set:html={rssIcon.html} /> RSS Feed</a
+                ><Icon name="mdi:rss" class={"svg-inline"}/> RSS Feed</a
             >
         </p>
     </div>

src/components/Social.astro

@@ -5,30 +5,32 @@ const github = "https://github.com/BuyMyMojo";
 const steam = "https://steamcommunity.com/profiles/76561198227003516";
 const bsky = "https://bsky.app/profile/did:plc:bzrn33tcfgjxnsanvg6py3xn";
 const bskyArchive = "https://buymymojo.net/bsky/";
+
+import { Icon } from 'astro-icon/components'
 ---
 
 <h1>Places to find and/or contact me:</h1>
 <ul class="list-disc p-4">
     <li>
         <a href={bsky} class="p-1" target="_blank"
-            ><i class="fa-brands fa-bluesky"></i> Bluesky</a
+            ><Icon name="meteor-icons:bluesky" class={"svg-inline"} /> Bluesky</a
         > - <button id="bskypid"
             >@femgo.buymymojo.net (Click to copy DID)</button
         >
     </li>
     <li>
         <a href={discord} target="_blank"
-            ><i class="fa-brands fa-discord"></i> Discord</a
+            ><Icon name="meteor-icons:discord" class={"svg-inline"}/> Discord</a
         > - @buymymojo
     </li>
     <li>
       <a href={github} target="_blank"
-          ><i class="fa-brands fa-github"></i> GitHub</a
+          ><Icon name="meteor-icons:github" class={"svg-inline"}/> GitHub</a
       > - @BuyMyMojo
   </li>
   <li>
     <a href={steam} target="_blank"
-        ><i class="fa-brands fa-steam"></i> Steam</a
+        ><Icon name="tabler:brand-steam" class={"svg-inline"}/> Steam</a
     > - @BuyMyMojo
 </li>
 </ul>
@@ -47,16 +49,6 @@ const bskyArchive = "https://buymymojo.net/bsky/";
     </li>
 </ul>
 
-<style is:global>
-    /* Declare a custom CSS class to make the icon look right */
-    .svg-inline--fa {
-        overflow: visible;
-        box-sizing: content-box;
-        display: inline-block;
-        height: 1em;
-        vertical-align: -0.125em;
-    }
-</style>
 <script>
     const bskypid = document.querySelector("#bskypid");
 

src/layouts/BaseLayout.astro

@@ -23,8 +23,6 @@ const { pageTitle } = Astro.props;
             title="amemoia's blog"
             href={new URL("rss.xml", Astro.site)}
         />
-
-        <script is:inline defer src="https://kit.fontawesome.com/5fee770033.js" crossorigin="anonymous"></script>
     </head>
     <body>
       <NavHeader />

src/styles/aria.css

@@ -120,3 +120,11 @@ a:hover {
 	background-color: var(--fourth-colour);
 	border-color: var(--fourth-colour);
 }
+
+.svg-inline {
+	overflow: visible;
+	box-sizing: content-box;
+	display: inline-block;
+	height: 1em;
+	vertical-align: -0.125em;
+}