Move FA icons code into an utility file

src/pages/_app.tsx

@@ -1,27 +1,9 @@
-import {
-  config,
-  library,
-} from '@fortawesome/fontawesome-svg-core';
-import '@fortawesome/fontawesome-svg-core/styles.css';
-import { faGithub } from '@fortawesome/free-brands-svg-icons';
-import { faTimesCircle } from '@fortawesome/free-regular-svg-icons';
-import {
-  faArrowCircleLeft,
-  faArrowCircleRight,
-  faBook,
-  faBookReader,
-  faCoffee,
-  faHome,
-  faQuestionCircle,
-  faUserCog,
-} from '@fortawesome/free-solid-svg-icons';
 import 'animate.css/animate.min.css'; // Loads animate.css CSS file. See https://github.com/daneden/animate.css
 import 'bootstrap/dist/css/bootstrap.min.css'; // Loads bootstrap CSS file. See https://stackoverflow.com/a/50002905/2391795
 import 'cookieconsent/build/cookieconsent.min.css'; // Loads CookieConsent CSS file. See https://github.com/osano/cookieconsent
 import 'rc-tooltip/assets/bootstrap.css';
 import React from 'react';
 import { v1 as uuid } from 'uuid'; // XXX Use v1 for uniqueness - See https://www.sohamkamani.com/blog/2016/10/05/uuid1-vs-uuid4/
-
 import MultiversalAppBootstrap from '../components/appBootstrap/MultiversalAppBootstrap';
 import { MultiversalAppBootstrapProps } from '../types/nextjs/MultiversalAppBootstrapProps';
 import { NextWebVitalsMetrics } from '../types/nextjs/NextWebVitalsMetrics';
@@ -30,16 +12,9 @@ import { SSGPageProps } from '../types/pageProps/SSGPageProps';
 import { SSRPageProps } from '../types/pageProps/SSRPageProps';
 import { sendWebVitals } from '../utils/analytics/amplitude';
 import '../utils/app/ignoreNoisyWarningsHacks'; // HACK This ignore warnings and errors I personally find too noisy and useless
+import '../utils/icons/font-awesome';
 import '../utils/monitoring/sentry';
 
-// See https://github.com/FortAwesome/react-fontawesome#integrating-with-other-tools-and-frameworks
-config.autoAddCss = false; // Tell Font Awesome to skip adding the CSS automatically since it's being imported above
-library.add(
-  faGithub,
-  faArrowCircleLeft, faArrowCircleRight, faBook, faBookReader, faCoffee, faHome, faQuestionCircle, faUserCog,
-  faTimesCircle,
-);
-
 /**
  * WDYR (why-did-you-render) helps locate unnecessary re-renders and fix them
  * Applied in development environment, on the frontend only

src/utils/icons/font-awesome.ts

@@ -0,0 +1,55 @@
+import {
+  config,
+  library,
+} from '@fortawesome/fontawesome-svg-core';
+import '@fortawesome/fontawesome-svg-core/styles.css';
+import { faGithub } from '@fortawesome/free-brands-svg-icons';
+import { faTimesCircle } from '@fortawesome/free-regular-svg-icons';
+import {
+  faArrowCircleLeft,
+  faArrowCircleRight,
+  faBook,
+  faBookReader,
+  faCoffee,
+  faHome,
+  faQuestionCircle,
+  faUserCog,
+} from '@fortawesome/free-solid-svg-icons';
+
+// See https://github.com/FortAwesome/react-fontawesome#integrating-with-other-tools-and-frameworks
+config.autoAddCss = false; // Tell Font Awesome to skip adding the CSS automatically since it's being imported above
+
+/**
+ * Configure the Font-Awesome icons library by pre-registering icon definitions so that we do not have to explicitly pass them to render an icon.
+ * Necessary for proper server-side rendering of icons.
+ *
+ * XXX Since Next.js 10, it is possible to import CSS file outside of the _app.tsx file.
+ *  We leverage this new feature to configure our Font-Awesome icons outside of _app to avoid cluttering that file.
+ *
+ * @example <FontAwesomeIcon icon={['fas', 'home']} />
+ *
+ * @see https://fontawesome.com/how-to-use/javascript-api/methods/library-add
+ * @see https://nextjs.org/blog/next-10#importing-css-from-third-party-react-components
+ */
+
+// Import @fortawesome/free-brands-svg-icons
+library.add(
+  faGithub,
+);
+
+// Import @fortawesome/free-regular-svg-icons
+library.add(
+  faTimesCircle,
+);
+
+// Import @fortawesome/free-solid-svg-icons
+library.add(
+  faArrowCircleLeft,
+  faArrowCircleRight,
+  faBook,
+  faBookReader,
+  faCoffee,
+  faHome,
+  faQuestionCircle,
+  faUserCog,
+);