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

This commit is contained in:
fiatcode 2026-01-23 09:16:03 +07:00
parent 88fd06ac16
commit 95875316c8
10 changed files with 28 additions and 96 deletions

12
package-lock.json generated
View file

@ -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",

View file

@ -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": {

View file

@ -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>

Before

Width:  |  Height:  |  Size: 334 B

View file

@ -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>

Before

Width:  |  Height:  |  Size: 276 B

View file

@ -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>

Before

Width:  |  Height:  |  Size: 502 B

View file

@ -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>

Before

Width:  |  Height:  |  Size: 379 B

View file

@ -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>

Before

Width:  |  Height:  |  Size: 291 B

View file

@ -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 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 { Linkedin, Github, Twitter, Facebook, Mail } from "lucide-astro";
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}
alt="LinkedIn"
icon={Linkedin}
/>
<SocialLink
href="https://github.com/dhemasnurjaya"
label="Github"
icon={socialGithub}
alt="Github"
/>
<SocialLink
href="https://x.com/dhemaseka"
label="X"
icon={socialX}
alt="X"
icon={Github}
/>
<SocialLink href="https://x.com/dhemaseka" label="X" icon={Twitter} />
<SocialLink
href="https://www.facebook.com/Dhemas"
label="Facebook"
icon={socialFacebook}
alt="Facebook"
icon={Facebook}
/>
<SocialLink
href="mailto:dhemasnurjaya@gmail.com"
label="Email"
icon={socialEmail}
alt="Email"
icon={Mail}
/>
</div>
<div class="mt-24"></div>

View file

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