refactor: add remixicons

for more variety in icons

5 files changed, 28 insertions, 37 deletions

diff --git a/package-lock.json b/package-lock.json
index c283be1..56c532d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,7 +8,8 @@
       "name": "astrolink",
       "version": "0.0.1",
       "dependencies": {
-        "astro": "^4.13.1"
+        "astro": "^4.13.1",
+        "remixicon": "^4.3.0"
       }
     },
     "node_modules/@ampproject/remapping": {
@@ -4076,9 +4077,9 @@
       "license": "MIT"
     },
     "node_modules/micromatch": {
-      "version": "4.0.7",
-      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.7.tgz",
-      "integrity": "sha512-LPP/3KorzCwBxfeUuZmaR6bG2kdeHSbe0P2tY3FLRU4vYrjYz5hI4QZwV0njUx3jeuKe67YukQ1LSPZBKDqO/Q==",
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
+      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
       "license": "MIT",
       "dependencies": {
         "braces": "^3.0.3",
@@ -4646,6 +4647,12 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/remixicon": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/remixicon/-/remixicon-4.3.0.tgz",
+      "integrity": "sha512-jRYQ37dTFSkJtvcxwTUAkIiXkYRvA9EDvVuXPNrmt2xf/VS//CRgFtsX2TAFBoQOhh9SDh7l6La4Xu12snEyxg==",
+      "license": "Apache-2.0"
+    },
     "node_modules/restore-cursor": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-4.0.0.tgz",
diff --git a/package.json b/package.json
index 2237374..894416c 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
     "astro": "astro"
   },
   "dependencies": {
-    "astro": "^4.13.1"
+    "astro": "^4.13.1",
+    "remixicon": "^4.3.0"
   }
-}
\ No newline at end of file
+}
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>