chore: some refactoring and added phosphor icons

src/components/Bubble.astro

@@ -1,14 +1,11 @@
 ---
-import iconGithub from 'lucide-static/icons/github.svg'
-import iconLinkedin from 'lucide-static/icons/linkedin.svg'
-import iconGlobe from 'lucide-static/icons/globe.svg'
-import iconMail from 'lucide-static/icons/mail.svg'
+import PhosphorIcon from './PhosphorIcon.astro'
 
-const ICONS_MAP = {
-    github: iconGithub,
-    linkedin: iconLinkedin,
-    website: iconGlobe,
-    mail: iconMail,
+const ICONS_MAP: Record<string, string> = {
+    github: 'github-logo',
+    linkedin: 'linkedin-logo',
+    website: 'globe',
+    mail: 'mailbox',
 }
 
 type Props = {
@@ -38,8 +35,7 @@ const { image, fullName, entranceDate, exitDate, description, social } = Astro.p
             <div class="social">
                 {Object.entries(social).map(([key, value]) => (
                     <a href={value} target="_blank" rel="noopener noreferrer">
-                        {/* @ts-ignore */}
-                        <img src={ICONS_MAP[key].src} alt={key} />
+                        <PhosphorIcon name={ICONS_MAP[key] ?? 'question-mark'} />
                     </a>
                 ))}
             </div>

src/components/PhosphorIcon.astro

@@ -0,0 +1,21 @@
+---
+import { Image } from 'astro:assets'
+
+type Props = {
+    name: string
+}
+
+const { name } = Astro.props
+
+const icons = Object.fromEntries(
+    Object.entries(
+        import.meta.glob<{ default: ImageMetadata }>(`node_modules/@phosphor-icons/core/assets/light/*.svg`)
+    ).map(([path, module]) => [path.split('/').pop()!.split('.')[0].replace('-light', ''), module])
+)
+
+if (!icons[name]) {
+    throw new Error(`Icon "${name}" not found`)
+}
+---
+
+<Image class="phosphor-icon" src={icons[name]()} alt={name} />