From 67a63a0bbbeb0c6b205ad40f1200ebddde20b390 Mon Sep 17 00:00:00 2001 From: Carl Baker Date: Sat, 20 Jan 2024 12:33:10 -0700 Subject: [PATCH] layout.jsx - forces one-time early load of font-awesome css and prevents lazy load. This fixes display of over-sized icon before being re-rendered to correct size. Content.jsx - fixes developer console error that the font-awesome font could not be found. --- Sample-01/app/layout.jsx | 10 ++++++++++ Sample-01/components/Content.jsx | 6 ++++++ 2 files changed, 16 insertions(+) diff --git a/Sample-01/app/layout.jsx b/Sample-01/app/layout.jsx index 5fe40a8..717ed5a 100644 --- a/Sample-01/app/layout.jsx +++ b/Sample-01/app/layout.jsx @@ -7,6 +7,14 @@ import Footer from '../components/Footer'; import React from 'react'; import { UserProvider } from '@auth0/nextjs-auth0/client'; +import '@fortawesome/fontawesome-svg-core/styles.css'; + +// Force one-time early load of fontawesome and prevent lazy load +// Icons will no longer display large and then re-render to proper size +import { config } from '@fortawesome/fontawesome-svg-core'; + +config.autoAddCss = false; /* eslint-disable import/first */ + export default function RootLayout({ children }) { return ( @@ -20,6 +28,8 @@ export default function RootLayout({ children }) { + // Override the RootLayout component to make the authentication + // state available to all pages. Access by using useUser() hook.
diff --git a/Sample-01/components/Content.jsx b/Sample-01/components/Content.jsx index 35c369e..566ccbf 100644 --- a/Sample-01/components/Content.jsx +++ b/Sample-01/components/Content.jsx @@ -1,10 +1,16 @@ import React from 'react'; import { Row, Col } from 'reactstrap'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { library } from '@fortawesome/fontawesome-svg-core' +import { fas } from '@fortawesome/free-solid-svg-icons' import contentData from '../utils/contentData'; +// Without this, a not-found log to console occurs +library.add(fas); + const Content = () => ( +

What can I do next?