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>