Replaced heroicons with v2

Author: ChristineTham

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

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",

pnpm-lock.yaml

@@ -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>
           )

src/components/blogcard.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>
         )

src/components/bloghero.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}

src/components/features.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>

src/components/header.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}

src/components/moremenu.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>

src/components/paginatecontrol.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>