refactor: add remixicons

for more variety in icons

3 files changed, 14 insertions, 31 deletions

diff --git a/src/components/Link.astro b/src/components/Link.astro
index d5a9fa7..4ffb04b 100644
--- a/src/components/Link.astro
+++ b/src/components/Link.astro
@@ -1,14 +1,5 @@
 ---
-import { componentIsHTMLElement } from "astro/runtime/server/render/dom.js";
-import Dribbble from "./icons/Dribbble.astro";
-import Facebook from "./icons/Facebook.astro";
-import Instagram from "./icons/Instagram.astro";
-import Linkedin from "./icons/Linkedin.astro";
-import Shop from "./icons/Shop.astro";
-import Twitch from "./icons/Twitch.astro";
-import Url from "./icons/Url.astro";
-import XTwitter from "./icons/X-twitter.astro";
-import Youtube from "./icons/Youtube.astro";
+import 'remixicon/fonts/remixicon.css'
 
 interface Props {
     icon: string;
@@ -22,15 +13,7 @@ const { icon, title, description, url } = Astro.props;
 
 <a href={url} class="link">
     <span class="link-icon">
-        {icon === 'dribble' && <Dribbble></Dribbble>}
-        {icon === 'facebook' && <Facebook></Facebook>}
-        {icon === 'instagram' && <Instagram></Instagram>}
-        {icon === 'linkedin' && <Linkedin></Linkedin>}
-        {icon === 'shop' && <Shop></Shop>}
-        {icon === 'twitch' && <Twitch></Twitch>}
-        {icon === 'url' && <Url></Url>}
-        {icon === 'xtwitter' && <XTwitter></XTwitter>}
-        {icon === 'youtube' && <Youtube></Youtube>}
+        <i class={'ri-' + icon}></i>
     </span>
     <div class="link-content">
         <h2 class="link-title">{title}</h2>
@@ -58,6 +41,11 @@ const { icon, title, description, url } = Astro.props;
         align-items: center;   
     }
 
+    .link-icon i {
+        font-size: 1.5rem;
+        color: var(--zinc-50)
+    }
+
     .link-title, .link-description {
         font-size: 1rem;
     }
diff --git a/src/data/user.json b/src/data/user.json
index 0a05f27..9b17563 100644
--- a/src/data/user.json
+++ b/src/data/user.json
@@ -4,43 +4,43 @@
     "links": [
         {
             "url": "#",
-            "icon": "url",
+            "icon": "link",
             "title": "Personal Portfolio",
             "description": "All my latest design projects"
         },
         {
             "url": "#",
-            "icon": "youtube",
+            "icon": "youtube-fill",
             "title": "Youtube Channel",
             "description": "All my latest design projects"
         },
         {
             "url": "#",
-            "icon": "shop",
+            "icon": "shopping-bag-line",
             "title": "Template Store",
             "description": "Discover templates that suit you"
         },
         {
             "url": "#",
-            "icon": "url",
+            "icon": "link",
             "title": "Design Podcast",
             "description": "Every Friday a new episode"
         },
         {
             "url": "#",
-            "icon": "instagram",
+            "icon": "instagram-line",
             "title": "Instagram Profile",
             "description": "Designer lifestyle and more"
         },
         {
             "url": "#",
-            "icon": "dribble",
+            "icon": "dribbble-line",
             "title": "Dribbble Shots",
             "description": "Know more about my work"
         },
         {
             "url": "#",
-            "icon": "url",
+            "icon": "link",
             "title": "Free Resources",
             "description": "Collection of free resources"
         }
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 12ef02b..b80dd61 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -41,9 +41,4 @@ const { title } = Astro.props;
 		background: var(--zinc-950);
         color: var(--zinc-50)
 	}
-
-    span svg {
-        width: 1.5rem;
-        fill: var(--zinc-50)
-    }
 </style>