refactor: add package for icons

app/components/SocialIcon.tsx

@@ -1,13 +0,0 @@
-export type SocialIconProps = {
-  href: string;
-  alt: string;
-  src: string;
-};
-
-export function SocialIcon({ href, alt, src }: SocialIconProps) {
-  return (
-    <a href={href} className={"p-2"}>
-      <img alt={alt} src={src} className={"max-h-[5vh] max-w-[5vw]"} />
-    </a>
-  );
-}

app/routes/index.tsx

@@ -1,42 +1,14 @@
-import { SocialIcon, SocialIconProps } from "~/components/SocialIcon";
-
-const socials: SocialIconProps[] = [
-  {
-    href: "https://t.me/nullndr",
-    alt: "Telegram",
-    src: "/assets/telegram.png",
-  },
-  {
-    href: "https://gitlab.com/nullndr",
-    alt: "GitLab",
-    src: "/assets/gitlab.png",
-  },
-  {
-    href: "https://github.com/nullndr",
-    alt: "GitHub",
-    src: "/assets/github.png",
-  },
-  {
-    href: "https://twitter.com/nullndr",
-    alt: "Twitter",
-    src: "/assets/twitter.png",
-  },
-  {
-    href: "mailto: andrea@yaaaw.it",
-    alt: "Email",
-    src: "/assets/email.png",
-  },
-  {
-    href: "https://www.linkedin.com/in/nullndr/",
-    alt: "Linkedin",
-    src: "/assets/linkedin.png",
-  },
-  {
-    href: "/assets/pgpkey.pub",
-    alt: "GPG key",
-    src: "/assets/key.png",
-  },
-];
+import { IconContext } from "react-icons";
+import {
+  FaGithub,
+  FaGitlab,
+  FaKey,
+  FaLinkedin,
+  FaMastodon,
+  FaTelegramPlane,
+  FaTwitter,
+} from "react-icons/fa";
+import { MdEmail } from "react-icons/md";
 
 export default function Index() {
   return (
@@ -49,14 +21,37 @@ export default function Index() {
       </div>
       <div>
         <nav className={"flex justify-center flex-wrap"}>
-          {socials.map((social) => (
-            <SocialIcon
-              href={social.href}
-              alt={social.alt}
-              src={social.src}
-              key={social.href}
-            />
-          ))}
+          <IconContext.Provider
+            value={{
+              color: "yellow",
+              size: "3em",
+            }}
+          >
+            <a rel="me" href="https://mastodon.uno/@nullndr" className="p-2">
+              <FaMastodon />
+            </a>
+            <a href="https://t.me/nullndr" className="p-2">
+              <FaTelegramPlane />
+            </a>
+            <a href="https://gitlab.com/nullndr" className="p-2">
+              <FaGitlab />
+            </a>
+            <a href="https://github.com/nullndr" className="p-2">
+              <FaGithub />
+            </a>
+            <a href="https://twitter.com/nullndr" className="p-2">
+              <FaTwitter />
+            </a>
+            <a href="mailto: nullndr@duck.com" className="p-2">
+              <MdEmail />
+            </a>
+            <a href="https://linkedin.com/in/nullndr" className="p-2">
+              <FaLinkedin />
+            </a>
+            <a href="/assets/pgpkey.pub" className="p-2">
+              <FaKey />
+            </a>
+          </IconContext.Provider>
         </nav>
       </div>
     </div>

package-lock.json

@@ -10,7 +10,8 @@
         "@remix-run/react": "^1.6.7",
         "@remix-run/serve": "^1.6.3",
         "react": "^18.2.0",
-        "react-dom": "^18.2.0"
+        "react-dom": "^18.2.0",
+        "react-icons": "^4.6.0"
       },
       "devDependencies": {
         "@remix-run/dev": "^1.6.3",
@@ -10762,6 +10763,14 @@
         "react": "^18.2.0"
       }
     },
+    "node_modules/react-icons": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.6.0.tgz",
+      "integrity": "sha512-rR/L9m9340yO8yv1QT1QurxWQvWpbNHqVX0fzMln2HEb9TEIrQRGsqiNFQfiv9/JEUbyHmHPlNTB2LWm2Ttz0g==",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@@ -21217,6 +21226,12 @@
         "scheduler": "^0.23.0"
       }
     },
+    "react-icons": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.6.0.tgz",
+      "integrity": "sha512-rR/L9m9340yO8yv1QT1QurxWQvWpbNHqVX0fzMln2HEb9TEIrQRGsqiNFQfiv9/JEUbyHmHPlNTB2LWm2Ttz0g==",
+      "requires": {}
+    },
     "react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",

package.json

@@ -17,7 +17,8 @@
     "@remix-run/react": "^1.6.7",
     "@remix-run/serve": "^1.6.3",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-icons": "^4.6.0"
   },
   "devDependencies": {
     "@remix-run/dev": "^1.6.3",