feat: refactored icons included blog platforms

Author: eddiejaoude

package-lock.json

@@ -19,6 +19,11 @@
   },
   "dependencies": {
     "@auth/prisma-adapter": "^2.1.0",
+    "@fortawesome/fontawesome-svg-core": "^6.5.2",
+    "@fortawesome/free-brands-svg-icons": "^6.5.2",
+    "@fortawesome/free-regular-svg-icons": "^6.5.2",
+    "@fortawesome/free-solid-svg-icons": "^6.5.2",
+    "@fortawesome/react-fontawesome": "^0.2.2",
     "@headlessui/react": "^2.0.4",
     "@heroicons/react": "^2.1.3",
     "@ngneat/falso": "^7.2.0",
@@ -28,7 +33,6 @@
     "next-auth": "^4.24.7",
     "react": "^18",
     "react-dom": "^18",
-    "react-social-icons": "^6.16.0",
     "zod": "^3.23.8"
   },
   "devDependencies": {

package.json

@@ -3,6 +3,10 @@ import { Inter } from "next/font/google";
 import "./globals.css";
 import prisma from "@/models/db";
 
+import "@fortawesome/fontawesome-svg-core/styles.css";
+import { config } from "@fortawesome/fontawesome-svg-core";
+config.autoAddCss = false;
+
 import { classNames } from "@/utils/classNames";
 import { authOptions } from "@/app/api/auth/[...nextauth]/route";
 import Header from "@/components/Header";

src/app/layout.js

@@ -1,9 +1,10 @@
 import { ChevronRightIcon } from "@heroicons/react/20/solid";
 import Image from "next/image";
 import Link from "next/link";
-import { SocialIcon } from "react-social-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import Badge from "@/components/Badge";
+import socialIcon from "@/config/socialIcon";
 
 export default function Item({ data }) {
   return (
@@ -20,9 +21,10 @@ export default function Item({ data }) {
             />
           )}
           {data.icon && (
-            <SocialIcon
-              network={data.icon}
-              className="h-12 w-12 flex-none rounded-full bg-gray-50"
+            <FontAwesomeIcon
+              icon={socialIcon(data.icon)}
+              className="h-12 w-12 flex-none rounded-full bg-gray-50 p-2"
+              style={{ height: 50, width: 50 }}
             />
           )}
           <div className="min-w-0 flex-auto">
@@ -43,10 +45,10 @@ export default function Item({ data }) {
             {data.socials &&
               data.socials.map((badge, key) => (
                 <dd key={key}>
-                  <SocialIcon
-                    network={badge.icon}
+                  <FontAwesomeIcon
+                    icon={socialIcon(badge.icon)}
                     label={badge.icon}
-                    className="h-6 w-6 rounded-full bg-gray-50 ring-2 ring-white"
+                    className="h-6 w-6 rounded-full bg-gray-50 ring-2 ring-white p-2"
                     style={{ height: 25, width: 25 }}
                   />
                 </dd>

src/components/list/Item.js

@@ -16,6 +16,14 @@
     "twitch": {
       "value": "twitch",
       "display": "Twitch"
+    },
+    "devto": {
+      "value": "devto",
+      "display": "Dev.to"
+    },
+    "hashnode": {
+      "value": "hashnode",
+      "display": "Hashnode"
     }
   },
   "reach": {

src/config/app.json

@@ -0,0 +1,30 @@
+import {
+  faDev,
+  faHashnode,
+  faTwitch,
+  faTwitter,
+  faYoutube,
+} from "@fortawesome/free-brands-svg-icons";
+import { faThumbsUp } from "@fortawesome/free-regular-svg-icons";
+
+export default function socialIcon(name) {
+  let icon = faThumbsUp;
+  switch (name) {
+    case "twitter":
+      icon = faTwitter;
+      break;
+    case "youtube":
+      icon = faYoutube;
+      break;
+    case "twitch":
+      icon = faTwitch;
+      break;
+    case "hashnode":
+      icon = faHashnode;
+      break;
+    case "devto":
+      icon = faDev;
+      break;
+  }
+  return icon;
+}