From e99aa1fa6e65b2d35f830babbbd620fbc6594e3f Mon Sep 17 00:00:00 2001
From: Orry Verducci <orry@orryverducci.co.uk>
Date: Sun, 4 Feb 2024 18:34:32 +0000
Subject: [PATCH] Update to new Astro Icon API

---
 .gitignore               |  1 +
 astro.config.mjs         |  3 +++
 package-lock.json        | 17 +++++++++++++++++
 package.json             |  1 +
 src/env.d.ts             |  1 +
 src/layouts/Layout.astro | 10 +++++-----
 6 files changed, 28 insertions(+), 5 deletions(-)

diff --git a/.gitignore b/.gitignore
index a49142d..1f5bb43 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,6 +1,7 @@
 ### Website ###
 
 # Build output
+.astro/
 dist/
 .output/
 functions/\[\[path\]\].js
diff --git a/astro.config.mjs b/astro.config.mjs
index 84d5b56..5420e51 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -2,6 +2,8 @@ import { defineConfig } from "astro/config";
 
 import cloudflare from "@astrojs/cloudflare";
 
+import icon from "astro-icon";
+
 // https://astro.build/config
 export default defineConfig({
     site: "https://orryverducci.co.uk",
@@ -9,6 +11,7 @@ export default defineConfig({
     adapter: cloudflare({
       mode: "directory"
     }),
+    integrations: [icon()],
     image: {
       service: {
         entrypoint: 'astro/assets/services/noop'
diff --git a/package-lock.json b/package-lock.json
index 14beda4..b9f7c63 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
                 "@fontsource/montserrat": "^5.0.16",
                 "@hotwired/stimulus": "^3.2.2",
                 "@hotwired/turbo": "^7.3.0",
+                "@iconify-json/bi": "^1.1.23",
                 "@material/animation": "^14.0.0",
                 "@types/figlet": "^1.5.8",
                 "astro": "^3.6.4",
@@ -1287,6 +1288,14 @@
             "resolved": "https://registry.npmjs.org/@iarna/toml/-/toml-2.2.5.tgz",
             "integrity": "sha512-trnsAYxU3xnS1gPHPyU961coFyLkh4gAD/0zQ5mymY4yOZ+CYvsPqUbOFSw0aDM4y0tV7tiFxL/1XfXPNC6IPg=="
         },
+        "node_modules/@iconify-json/bi": {
+            "version": "1.1.23",
+            "resolved": "https://registry.npmjs.org/@iconify-json/bi/-/bi-1.1.23.tgz",
+            "integrity": "sha512-1te+g9ZzI+PU1Lv6Xerd3XPXf4DE6g3TvDL2buIopTAfrauPHyXCHPFQMrzoQVNrVPCpN3rv3vBtJMPyBwJ9IA==",
+            "dependencies": {
+                "@iconify/types": "*"
+            }
+        },
         "node_modules/@iconify/tools": {
             "version": "3.0.7",
             "resolved": "https://registry.npmjs.org/@iconify/tools/-/tools-3.0.7.tgz",
@@ -9553,6 +9562,14 @@
             "resolved": "https://registry.npmjs.org/@iarna/toml/-/toml-2.2.5.tgz",
             "integrity": "sha512-trnsAYxU3xnS1gPHPyU961coFyLkh4gAD/0zQ5mymY4yOZ+CYvsPqUbOFSw0aDM4y0tV7tiFxL/1XfXPNC6IPg=="
         },
+        "@iconify-json/bi": {
+            "version": "1.1.23",
+            "resolved": "https://registry.npmjs.org/@iconify-json/bi/-/bi-1.1.23.tgz",
+            "integrity": "sha512-1te+g9ZzI+PU1Lv6Xerd3XPXf4DE6g3TvDL2buIopTAfrauPHyXCHPFQMrzoQVNrVPCpN3rv3vBtJMPyBwJ9IA==",
+            "requires": {
+                "@iconify/types": "*"
+            }
+        },
         "@iconify/tools": {
             "version": "3.0.7",
             "resolved": "https://registry.npmjs.org/@iconify/tools/-/tools-3.0.7.tgz",
diff --git a/package.json b/package.json
index 4e51cdf..b48183c 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
         "@fontsource/montserrat": "^5.0.16",
         "@hotwired/stimulus": "^3.2.2",
         "@hotwired/turbo": "^7.3.0",
+        "@iconify-json/bi": "^1.1.23",
         "@material/animation": "^14.0.0",
         "@types/figlet": "^1.5.8",
         "astro": "^3.6.4",
diff --git a/src/env.d.ts b/src/env.d.ts
index f964fe0..acef35f 100644
--- a/src/env.d.ts
+++ b/src/env.d.ts
@@ -1 +1,2 @@
+/// <reference path="../.astro/types.d.ts" />
 /// <reference types="astro/client" />
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index de75d7a..46c3bcc 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -1,5 +1,5 @@
 ---
-import { Icon } from 'astro-icon'
+import { Icon } from 'astro-icon/components'
 import "../styles/app.scss";
 import "@fontsource/montserrat/400.css";
 import "@fontsource/montserrat/400-italic.css";
@@ -64,12 +64,12 @@ if (date.getMonth() != 12) {
             </div>
             <nav>
                 <ul>
-                    <li><a href="/"><Icon pack="bi" name="house" aria-hidden="true" />Home</a></li>
+                    <li><a href="/"><Icon name="bi:house" aria-hidden="true" />Home</a></li>
                 </ul>
                 <ul id="social-icons">
-                    <li><a href="https://twitter.com/orryverducci" title="Twitter" target="_blank"><Icon pack="bi" name="twitter" role="img" aria-label="Twitter" /></a></li>
-                    <li><a href="https://github.com/orryverducci/" title="GitHub" target="_blank"><Icon pack="bi" name="github" role="img" aria-label="GitHub" /></a></li>
-                    <li><a href="https://www.linkedin.com/in/orryv/" title="LinkedIn" target="_blank"><Icon pack="bi" name="linkedin" role="img" aria-label="LinkedIn" /></a></li>
+                    <li><a href="https://twitter.com/orryverducci" title="Twitter" target="_blank"><Icon name="bi:twitter" role="img" aria-label="Twitter" /></a></li>
+                    <li><a href="https://github.com/orryverducci/" title="GitHub" target="_blank"><Icon name="bi:github" role="img" aria-label="GitHub" /></a></li>
+                    <li><a href="https://www.linkedin.com/in/orryv/" title="LinkedIn" target="_blank"><Icon name="bi:linkedin" role="img" aria-label="LinkedIn" /></a></li>
                 </ul>
             </nav>
             <a id="menu-icon" href="#" data-action="header#toggleMenu">