From 6b354ed153a4a5a1f089cbe7d33d38f97a0c2b29 Mon Sep 17 00:00:00 2001
From: Christine Tham <chris.tham@hellotham.com>
Date: Sun, 24 Mar 2024 19:01:11 +1100
Subject: [PATCH] Replaced heroicons with v2

---
 README.md                            |  2 ++
 package.json                         |  3 +--
 pnpm-lock.yaml                       | 19 +++++--------------
 src/components/blogcard.astro        |  6 +++---
 src/components/bloghero.astro        |  4 ++--
 src/components/features.astro        |  8 ++------
 src/components/header.astro          |  4 ++--
 src/components/moremenu.astro        |  4 ++--
 src/components/paginatecontrol.astro |  4 ++--
 src/components/search.astro          |  2 +-
 src/components/theme.astro           | 14 +++++++-------
 11 files changed, 29 insertions(+), 41 deletions(-)

diff --git a/README.md b/README.md
index daa5891..eb6cf73 100644
--- a/README.md
+++ b/README.md
@@ -224,3 +224,5 @@ All commands are run from the root of the project, from a terminal:
   - Fixed search not working due to stricter alpine checking
   - Migrated to standard astro tsconfig.json
   - Fixed astro check errors
+- 3.4.0: Minor changes:
+  - Replaced heroicons to v2
diff --git a/package.json b/package.json
index 236a75a..71fd81a 100644
--- a/package.json
+++ b/package.json
@@ -58,8 +58,7 @@
     "@astrojs/markdoc": "^0.9.2",
     "@astrojs/rss": "^4.0.5",
     "@iconify-json/bi": "^1.1.23",
-    "@iconify-json/heroicons-outline": "^1.1.10",
-    "@iconify-json/heroicons-solid": "^1.1.11",
+    "@iconify-json/heroicons": "^1.1.20",
     "astro-icon": "^1.1.0",
     "astro-seo": "^0.8.3",
     "hero-patterns": "^2.1.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c0461b0..e3abd71 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -17,12 +17,9 @@ dependencies:
   '@iconify-json/bi':
     specifier: ^1.1.23
     version: 1.1.23
-  '@iconify-json/heroicons-outline':
-    specifier: ^1.1.10
-    version: 1.1.10
-  '@iconify-json/heroicons-solid':
-    specifier: ^1.1.11
-    version: 1.1.11
+  '@iconify-json/heroicons':
+    specifier: ^1.1.20
+    version: 1.1.20
   astro-icon:
     specifier: ^1.1.0
     version: 1.1.0
@@ -870,14 +867,8 @@ packages:
       '@iconify/types': 2.0.0
     dev: false
 
-  /@iconify-json/heroicons-outline@1.1.10:
-    resolution: {integrity: sha512-3sPszsoIlLLLxxXxJkla6GuNNpJrie/84iE8cbDi+NMkaeHMsfVTOHh3LxLsPRaTBFTSlGflJ2ZWAb1e3Ae7Gw==}
-    dependencies:
-      '@iconify/types': 2.0.0
-    dev: false
-
-  /@iconify-json/heroicons-solid@1.1.11:
-    resolution: {integrity: sha512-Nzhjs8voo4d+gcrfhlY/F0bRonEmLHT1+DeD2nYubvAF151pxXPqTS9bRB49Hqpdxl1l9LS2VTPtQPRypj/csQ==}
+  /@iconify-json/heroicons@1.1.20:
+    resolution: {integrity: sha512-puNt1al/rDw8Rb5x8sfk20UA8AQjMskLMh63nSUBj+8I0lQ7LtX+0Qn8wow2xTXTEsynJ9xXLD8Aat53e0qi8A==}
     dependencies:
       '@iconify/types': 2.0.0
     dev: false
