feat(button): Add Custom Icons for Custom Buttons (#62)

.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
+RAZZLE_CUSTOM_BUTTON_NAME=HOMEPAGE,HOMEPAGE2
+RAZZLE_CUSTOM_BUTTON_NAME=fas link,fab youtube

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

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",

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;

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,
 };

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>

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,