feat: install sharp and use keyof icons from lucide for icon

app/page.tsx

@@ -4,7 +4,6 @@ import Markdown from 'react-markdown'
 import BlurFade from '@/components/magicui/blur-fade'
 import BlurFadeText from '@/components/magicui/blur-fade-text'
 import { ProjectCard } from '@/components/project-card'
-import { Badge } from '@/components/ui/badge'
 
 import { DATA } from '@/data/resume'
 

components/project-card.tsx

@@ -1,6 +1,7 @@
 import Image from 'next/image'
 import Link from 'next/link'
 import Markdown from 'react-markdown'
+import { icons } from 'lucide-react'
 
 import { Badge } from '@/components/ui/badge'
 import {
@@ -10,6 +11,7 @@ import {
   CardHeader,
   CardTitle,
 } from '@/components/ui/card'
+import { Icon } from '@/components/ui/icon'
 
 import { cn } from '@/lib/utils'
 
@@ -105,8 +107,15 @@ export function ProjectCard({
           <div className="flex flex-row flex-wrap items-start gap-1">
             {links?.map((link, idx) => (
               <Link href={link?.href} key={idx} target="_blank">
-                <Badge key={idx} className="flex gap-2 px-2 py-1 text-[10px]">
-                  {link.icon}
+                <Badge
+                  key={idx}
+                  className="flex items-center gap-2 px-2 py-1 text-[10px]"
+                >
+                  <Icon
+                    name={link.icon as keyof typeof icons}
+                    size={14}
+                    color="hsl(var(--secondary))"
+                  />
                   {link.type}
                 </Badge>
               </Link>

components/ui/icon.tsx

@@ -0,0 +1,17 @@
+import { icons } from 'lucide-react'
+
+export const Icon = ({
+  name,
+  color,
+  size,
+  className,
+}: {
+  name: keyof typeof icons
+  color: string
+  size: number
+  className?: string
+}) => {
+  const LucideIcon = icons[name as keyof typeof icons]
+
+  return <LucideIcon color={color} size={size} className={className} />
+}

data/resume.tsx

@@ -71,7 +71,7 @@ export const DATA = {
         {
           type: 'Source',
           href: 'https://github.com/kinotio/gelda',
-          icon: <Icons.github className="size-3" />,
+          icon: 'Github',
         },
       ],
       image: '/gelda.png',
@@ -96,7 +96,7 @@ export const DATA = {
         {
           type: 'Source',
           href: 'https://github.com/kinotio/drowser-studio',
-          icon: <Icons.github className="size-3" />,
+          icon: 'Github',
         },
       ],
       image: '/drowser-studio.png',
@@ -114,7 +114,7 @@ export const DATA = {
         {
           type: 'Source',
           href: 'https://github.com/andostronaut/drowser',
-          icon: <Icons.github className="size-3" />,
+          icon: 'Github',
         },
       ],
       image: '/drowser.png',
@@ -132,7 +132,7 @@ export const DATA = {
         {
           type: 'Source',
           href: 'https://github.com/andostronaut/cocli',
-          icon: <Icons.github className="size-3" />,
+          icon: 'Github',
         },
       ],
       image: '/cocli.gif',

package.json

@@ -29,6 +29,7 @@
     "rehype-stringify": "^10.0.0",
     "remark-parse": "^11.0.0",
     "remark-rehype": "^11.1.0",
+    "sharp": "^0.33.4",
     "shiki": "^1.7.0",
     "tailwind-merge": "^2.3.0",
     "tailwindcss-animate": "^1.0.7",