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_ICON=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_ICON=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,

yarn.lock

@@ -1023,6 +1023,46 @@
     minimatch "^3.0.4"
     strip-json-comments "^3.1.1"
 
+"@fortawesome/fontawesome-common-types@^0.2.36":
+  version "0.2.36"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.36.tgz#b44e52db3b6b20523e0c57ef8c42d315532cb903"
+  integrity sha512-a/7BiSgobHAgBWeN7N0w+lAhInrGxksn13uK7231n2m8EDPE3BMCl9NZLTGrj9ZXfCmC6LM0QLqXidIizVQ6yg==
+
+"@fortawesome/fontawesome-svg-core@^1.2.36":
+  version "1.2.36"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.36.tgz#4f2ea6f778298e0c47c6524ce2e7fd58eb6930e3"
+  integrity sha512-YUcsLQKYb6DmaJjIHdDWpBIGCcyE/W+p/LMGvjQem55Mm2XWVAP5kWTMKWLv9lwpCVjpLxPyOMOyUocP1GxrtA==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "^0.2.36"
+
+"@fortawesome/free-brands-svg-icons@^5.15.4":
+  version "5.15.4"
+  resolved "https://registry.yarnpkg.com/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-5.15.4.tgz#ec8a44dd383bcdd58aa7d1c96f38251e6fec9733"
+  integrity sha512-f1witbwycL9cTENJegcmcZRYyawAFbm8+c6IirLmwbbpqz46wyjbQYLuxOc7weXFXfB7QR8/Vd2u5R3q6JYD9g==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "^0.2.36"
+
+"@fortawesome/free-regular-svg-icons@^5.15.4":
+  version "5.15.4"
+  resolved "https://registry.yarnpkg.com/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-5.15.4.tgz#b97edab436954333bbeac09cfc40c6a951081a02"
+  integrity sha512-9VNNnU3CXHy9XednJ3wzQp6SwNwT3XaM26oS4Rp391GsxVYA+0oDR2J194YCIWf7jNRCYKjUCOduxdceLrx+xw==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "^0.2.36"
+
+"@fortawesome/free-solid-svg-icons@^5.15.4":
+  version "5.15.4"
+  resolved "https://registry.yarnpkg.com/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.15.4.tgz#2a68f3fc3ddda12e52645654142b9e4e8fbb6cc5"
+  integrity sha512-JLmQfz6tdtwxoihXLg6lT78BorrFyCf59SAwBM6qV/0zXyVeDygJVb3fk+j5Qat+Yvcxp1buLTY5iDh1ZSAQ8w==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "^0.2.36"
+
+"@fortawesome/react-fontawesome@^0.1.16":
+  version "0.1.16"
+  resolved "https://registry.yarnpkg.com/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.16.tgz#ce7665490214e20f929368d6b65f68884a99276a"
+  integrity sha512-aLmzDwC9rEOAJv2UJdMns89VZR5Ry4IHu5dQQh24Z/lWKEm44lfQr1UNalZlkUaQN8d155tNh+CS7ntntj1VMA==
+  dependencies:
+    prop-types "^15.7.2"
+
 "@gar/promisify@^1.0.1":
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/@gar/promisify/-/promisify-1.1.2.tgz#30aa825f11d438671d585bd44e7fd564535fc210"