refactor: lucide icons via astro-icon

astro.config.ts

@@ -16,6 +16,8 @@ import remarkMath from 'remark-math'
 import remarkToc from 'remark-toc'
 import sectionize from '@hbsnow/rehype-sectionize'
 
+import icon from 'astro-icon'
+
 // https://astro.build/config
 export default defineConfig({
   site: 'https://astro-erudite.vercel.app',
@@ -26,6 +28,7 @@ export default defineConfig({
     sitemap(),
     mdx(),
     react(),
+    icon(),
   ],
   markdown: {
     syntaxHighlight: false,

package.json

@@ -1,7 +1,7 @@
 {
   "name": "astro-erudite",
   "type": "module",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "private": true,
   "scripts": {
     "dev": "astro dev",
@@ -20,6 +20,7 @@
     "@astrojs/sitemap": "^3.1.6",
     "@astrojs/tailwind": "^5.1.0",
     "@hbsnow/rehype-sectionize": "^1.0.7",
+    "@iconify-json/lucide": "^1.2.4",
     "@radix-ui/react-avatar": "^1.1.0",
     "@radix-ui/react-dropdown-menu": "^2.1.1",
     "@radix-ui/react-icons": "^1.3.0",
@@ -30,10 +31,11 @@
     "@types/react": "^18.3.5",
     "@types/react-dom": "^18.3.0",
     "astro": "^4.11.3",
+    "astro-icon": "^1.1.1",
     "bootstrap-icons": "^1.11.3",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
-    "lucide-react": "^0.439.0",
+    "lucide-react": "^0.441.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "rehype-katex": "^7.0.0",

src/components/Breadcrumbs.astro

@@ -7,12 +7,12 @@ import {
   BreadcrumbPage,
   BreadcrumbSeparator,
 } from '@/components/ui/breadcrumb'
-import { HomeIcon } from 'lucide-react'
+import { Icon } from 'astro-icon/components'
 
 export interface BreadcrumbItem {
   href?: string
   label: string
-  icon?: any
+  icon?: string
 }
 
 interface Props {
@@ -26,7 +26,7 @@ const { items } = Astro.props
   <BreadcrumbList>
     <BreadcrumbItem>
       <BreadcrumbLink href="/">
-        <HomeIcon className="size-4" />
+        <Icon name="lucide:home" class="size-4" />
       </BreadcrumbLink>
     </BreadcrumbItem>
     {
@@ -36,12 +36,12 @@ const { items } = Astro.props
           <BreadcrumbItem>
             {index === items.length - 1 ? (
               <BreadcrumbPage>
-                {item.icon && <item.icon className="size-4 mr-1" />}
+                {item.icon && <Icon name={item.icon} class="mr-1 size-4" />}
                 {item.label}
               </BreadcrumbPage>
             ) : (
               <BreadcrumbLink href={item.href}>
-                {item.icon && <item.icon className="size-4 mr-1" />}
+                {item.icon && <Icon name={item.icon} class="mr-1 size-4" />}
                 {item.label}
               </BreadcrumbLink>
             )}

src/components/PostNavigation.astro

@@ -2,7 +2,7 @@
 import { buttonVariants } from '@/components/ui/button'
 import { cn } from '@/lib/utils'
 import Link from '@components/Link.astro'
-import { ArrowLeft, ArrowRight } from 'lucide-react'
+import { Icon } from 'astro-icon/components'
 
 const { prevPost, nextPost } = Astro.props
 ---
@@ -18,8 +18,9 @@ const { prevPost, nextPost } = Astro.props
     aria-disabled={!prevPost}
   >
     <div class="mr-2 flex-shrink-0">
-      <ArrowLeft
+      <Icon
-        className="size-4 transition-transform group-hover:-translate-x-1"
+        name="lucide:arrow-left"
+        class="size-4 transition-transform group-hover:-translate-x-1"
       />
     </div>
     <div class="flex flex-col items-start overflow-hidden">
@@ -45,8 +46,9 @@ const { prevPost, nextPost } = Astro.props
       >
     </div>
     <div class="ml-2 flex-shrink-0">
-      <ArrowRight
+      <Icon
-        className="size-4 transition-transform group-hover:translate-x-1"
+        name="lucide:arrow-right"
+        class="size-4 transition-transform group-hover:translate-x-1"
       />
     </div>
   </Link>

src/components/SocialIcons.astro

@@ -3,15 +3,7 @@ import { buttonVariants } from '@/components/ui/button'
 import { cn } from '@/lib/utils'
 import Link from '@components/Link.astro'
 import type { Link as SocialLink } from '@consts'
-import {
+import { Icon } from 'astro-icon/components'
-  Github,
-  Globe,
-  Linkedin,
-  Mail,
-  MessageCircleQuestion,
-  Rss,
-  Twitter,
-} from 'lucide-react'
 
 interface Props {
   links: SocialLink[]
@@ -21,25 +13,26 @@ interface Props {
 const { links, className } = Astro.props
 
 const iconMap = {
-  Website: Globe,
+  Website: 'lucide:globe',
-  GitHub: Github,
+  GitHub: 'lucide:github',
-  LinkedIn: Linkedin,
+  LinkedIn: 'lucide:linkedin',
-  Twitter: Twitter,
+  Twitter: 'lucide:twitter',
-  Email: Mail,
+  Email: 'lucide:mail',
-  RSS: Rss,
+  RSS: 'lucide:rss',
 }
 
 const getSocialLink = ({ href, label }: SocialLink) => ({
   href: label === 'Email' ? `mailto:${href}` : href,
   ariaLabel: label,
-  Icon: iconMap[label as keyof typeof iconMap] || MessageCircleQuestion,
+  iconName:
+    iconMap[label as keyof typeof iconMap] || 'lucide:message-circle-question',
 })
 ---
 
 <ul class={cn('not-prose flex flex-wrap gap-2', className)} role="list">
   {
     links.map((link) => {
-      const { href, ariaLabel, Icon } = getSocialLink(link)
+      const { href, ariaLabel, iconName } = getSocialLink(link)
       return (
         <li>
           <Link
@@ -48,7 +41,7 @@ const getSocialLink = ({ href, label }: SocialLink) => ({
             title={ariaLabel}
             class={buttonVariants({ variant: 'outline', size: 'icon' })}
           >
-            <Icon className="size-4" />
+            <Icon name={iconName} class="size-4" />
           </Link>
         </li>
       )

src/components/TableOfContents.astro

@@ -1,5 +1,5 @@
 ---
-import { ChevronDown } from 'lucide-react'
+import { Icon } from 'astro-icon/components'
 import TableOfContentsHeading from './TableOfContentsHeading.astro'
 
 export interface Heading {
@@ -41,8 +41,9 @@ function buildToc(headings: Heading[]): Heading[] {
     class="flex cursor-pointer items-center justify-between text-xl font-semibold"
   >
     Table of Contents
-    <ChevronDown
+    <Icon
-      className="size-5 transition-transform group-open:rotate-180"
+      name="lucide:chevron-down"
+      class="size-5 transition-transform group-open:rotate-180"
     />
   </summary>
   <nav>

src/pages/blog/[...slug].astro

@@ -9,9 +9,9 @@ import PostNavigation from '@components/PostNavigation.astro'
 import TableOfContents from '@components/TableOfContents.astro'
 import Layout from '@layouts/Layout.astro'
 import { formatDate, parseAuthors, readingTime } from '@lib/utils'
+import { Icon } from 'astro-icon/components'
 import { Image } from 'astro:assets'
 import { type CollectionEntry, getCollection } from 'astro:content'
-import { ArrowUp, Hash } from 'lucide-react'
 
 export async function getStaticPaths() {
   const posts = (await getCollection('blog'))
@@ -130,7 +130,7 @@ const authors = await parseAuthors(post.data.authors ?? [])
                   href={`/tags/${tag}`}
                   class={badgeVariants({ variant: 'secondary' })}
                 >
-                  <Hash className="-translate-x-0.5 size-3" />
+                  <Icon name="lucide:hash" class="size-3 -translate-x-0.5" />
                   {tag}
                 </a>
               ))
@@ -163,8 +163,9 @@ const authors = await parseAuthors(post.data.authors ?? [])
     title="Scroll to top"
     aria-label="Scroll to top"
   >
-    <ArrowUp
+    <Icon
-      className="mx-auto size-4 transition-all group-hover:-translate-y-0.5"
+      name="lucide:arrow-up"
+      class="mx-auto size-4 transition-all group-hover:-translate-y-0.5"
     />
   </Button>
 

src/pages/tags/[...slug].astro

@@ -3,8 +3,8 @@ import BlogCard from '@components/BlogCard.astro'
 import Breadcrumbs from '@components/Breadcrumbs.astro'
 import Container from '@components/Container.astro'
 import Layout from '@layouts/Layout.astro'
+import { Icon } from 'astro-icon/components'
 import { type CollectionEntry, getCollection } from 'astro:content'
-import { Hash } from 'lucide-react'
 
 type BlogPost = CollectionEntry<'blog'>
 
@@ -43,7 +43,7 @@ export async function getStaticPaths() {
       <span
         class="flex items-center gap-x-1 rounded-full bg-secondary px-4 py-2 text-2xl font-bold"
       >
-        <Hash className="size-6 -translate-x-0.5" strokeWidth={3} />{tag}
+        <Icon name="lucide:hash" class="size-6 -translate-x-0.5" />{tag}
       </span>
     </div>
     <div class="flex flex-col gap-y-4">

src/pages/tags/index.astro

@@ -4,8 +4,8 @@ import Container from '@components/Container.astro'
 import Link from '@components/Link.astro'
 import { badgeVariants } from '@components/ui/badge'
 import Layout from '@layouts/Layout.astro'
+import { Icon } from 'astro-icon/components'
 import { getCollection } from 'astro:content'
-import { Hash } from 'lucide-react'
 
 const blog = (await getCollection('blog')).filter((post) => !post.data.draft)
 
@@ -27,7 +27,7 @@ const tags = blog
               href={`/tags/${tag}`}
               class={badgeVariants({ variant: 'secondary' })}
             >
-              <Hash className="-translate-x-0.5 size-3" />
+              <Icon name="lucide:hash" class="size-3 -translate-x-0.5" />
               {tag}
             </Link>
           ))