refactor: lucide icons via astro-icon

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
-        className="size-4 transition-transform group-hover:-translate-x-1"
+      <Icon
+        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
-        className="size-4 transition-transform group-hover:translate-x-1"
+      <Icon
+        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 {
-  Github,
-  Globe,
-  Linkedin,
-  Mail,
-  MessageCircleQuestion,
-  Rss,
-  Twitter,
-} from 'lucide-react'
+import { Icon } from 'astro-icon/components'
 
 interface Props {
   links: SocialLink[]
@@ -21,25 +13,26 @@ interface Props {
 const { links, className } = Astro.props
 
 const iconMap = {
-  Website: Globe,
-  GitHub: Github,
-  LinkedIn: Linkedin,
-  Twitter: Twitter,
-  Email: Mail,
-  RSS: Rss,
+  Website: 'lucide:globe',
+  GitHub: 'lucide:github',
+  LinkedIn: 'lucide:linkedin',
+  Twitter: 'lucide:twitter',
+  Email: 'lucide:mail',
+  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
-      className="size-5 transition-transform group-open:rotate-180"
+    <Icon
+      name="lucide:chevron-down"
+      class="size-5 transition-transform group-open:rotate-180"
     />
   </summary>
   <nav>