From a8402f791f438da4a80b0210c1aedc1185fad07f Mon Sep 17 00:00:00 2001
From: Choubakawa <Choubakawa@users.noreply.github.com>
Date: Thu, 9 Dec 2021 21:27:13 +0100
Subject: [PATCH] feat(button): Add Custom Icons for Custom Buttons (#62)

---
 .env.example                    |  3 ++-
 README.md                       |  1 +
 package.json                    |  5 +++++
 src/components/App/App.js       | 21 ++++++++++++++-------
 src/components/Button/Button.js |  6 +++++-
 src/components/Home/Home.js     |  5 +++++
 src/config.js                   |  4 ++++
 7 files changed, 36 insertions(+), 9 deletions(-)

diff --git a/.env.example b/.env.example
index 024ee620..27d1411e 100644
--- a/.env.example
+++ b/.env.example
@@ -32,4 +32,5 @@ RAZZLE_CUSTOM_BUTTON_URL=https://technotim.live,https://www.youtube.com/channel/
 RAZZLE_CUSTOM_BUTTON_COLOR=#ED2756,#0085FF
 RAZZLE_CUSTOM_BUTTON_TEXT_COLOR=#ffffff,#ffffff
 RAZZLE_CUSTOM_BUTTON_ALT_TEXT=Visit my site!,Visit my OTHER Site!
-RAZZLE_CUSTOM_BUTTON_NAME=HOMEPAGE,HOMEPAGE2
\ No newline at end of file
+RAZZLE_CUSTOM_BUTTON_NAME=HOMEPAGE,HOMEPAGE2
+RAZZLE_CUSTOM_BUTTON_NAME=fas link,fab youtube
\ No newline at end of file
diff --git a/README.md b/README.md
index 4c9f63f8..c7759a97 100644
--- a/README.md
+++ b/README.md
@@ -140,6 +140,7 @@ services:
       - CUSTOM_BUTTON_TEXT_COLOR=#ffffff,#ffffff
       - CUSTOM_BUTTON_ALT_TEXT=Visit my site!,Visit my OTHER Site!
       - CUSTOM_BUTTON_NAME=HOMEPAGE,HOMEPAGE2
+      - CUSTOM_BUTTON_NAME=fas link,fab youtube
       - STACKOVERFLOW=https://stackoverflow.com/
     ports:
       - 8080:3000
diff --git a/package.json b/package.json
index 57728d90..153b7911 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,11 @@
     "lint:markdown": "markdownlint .github/*.md && markdownlint README.md"
   },
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^1.2.36",
+    "@fortawesome/free-brands-svg-icons": "^5.15.4",
+    "@fortawesome/free-regular-svg-icons": "^5.15.4",
+    "@fortawesome/free-solid-svg-icons": "^5.15.4",
+    "@fortawesome/react-fontawesome": "^0.1.16",
     "compression": "^1.7.4",
     "express": "^4.17.1",
     "morgan": "^1.10.0",
diff --git a/src/components/App/App.js b/src/components/App/App.js
index b68d5d0e..ccae3f8f 100644
--- a/src/components/App/App.js
+++ b/src/components/App/App.js
@@ -1,13 +1,20 @@
 import React from 'react';
 import { Route, Routes } from 'react-router-dom';
 import Home from '../Home/Home';
+import { library } from '@fortawesome/fontawesome-svg-core';
+import { fab } from '@fortawesome/free-brands-svg-icons';
+import { fas } from '@fortawesome/free-solid-svg-icons';
+import { far } from '@fortawesome/free-regular-svg-icons';
 
-const App = () => (
-  <div className="container">
-    <Routes>
-      <Route exact path="/" element={<Home />} />
-    </Routes>
-  </div>
-);
+function App() {
+  library.add(fab, fas, far);
+  return (
+    <div className="container">
+      <Routes>
+        <Route exact path="/" element={<Home />} />
+      </Routes>
+    </div>
+  );
+}
 
 export default App;
diff --git a/src/components/Button/Button.js b/src/components/Button/Button.js
index c871c60c..d8182a4f 100644
--- a/src/components/Button/Button.js
+++ b/src/components/Button/Button.js
@@ -3,9 +3,10 @@ import { string, number, object } from 'prop-types';
 import { trackGoogleEvent } from '../../analytics/google';
 import { runtimeConfig } from '../../config';
 import { trackUmamiEvent } from '../../analytics/umami';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
 function Button(props) {
-  const { name, href, displayName, logo, styles, alt } = props;
+  const { name, href, displayName, logo, styles, alt, icon } = props;
 
   const handleClick = () => {
     const eventName = `${name}-button`;
@@ -33,6 +34,8 @@ function Button(props) {
           <img className="icon" src={logo} alt={`${displayName} logo`} />
         )}
 
+        {icon && <FontAwesomeIcon className="icon" icon={icon.split(' ')} />}
+
         {displayName}
       </a>
     </>
@@ -49,5 +52,6 @@ Button.propType = {
   name: string.isRequired,
   order: number.isRequired,
   logo: string,
+  icon: string,
   styles: object,
 };
diff --git a/src/components/Home/Home.js b/src/components/Home/Home.js
index 286a8ae0..aa18fe24 100644
--- a/src/components/Home/Home.js
+++ b/src/components/Home/Home.js
@@ -61,6 +61,10 @@ function Home(props) {
     const texts = runtimeConfig.CUSTOM_BUTTON_TEXT?.split(',');
     const buttonColors = runtimeConfig.CUSTOM_BUTTON_COLOR?.split(',');
     const textColors = runtimeConfig.CUSTOM_BUTTON_TEXT_COLOR?.split(',');
+    let icons = runtimeConfig.CUSTOM_BUTTON_ICON?.split(',');
+    if (!icons) {
+      icons = [];
+    }
     // have to clean up some of the strings to standardize for analytics
 
     return texts.map((t, i) => {
@@ -88,6 +92,7 @@ function Home(props) {
                   color: textColors[i]?.trim(),
                 }}
                 alt={altTexts[i]?.trim()}
+                icon={icons[i]?.trim()}
               />
             )}
         </div>
diff --git a/src/config.js b/src/config.js
index 36d0eb6c..ea9d43b7 100644
--- a/src/config.js
+++ b/src/config.js
@@ -69,6 +69,7 @@ export const runtimeConfig =
         CUSTOM_BUTTON_TEXT_COLOR: window?.env?.CUSTOM_BUTTON_TEXT_COLOR,
         CUSTOM_BUTTON_ALT_TEXT: window?.env?.CUSTOM_BUTTON_ALT_TEXT,
         CUSTOM_BUTTON_NAME: window?.env?.CUSTOM_BUTTON_NAME,
+        CUSTOM_BUTTON_ICON: window?.env?.CUSTOM_BUTTON_ICON,
         STACKOVERFLOW: window?.env?.STACKOVERFLOW,
       }
     : {
@@ -244,6 +245,9 @@ export const runtimeConfig =
         CUSTOM_BUTTON_NAME: nodeIsProduction
           ? process.env.CUSTOM_BUTTON_NAME
           : process.env.RAZZLE_CUSTOM_BUTTON_NAME,
+        CUSTOM_BUTTON_ICON: nodeIsProduction
+          ? process.env.CUSTOM_BUTTON_ICON
+          : process.env.RAZZLE_CUSTOM_BUTTON_ICON,
         STACKOVERFLOW: nodeIsProduction
           ? process.env.STACKOVERFLOW
           : process.env.RAZZLE_STACKOVERFLOW,