feat: add icon on skill badge

src/components/project-card.tsx

@@ -90,21 +90,34 @@ export function ProjectCard({
       <CardContent className="mt-auto flex flex-col px-2">
         {tags?.badges && tags.badges.length > 0 && (
           <div className="mt-2 flex flex-wrap gap-1">
-            {tags.badges.map((b, i) => (
+            {tags.badges.map((b, i) => {
-              <Badge
+              const icon = b.icon as Media | undefined
-                key={title + dates + b + i.toString()}
+              return (
-                variant="secondary"
+                <Badge
-                className={clsx(
+                  key={title + dates + b + i.toString()}
-                  'px-1 py-0 text-[10px]',
+                  variant="secondary"
-                  b.color || tags.defaultColor ? `bg-[${b.color || tags.defaultColor}]` : '',
+                  className={clsx(
-                  b.textColor || tags.defaultTextColor
+                    'px-1 py-0 text-[10px]',
-                    ? `text-[${b.textColor || tags.defaultTextColor}]`
+                    b.color || tags.defaultColor ? `bg-[${b.color || tags.defaultColor}]` : '',
-                    : '',
+                    b.textColor || tags.defaultTextColor
-                )}
+                      ? `text-[${b.textColor || tags.defaultTextColor}]`
-              >
+                      : '',
-                {b.value}
+                  )}
-              </Badge>
+                >
-            ))}
+                  {!!icon && icon.url && (
+                    <Image
+                      src={icon.url}
+                      alt={icon.alt || ''}
+                      width={16}
+                      height={16}
+                      className="not-[dark]:invert"
+                    />
+                  )}
+
+                  {b.value}
+                </Badge>
+              )
+            })}
           </div>
         )}
       </CardContent>