diff --git a/src/components/blogcard.astro b/src/components/blogcard.astro
index 21e100b..0c127f2 100644
--- a/src/components/blogcard.astro
+++ b/src/components/blogcard.astro
@@ -53,13 +53,13 @@ if (post.data.author) {
         <span
           class='mr-3 inline-flex items-center border-r-2 border-purple-200 py-1 pr-3 text-xs leading-none text-gray-500 dark:border-purple-600 dark:text-gray-400'
         >
-          <Icon class='mr-1 h-4 w-4' name='heroicons-outline:calendar' />
+          <Icon class='mr-1 h-4 w-4' name='heroicons:calendar-days' />
           {post.data.publishDate.toDateString()}
         </span>
         {
           post.data.minutesRead && (
             <span class='mr-3 inline-flex items-center border-r-2 border-purple-200 py-1 pr-3 text-xs leading-none text-gray-500 dark:border-purple-600 dark:text-gray-400'>
-              <Icon class='mr-1 h-4 w-4' name='heroicons-outline:clock' />
+              <Icon class='mr-1 h-4 w-4' name='heroicons:clock' />
               {post.data.minutesRead}
             </span>
           )
@@ -67,7 +67,7 @@ if (post.data.author) {
         {
           post.data.author && (
             <span class='text-rosely1 dark:text-rosely7 inline-flex items-center text-xs leading-none'>
-              <Icon class='mr-1 h-4 w-4' name='heroicons-outline:user-circle' />
+              <Icon class='mr-1 h-4 w-4' name='heroicons:user-circle' />
               {author.data.title}
             </span>
           )
diff --git a/src/components/bloghero.astro b/src/components/bloghero.astro
index 96fe323..635165e 100644
--- a/src/components/bloghero.astro
+++ b/src/components/bloghero.astro
@@ -60,7 +60,7 @@ if (frontmatter.author) {
         )
       }
       <span class='mr-6 flex items-center'>
-        <Icon class='mr-1 h-6 w-6 text-purple-200' name='heroicons-outline:calendar' />
+        <Icon class='mr-1 h-6 w-6 text-purple-200' name='heroicons:calendar-days' />
         <span class='ml-1 font-semibold text-purple-200'>
           {new Date(frontmatter.publishDate).toString()}
         </span>
@@ -68,7 +68,7 @@ if (frontmatter.author) {
       {
         frontmatter.minutesRead && (
           <span class='flex items-center'>
-            <Icon class='mr-1 h-6 w-6 text-purple-200' name='heroicons-outline:clock' />
+            <Icon class='mr-1 h-6 w-6 text-purple-200' name='heroicons:clock' />
             <span class='ml-1 font-semibold text-purple-200'>{frontmatter.minutesRead}</span>
           </span>
         )
diff --git a/src/components/features.astro b/src/components/features.astro
index c75051f..0e904a0 100644
--- a/src/components/features.astro
+++ b/src/components/features.astro
@@ -12,7 +12,7 @@ const features = [
     name: 'Customisable Design',
     description:
       'Built using the TailwindCSS ecosystem (including HeroIcons and Hero Patterns). Very easy to customise and change design. Template illustrations by unDraw.',
-    icon: 'puzzle'
+    icon: 'puzzle-piece'
   },
   {
     name: 'SEO Ready',
@@ -55,11 +55,7 @@ const features = [
             <div class='relative'>
               <dt>
                 <div class='absolute flex h-12 w-12 items-center justify-center rounded-md bg-purple-500 text-white dark:bg-purple-400 dark:text-black'>
-                  <Icon
-                    class='h-6 w-6'
-                    aria-hidden='true'
-                    name={'heroicons-outline:' + feature.icon}
-                  />
+                  <Icon class='h-6 w-6' aria-hidden='true' name={'heroicons:' + feature.icon} />
                 </div>
                 <p class='ml-16 text-lg font-medium leading-6 text-gray-900 dark:text-gray-200'>
                   {feature.name}
diff --git a/src/components/header.astro b/src/components/header.astro
index 65b5d20..70fa453 100644
--- a/src/components/header.astro
+++ b/src/components/header.astro
@@ -26,13 +26,13 @@ import { Logo } from '../config'
               x-bind:class="{'hidden': isOpen, 'block': !isOpen }"
               class='block h-6 w-6'
               aria-hidden='true'
-              name='heroicons-outline:menu'
+              name='heroicons:bars-3'
             />
             <Icon
               x-bind:class="{'block': isOpen, 'hidden': !isOpen }"
               class='hidden h-6 w-6'
               aria-hidden='true'
-              name='heroicons-outline:x'
+              name='heroicons:x-mark'
             />
           </button>
         </div>
diff --git a/src/components/moremenu.astro b/src/components/moremenu.astro
index 80d828b..05eb352 100644
--- a/src/components/moremenu.astro
+++ b/src/components/moremenu.astro
@@ -22,7 +22,7 @@ const showMoreSection = COMMUNITY_INVITE_URL
       <ol role='list' class='mt-4 flex flex-col space-y-3 text-sm'>
         {editHref && (
           <li class='flex items-center py-1 text-gray-500 dark:text-gray-400'>
-            <Icon name='heroicons-outline:pencil' class='mr-2 h-6 w-6' />
+            <Icon name='heroicons:pencil' class='mr-2 h-6 w-6' />
             <a
               class='hover:text-purple-600 dark:hover:text-purple-300'
               href={editHref}
@@ -34,7 +34,7 @@ const showMoreSection = COMMUNITY_INVITE_URL
         )}
         {COMMUNITY_INVITE_URL && (
           <li class='flex items-center py-1 text-gray-500 dark:text-gray-400'>
-            <Icon name='heroicons-outline:chat-alt-2' class='mr-2 h-6 w-6' />
+            <Icon name='heroicons:chat-bubble-bottom-center-text' class='mr-2 h-6 w-6' />
             <a
               class='hover:text-purple-600 dark:hover:text-purple-300'
               href={COMMUNITY_INVITE_URL}
diff --git a/src/components/paginatecontrol.astro b/src/components/paginatecontrol.astro
index e1a80b7..3aaa071 100644
--- a/src/components/paginatecontrol.astro
+++ b/src/components/paginatecontrol.astro
@@ -48,7 +48,7 @@ const { base, page } = Astro.props
             ]}
           >
             <span class='sr-only'>Previous</span>
-            <Icon class='h-5 w-5' name='heroicons-solid:chevron-left' />
+            <Icon class='h-5 w-5' name='heroicons:chevron-left-20-solid' />
           </a>
           {Array.from({ length: page.lastPage }, (_, index) => index + 1).map((i) => (
             <a
@@ -74,7 +74,7 @@ const { base, page } = Astro.props
             ]}
           >
             <span class='sr-only'>Next</span>
-            <Icon class='h-5 w-5' name='heroicons-solid:chevron-right' />
+            <Icon class='h-5 w-5' name='heroicons:chevron-right-20-solid' />
           </a>
         </nav>
       </div>
diff --git a/src/components/search.astro b/src/components/search.astro
index 178aee8..3da7575 100644
--- a/src/components/search.astro
+++ b/src/components/search.astro
@@ -143,7 +143,7 @@ import { Icon } from 'astro-icon/components'
                 x-on:click='searchResults = false'
               >
                 <span class='sr-only'>Close panel</span>
-                <Icon class='h-6 w-6' name='heroicons-outline:x' />
+                <Icon class='h-6 w-6' name='heroicons:x-mark' />
               </button>
             </div>
 
diff --git a/src/components/theme.astro b/src/components/theme.astro
index b4e5210..b0da10d 100644
--- a/src/components/theme.astro
+++ b/src/components/theme.astro
@@ -13,7 +13,7 @@ import { Icon } from 'astro-icon/components'
       x-on:click='themeOpen = !themeOpen'
     >
       Light/Dark
-      <Icon class='-mr-1 ml-2 h-5 w-5' aria-hidden='true' name='heroicons-solid:chevron-down' />
+      <Icon class='-mr-1 ml-2 h-5 w-5' aria-hidden='true' name='heroicons:chevron-down-20-solid' />
     </button>
   </div>
   <ul
@@ -38,7 +38,7 @@ import { Icon } from 'astro-icon/components'
       x-on:click="localStorage.removeItem('theme'); window.location.reload()"
     >
       <div class='flex items-center'>
-        <Icon class='h-6 w-6' name='heroicons-outline:star' />
+        <Icon class='h-6 w-6' name='heroicons:star' />
         <!-- Selected: "font-semibold", Not Selected: "font-normal" -->
         <span
           class='ml-1 block truncate'
@@ -50,7 +50,7 @@ import { Icon } from 'astro-icon/components'
         class='absolute inset-y-0 right-0 flex items-center pr-4 text-purple-600 hover:text-white'
       >
         <!-- Heroicon name: solid/check -->
-        <Icon class='h-5 w-5' name='heroicons-solid:check' />
+        <Icon class='h-5 w-5' name='heroicons:check-20-solid' />
       </span>
     </li>
     <li
@@ -60,7 +60,7 @@ import { Icon } from 'astro-icon/components'
       x-on:click="localStorage.theme = 'light'; window.location.reload()"
     >
       <div class='flex items-center'>
-        <Icon class='h-6 w-6' name='heroicons-outline:sun' />
+        <Icon class='h-6 w-6' name='heroicons:sun' />
         <!-- Selected: "font-semibold", Not Selected: "font-normal" -->
         <span
           class='ml-1 block truncate'
@@ -71,7 +71,7 @@ import { Icon } from 'astro-icon/components'
         x-show="localStorage.theme == 'light'"
         class='absolute inset-y-0 right-0 flex items-center pr-4 text-purple-600 hover:text-white'
       >
-        <Icon class='h-5 w-5' name='heroicons-solid:check' />
+        <Icon class='h-5 w-5' name='heroicons:check-20-solid' />
       </span>
     </li>
     <li
@@ -81,7 +81,7 @@ import { Icon } from 'astro-icon/components'
       x-on:click="localStorage.theme = 'dark'; window.location.reload()"
     >
       <div class='flex items-center'>
-        <Icon class='h-6 w-6' name='heroicons-solid:moon' />
+        <Icon class='h-6 w-6' name='heroicons:moon-solid' />
         <!-- Selected: "font-semibold", Not Selected: "font-normal" -->
         <span
           class='ml-1 block truncate'
@@ -92,7 +92,7 @@ import { Icon } from 'astro-icon/components'
         x-show="localStorage.theme == 'dark'"
         class='absolute inset-y-0 right-0 flex items-center pr-4 text-purple-600 hover:text-white'
       >
-        <Icon class='h-5 w-5' name='heroicons-solid:check' />
+        <Icon class='h-5 w-5' name='heroicons:check-20-solid' />
       </span>
     </li>
   </ul>