Replaced heroicons with v2

hellotham · Mar 24, 2024 · 6b354ed · 6b354ed
1 parent 4a95e57
commit 6b354ed
Show file tree

Hide file tree

Showing 11 changed files with 29 additions and 41 deletions.
diff --git 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
@@ -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
diff --git a/src/components/blogcard.astro b/src/components/blogcard.astro
@@ -53,21 +53,21 @@ 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>
           )
         }
         {
           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
@@ -60,15 +60,15 @@ 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>
       </span>
       {
         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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>