add optional color to icon only links

README.md

@@ -117,12 +117,18 @@ simple-links | Type error: Property 'theme' does not exist on type '{ name: stri
   // Icon only links
   "socialLinks": [
     {
-      "icon": "fab fa-github", // The icon to show
-      "url": "https://git.fascinated.cc" // Where the link goes to
+      "icon": "fab fa-twitter", // The icon to use
+      "color": "#1DA1F2", // An optional color
+      "url": "https://twitter.com" // The link to go to
     },
     {
       "icon": "fab fa-reddit",
+      "color": "#FF4300",
       "url": "https://www.reddit.com/user/ImFascinatedMC"
+    },
+    {
+      "icon": "fab fa-git-alt",
+      "url": "https://git.fascinated.cc"
     }
   ]
 }

config.json

@@ -57,12 +57,18 @@
   ],
   "socialLinks": [
     {
-      "icon": "fab fa-github",
-      "url": "https://git.fascinated.cc"
+      "icon": "fab fa-twitter",
+      "color": "#1DA1F2",
+      "url": "https://twitter.com"
     },
     {
       "icon": "fab fa-reddit",
+      "color": "#FF4300",
       "url": "https://www.reddit.com/user/ImFascinatedMC"
+    },
+    {
+      "icon": "fab fa-git-alt",
+      "url": "https://git.fascinated.cc"
     }
   ]
 }

src/app/page.tsx

@@ -123,9 +123,15 @@ export default function Home() {
                       href={link.url}
                       target="_blank"
                       rel="noopener noreferrer"
-                      className={`hover:brightness-75 transition`}
+                      className="hover:brightness-75 transition"
                     >
-                      {link.icon && <FontAwesomeIcon size="2xl" icon={icons} />}
+                      {link.icon && (
+                        <FontAwesomeIcon
+                          color={link.color && link.color}
+                          size="2xl"
+                          icon={icons}
+                        />
+                      )}
                     </a>
                   );
                 })}