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 = () => (
-
-
- } />
-
-
-);
+function App() {
+ library.add(fab, fas, far);
+ return (
+
+
+ } />
+
+
+ );
+}
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) {
)}
+ {icon && }
+
{displayName}
>
@@ -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()}
/>
)}
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,