fix: add lucide-astro package and update social icons in Intro component

package-lock.json

@@ -12,6 +12,7 @@
         "@fontsource/jetbrains-mono": "^5.2.8",
         "@tailwindcss/vite": "^4.1.18",
         "astro": "^5.16.10",
+        "lucide-astro": "^0.556.0",
         "tailwindcss": "^4.1.18"
       },
       "devDependencies": {
@@ -2002,6 +2003,7 @@
       "resolved": "https://registry.npmjs.org/astro/-/astro-5.16.10.tgz",
       "integrity": "sha512-mBaRwFrqwCHiKDvvfNW2rRRkLAqnkj3lbkte6Vg4OzeUiDyEsdU4oOqTZxHJf/mxzZvBiU37BxG1oeh+tq1IUA==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@astrojs/compiler": "^2.13.0",
         "@astrojs/internal-helpers": "0.7.5",
@@ -3370,6 +3372,16 @@
         "node": "20 || >=22"
       }
     },
+    "node_modules/lucide-astro": {
+      "version": "0.556.0",
+      "resolved": "https://registry.npmjs.org/lucide-astro/-/lucide-astro-0.556.0.tgz",
+      "integrity": "sha512-ugMjPb45AMfkLCaduNSbyy5NQEKvB1TxVVMmUS4S6L807PMESnX0Qp+DIKHjbyjJmPXOyLRbrzvR3YikTK7brg==",
+      "deprecated": "Deprecated: Use `@lucide/astro`",
+      "license": "MIT",
+      "peerDependencies": {
+        "astro": ">=2.7.1"
+      }
+    },
     "node_modules/magic-string": {
       "version": "0.30.21",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",

package.json

@@ -14,6 +14,7 @@
     "@fontsource/jetbrains-mono": "^5.2.8",
     "@tailwindcss/vite": "^4.1.18",
     "astro": "^5.16.10",
+    "lucide-astro": "^0.556.0",
     "tailwindcss": "^4.1.18"
   },
   "devDependencies": {

src/assets/images/social-email.svg

@@ -1,15 +0,0 @@
-<svg
-  xmlns="http://www.w3.org/2000/svg"
-  viewBox="0 0 24 21"
-  fill="none"
-  stroke="currentColor"
-  stroke-width="2"
-  stroke-linecap="round"
-  stroke-linejoin="round"
->
-  <path
-    d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"
-  >
-  </path>
-  <polyline points="22,6 12,13 2,6"></polyline>
-</svg>

src/assets/images/social-facebook.svg

@@ -1,14 +0,0 @@
-<svg
-  xmlns="http://www.w3.org/2000/svg"
-  viewBox="0 0 24 24"
-  fill="none"
-  stroke="currentColor"
-  stroke-width="2"
-  stroke-linecap="round"
-  stroke-linejoin="round"
->
-  <path
-    d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"
-  >
-  </path>
-</svg>

src/assets/images/social-github.svg

@@ -1,14 +0,0 @@
-<svg
-  xmlns="http://www.w3.org/2000/svg"
-  viewBox="0 0 24 24"
-  fill="none"
-  stroke="currentColor"
-  stroke-width="2"
-  stroke-linecap="round"
-  stroke-linejoin="round"
->
-  <path
-    d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"
-  >
-  </path>
-</svg>

src/assets/images/social-linkedin.svg

@@ -1,16 +0,0 @@
-<svg
-  xmlns="http://www.w3.org/2000/svg"
-  viewBox="0 0 24 24"
-  fill="none"
-  stroke="currentColor"
-  stroke-width="2"
-  stroke-linecap="round"
-  stroke-linejoin="round"
->
-  <path
-    d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"
-  >
-  </path>
-  <rect x="2" y="9" width="4" height="12"></rect>
-  <circle cx="4" cy="4" r="2"></circle>
-</svg>

src/assets/images/social-x.svg

@@ -1,9 +0,0 @@
-<svg
-  xmlns="http://www.w3.org/2000/svg"
-  viewBox="0 0 24 24"
-  fill="currentColor"
-  class="w-6 h-6"
->
-  <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z">
-  </path>
-</svg>

src/components/Intro.astro

@@ -1,11 +1,7 @@
 ---
 import { Image } from "astro:assets";
 import profileImage from "@/assets/images/profile.webp";
-import socialEmail from "@/assets/images/social-email.svg";
+import { Linkedin, Github, Twitter, Facebook, Mail } from "lucide-astro";
-import socialFacebook from "@/assets/images/social-facebook.svg";
-import socialGithub from "@/assets/images/social-github.svg";
-import socialLinkedIn from "@/assets/images/social-linkedin.svg";
-import socialX from "@/assets/images/social-x.svg";
 import SocialLink from "@/components/SocialLink.astro";
 ---
 
@@ -27,32 +23,23 @@ import SocialLink from "@/components/SocialLink.astro";
     <SocialLink
       href="https://www.linkedin.com/in/dhemas-nurjaya-030890bb"
       label="Linkedin"
-      icon={socialLinkedIn}
+      icon={Linkedin}
-      alt="LinkedIn"
     />
     <SocialLink
       href="https://github.com/dhemasnurjaya"
       label="Github"
-      icon={socialGithub}
+      icon={Github}
-      alt="Github"
-    />
-    <SocialLink
-      href="https://x.com/dhemaseka"
-      label="X"
-      icon={socialX}
-      alt="X"
     />
+    <SocialLink href="https://x.com/dhemaseka" label="X" icon={Twitter} />
     <SocialLink
       href="https://www.facebook.com/Dhemas"
       label="Facebook"
-      icon={socialFacebook}
+      icon={Facebook}
-      alt="Facebook"
     />
     <SocialLink
       href="mailto:dhemasnurjaya@gmail.com"
       label="Email"
-      icon={socialEmail}
+      icon={Mail}
-      alt="Email"
     />
   </div>
   <div class="mt-24"></div>

src/components/SocialLink.astro

@@ -1,17 +1,17 @@
 ---
-import { Image } from "astro:assets";
-import type { ImageMetadata } from "astro";
-
 interface Props {
   href: string;
   label: string;
-  icon: ImageMetadata;
+  icon: any;
-  alt: string;
 }
 
-const { href, label, icon, alt } = Astro.props;
+const { href, label, icon: Icon } = Astro.props;
 ---
 
-<a href={href} aria-label={label}>
+<a
-  <Image src={icon} alt={alt} loading="eager" class="w-6 h-6 invert" />
+  href={href}
+  aria-label={label}
+  class="text-zinc-300 hover:text-zinc-100 transition-colors"
+>
+  <Icon class="size-6" />
 </a>

src/pages/search/index.astro

@@ -6,4 +6,4 @@ import Layout from "@/layouts/Layout.astro";
 <Layout title="Dhemas Nurjaya" description="Welcome to my personal website">
   <PageTitle title="Search" />
   <p>Come back later. This page will be available soon!</p>
-</Layout>
+</Layout>