chore(website): Do not lazy load icons through next/head

mlaursen · mlaursen · commit 47ccc1dc8df2 · 2022-03-09T17:24:45.000-07:00
diff --git a/packages/documentation/src/components/Demos/DemoPage.tsx b/packages/documentation/src/components/Demos/DemoPage.tsx
@@ -1,7 +1,7 @@
 import type { ReactElement } from "react";
+import { useEffect } from "react";
 import cn from "classnames";
 import { defaults } from "lodash";
-import Head from "next/head";
 
 import { toId } from "utils/toTitle";
 
@@ -45,22 +45,40 @@ export default function DemoPage(props: DemoPageProps): ReactElement {
     className,
     fonts = EMPTY_LIST,
   } = props;
+  useEffect(() => {
+    const head = document.querySelector("head");
+    if (!head || !fonts.length) {
+      return;
+    }
+
+    const links: HTMLLinkElement[] = [];
+    fonts.forEach((font) => {
+      let href: string;
+      if (font === "Font Awesome") {
+        href =
+          "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css";
+      } else {
+        const name = font.replace(/\s+/g, "+");
+        href = `https://fonts.googleapis.com/css2?family=${name}&display=swap`;
+      }
+      const link = document.createElement("link");
+
+      link.rel = "stylesheet";
+      link.href = href;
+
+      head.appendChild(link);
+      links.push(link);
+    });
+
+    return () => {
+      links.forEach((link) => {
+        head.removeChild(link);
+      });
+    };
+  }, [fonts]);
+
   return (
     <div id="demo-page-container" className={cn(styles.container, className)}>
-      <Head>
-        {fonts.map((font) => {
-          let href: string;
-          if (font === "Font Awesome") {
-            href =
-              "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css";
-          } else {
-            const name = font.replace(/\s+/g, "+");
-            href = `https://fonts.googleapis.com/css2?family=${name}&display=swap`;
-          }
-
-          return <link key={font} rel="stylesheet" href={href} />;
-        })}
-      </Head>
       <DemoPageHeader packageName={packageName}>{description}</DemoPageHeader>
       {demos.map((demo, index) => (
         // eslint-disable-next-line react/jsx-key
