feat: migrate to astro-icon

astro.config.mjs

@@ -2,6 +2,8 @@ import { defineConfig } from 'astro/config'
 import serviceWorker from '@ayco/astro-sw'
 import sitemap from '@astrojs/sitemap'
 
+import icon from 'astro-icon'
+
 // https://astro.build/config
 export default defineConfig({
   site: 'https://ayo.ayco.io',
@@ -24,5 +26,12 @@ export default defineConfig({
         },
       },
     }),
+    icon({
+      include: {
+        mdi: ['*'],
+        tabler: ['*'],
+        'simple-icons': ['*'],
+      },
+    }),
   ],
 })

package.json

@@ -26,6 +26,9 @@
     "@ayco/astro-sw": "^0.8.14",
     "@eslint/compat": "^1.2.8",
     "@eslint/js": "^9.24.0",
+    "@iconify-json/mdi": "^1.2.3",
+    "@iconify-json/simple-icons": "^1.2.36",
+    "@iconify-json/tabler": "^1.2.18",
     "@typescript-eslint/parser": "^8.29.1",
     "astro": "^5.6.1",
     "astro-eslint-parser": "^1.2.2",
@@ -57,6 +60,7 @@
     ]
   },
   "dependencies": {
+    "astro-icon": "^1.1.5",
     "pathe": "^2.0.3"
   }
 }

src/components/Footer.astro

@@ -1,5 +1,5 @@
 ---
-import Icon from 'astro-iconify'
+import { Icon } from 'astro-icon/components'
 import { footerLinks as links } from '../constants/links'
 import WebRings from './WebRings.astro'
 const year = new Date().getFullYear()
@@ -31,7 +31,11 @@ const year = new Date().getFullYear()
             href={linkObj.url}
             aria-label={linkObj.text}
           >
-            <Icon pack={linkObj.set ?? 'simple-icons'} name={linkObj.icon} />
+            <Icon
+              width="1.5em"
+              height="1.5em"
+              name={`${linkObj.set ?? 'simple-icons'}:${linkObj.icon}`}
+            />
           </a>
         </li>
       ))
@@ -83,7 +87,6 @@ const year = new Date().getFullYear()
         display: inline-block;
 
         a svg {
-          width: 1.5rem;
           margin-right: 1em;
         }
       }

src/components/Nav.astro

@@ -1,5 +1,5 @@
 ---
-import Icon from 'astro-iconify'
+import { Icon } from 'astro-icon/components'
 import type { Link } from '../constants/links'
 
 export interface Props {
@@ -33,7 +33,11 @@ if (Astro.url.pathname !== '/') {
             href={link.url}
             aria-label={link.text}
           >
-            <Icon pack={link.set ?? 'mdi'} name={link.icon} />{' '}
+            <Icon
+              width="1.5em"
+              height="1.5em"
+              name={`${link.set ?? 'mdi'}:${link.icon}`}
+            />{' '}
             {link.text ?? link.icon}
           </a>
         ))
@@ -58,10 +62,6 @@ if (Astro.url.pathname !== '/') {
     color: var(--color-brand-complement);
   }
 
-  nav a svg {
-    width: 1.5rem;
-  }
-
   #wrapper {
     flex: 1;
     max-width: var(--content-width);