feat: drop Font Awesome, migrate to SVG icons

1 files changed, 11 insertions, 4 deletions

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index e4e6726..c6d0eb7 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -3,12 +3,22 @@
   import { base } from '$app/paths'
   import { socials } from '$lib/socials.json'
 
+  import SteamIcon from '$lib/assets/steam.svg?src'
+  import GithubIcon from '$lib/assets/github.svg?src'
+  import DevIcon from '$lib/assets/dev.svg?src'
+  import TelegramIcon from '$lib/assets/telegram.svg?src'
+  import EnvelopeIcon from '$lib/assets/envelope.svg?src'
+
   type Social = {
     link: string,
     icon: string
   }
 
   const socialsList: Social[] = socials
+
+  const insertIcon: Function = (element: HTMLElement, icon: string) => {
+    element.innerHTML = eval(`${icon}Icon`)
+  }
 </script>
 
 <svelte:head>
@@ -20,12 +30,9 @@
   <p>Just your average IT student</p>
   <div class="socials">
     {#each socialsList as {link, icon}}
-      <a href={link} target="_blank">
-        <i class={'social-icon ' + icon}></i>
-      </a>
+      <a use:insertIcon={icon} href={link} target="_blank" class="icon"></a>
     {/each}
   </div>
-  <br>
   <div class="projects">
     Check out my projects <a href={base + '/projects'}><b>here</b></a>
   </div>