fix: update react-icons + migrate to Font Awesome 6 (#8995)

* update react-icons & migrate to Font Awesome 6 * make icon tests not use hard coded search counts * add alert message * fix: app alert to top of page --------- Co-authored-by: Eddie Jaoude <eddie@jaoudestudios.com>
EddieHubCommunity · Sep 13, 2023 · 5395e63 · 5395e63
1 parent 9fc5391
commit 5395e63
Show file tree

Hide file tree

Showing 17 changed files with 42 additions and 39 deletions.
diff --git a/components/Footer.js b/components/Footer.js
@@ -6,7 +6,7 @@ import {
   FaInstagram,
   FaTwitter,
   FaYoutube,
-} from "react-icons/fa";
+} from "react-icons/fa6";
 
 import RocketLaunchIcon from "@heroicons/react/20/solid/RocketLaunchIcon";
 import Link from "@components/Link";

diff --git a/components/Icon.js b/components/Icon.js
@@ -1,7 +1,7 @@
 import dynamic from "next/dynamic";
 
 function defaultIcon() {
-  return dynamic(() => import("react-icons/fa").then((mod) => mod.FaGlobe));
+  return dynamic(() => import("react-icons/fa6").then((mod) => mod.FaGlobe));
 }
 
 export default function getIcon(name = "FaGlobe") {
@@ -10,7 +10,7 @@ export default function getIcon(name = "FaGlobe") {
   switch (name.slice(0, 2)) {
     case "Fa":
       icon = dynamic(() =>
-        import("react-icons/fa").then((mod) => {
+        import("react-icons/fa6").then((mod) => {
           let node = mod[name];
           if (!node) node = defaultIcon();
           return node;

diff --git a/components/IconSearch.js b/components/IconSearch.js
@@ -1,6 +1,6 @@
 import { useState } from "react";
 import { Combobox } from "@headlessui/react";
-import * as FaIcons from "react-icons/fa";
+import * as FaIcons from "react-icons/fa6";
 import * as SiIcons from "react-icons/si";
 import getIcon from "./Icon";
 import Label from "./form/Label";

diff --git a/components/event/EventCard.js b/components/event/EventCard.js
@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { FaMicrophoneAlt, FaMapPin, FaExternalLinkAlt } from "react-icons/fa";
+import { FaMicrophoneLines, FaMapPin, FaUpRightFromSquare } from "react-icons/fa6";
 import {
   MdOutlineOnlinePrediction,
   MdOutlinePeople,
@@ -44,7 +44,7 @@ export default function EventCard({ manage, event, usernames }) {
             <MdOutlineOnlinePrediction title="Virtual event" />
           )}
           {event.isInPerson && <MdOutlinePeople title="In person event" />}
-          {event.date.cfpOpen && <FaMicrophoneAlt title="CFP is open" />}
+          {event.date.cfpOpen && <FaMicrophoneLines title="CFP is open" />}
           {event.price?.startingFrom > 0 && <TbCoin title="Paid event" />}
           {event.price?.startingFrom === 0 && <TbCoinOff title="Free event" />}
         </div>
@@ -62,7 +62,7 @@ export default function EventCard({ manage, event, usernames }) {
                       target="_blank"
                       aria-label={`Visit event ${event.name}`}
                     >
-                      <FaExternalLinkAlt />
+                      <FaUpRightFromSquare />
                     </Link>
                   )}
                 </div>

diff --git a/components/event/EventKey.js b/components/event/EventKey.js
@@ -1,5 +1,5 @@
 import { IconContext } from "react-icons";
-import { FaMicrophoneAlt } from "react-icons/fa";
+import { FaMicrophoneLines } from "react-icons/fa6";
 import { TbCoin, TbCoinOff } from "react-icons/tb";
 import {
   MdOutlineOnlinePrediction,
@@ -27,7 +27,7 @@ export default function EventKey({ categorizedEvents, onToggleEventType }) {
       title: "CFP open",
       description: "You can submit a talk to this conference",
       key: "cfpOpen",
-      icon: FaMicrophoneAlt,
+      icon: FaMicrophoneLines,
     },
     {
       title: "In person",

diff --git a/components/navbar/Navbar.js b/components/navbar/Navbar.js
@@ -8,7 +8,7 @@ import Link from "@components/Link";
 import { useTheme } from "next-themes";
 import { classNames } from "@services/utils/classNames";
 
-import { FaGithub } from "react-icons/fa";
+import { FaGithub } from "react-icons/fa6";
 import SunIcon from "@heroicons/react/20/solid/SunIcon";
 import MoonIcon from "@heroicons/react/20/solid/MoonIcon";
 import { BASE_GITHUB_PROJECT_URL } from "@constants/index";

diff --git a/components/user/UserMilestone.js b/components/user/UserMilestone.js
@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { FaExternalLinkAlt } from "react-icons/fa";
+import { FaUpRightFromSquare } from "react-icons/fa6";
 import { classNames } from "@services/utils/classNames";
 
 import getIcon from "@components/Icon";
@@ -48,7 +48,7 @@ export default function UserMilestone({ milestone, isGoal, manage }) {
                   aria-label="Milestone Related Link"
                   target="_blank"
                 >
-                  <FaExternalLinkAlt />
+                  <FaUpRightFromSquare />
                 </Link>
               )}
             </p>

diff --git a/components/user/UserProfile.js b/components/user/UserProfile.js
@@ -1,5 +1,5 @@
 import React, { useRef, useState } from "react";
-import { FaShare } from "react-icons/fa";
+import { FaShare } from "react-icons/fa6";
 import { QRCodeCanvas } from "qrcode.react";
 import { saveAs } from "file-saver";
 import { useRouter } from "next/router";

diff --git a/config/app.json b/config/app.json
@@ -1,11 +1,12 @@
 {
   "version": "2.18.0",
-  "alerts": [],
-  "layouts": [
-    "classic",
-    "inline",
-    "column-2"
+  "alerts": [
+    {
+      "type": "info",
+      "message": "The 'Font Awesome' library has been updated to v6. Some icons have been renamed or changed appearance. Check https://www.biodrop.io/icons for all available icons and update your Profile Links from the Manage Profile section."
+    }
   ],
+  "layouts": ["classic", "inline", "column-2"],
   "animations": {
     "none": "No Animation",
     "pulse": "Pulse",

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -33,7 +33,7 @@
     "react": "^18.2.0",
     "react-children-utilities": "^2.9.0",
     "react-dom": "^18.2.0",
-    "react-icons": "^4.10.1",
+    "react-icons": "^4.11.0",
     "react-leaflet": "^4.2.1",
     "react-markdown": "^8.0.7",
     "react-sortablejs": "^6.1.4",

diff --git a/pages/[username].js b/pages/[username].js
@@ -1,5 +1,5 @@
 import { IconContext } from "react-icons";
-import { FaRegComments } from "react-icons/fa";
+import { FaRegComments } from "react-icons/fa6";
 import { remark } from "remark";
 import strip from "strip-markdown";
 import requestIp from "request-ip";

diff --git a/pages/account/statistics.js b/pages/account/statistics.js
@@ -3,7 +3,7 @@ import { getServerSession } from "next-auth/next";
 import dynamic from "next/dynamic";
 import { useRouter } from "next/router";
 import { useSession } from "next-auth/react";
-import { FaMapPin, FaMousePointer } from "react-icons/fa";
+import { FaMapPin, FaMousePointer } from "react-icons/fa6";
 
 import ProgressBar from "@components/statistics/ProgressBar";
 import { getUserApi } from "../api/profiles/[username]";

diff --git a/pages/events.js b/pages/events.js
@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { FaListUl, FaMicrophoneAlt } from "react-icons/fa";
+import { FaListUl, FaMicrophoneLines } from "react-icons/fa6";
 import { MdOutlineOnlinePrediction, MdOutlinePeople } from "react-icons/md";
 import { TbCoin, TbCoinOff } from "react-icons/tb";
 
@@ -41,7 +41,7 @@ export default function Events({ events }) {
       title: "CFP open",
       description: "You can submit a talk to this conference",
       key: "cfpOpen",
-      icon: FaMicrophoneAlt,
+      icon: FaMicrophoneLines,
       total: categorizedEvents.cfpOpen.length,
     },
     {

diff --git a/pages/icons.js b/pages/icons.js
@@ -1,5 +1,5 @@
 import { useState } from "react";
-import * as FaIcons from "react-icons/fa";
+import * as FaIcons from "react-icons/fa6";
 import * as SiIcons from "react-icons/si";
 
 import Alert from "@components/Alert";

diff --git a/pages/index.js b/pages/index.js
@@ -20,7 +20,7 @@ import ThemedImage from "@components/ThemedImage";
 import { serverEnv } from "@config/schemas/serverSchema";
 import { BASE_GITHUB_PROJECT_URL, PROJECT_NAME } from "@constants/index";
 import Button from "@components/Button";
-import { FaDollarSign, FaGithub, FaLock } from "react-icons/fa";
+import { FaDollarSign, FaGithub, FaLock } from "react-icons/fa6";
 
 export async function getStaticProps() {
   const pageConfig = config.isr.homepage;
@@ -199,6 +199,10 @@ export default function Home({
     <>
       <PageHead />
 
+      {alerts.map((alert, index) => (
+        <Alert key={index} type={alert.type} message={alert.message} />
+      ))}
+
       <div className="bg-primary-low dark:bg-dark-2">
         <div className="px-6 py-12 sm:px-6 sm:py-24 lg:px-8">
           <div className="mx-auto max-w-2xl text-center">
@@ -240,10 +244,6 @@ export default function Home({
       </div>
 
       <div className="bg-primary-low dark:drop-shadow-none dark:bg-dark-2 mb-8 p-8 drop-shadow-md">
-        {alerts.map((alert, index) => (
-          <Alert key={index} type={alert.type} message={alert.message} />
-        ))}
-
         <BasicCards
           data={[
             {

diff --git a/tests/icon.spec.js b/tests/icon.spec.js
@@ -18,8 +18,9 @@ test("Icon search works correctly", async ({ page }) => {
   // 3. type in search and check that icons with the name exist and check a name doesn't exist
   const input = page.locator("[name='keyword']");
   await input.type("mobile");
+  const results = await page.locator("main ul li").count();
 
-  await expect(page.locator("main ul li")).toHaveCount(defaultIcons);
+  await expect(results).toBeGreaterThanOrEqual(defaultIcons);
 });
 
 test("Icon search page has default results when no search term used", async ({
@@ -51,7 +52,8 @@ test("Icon search page shows results after typing 3 characters", async ({
 
   const input = page.locator("[name='keyword']");
   await input.type("hand");
+  const results = await page.locator("main ul li").count();
 
   await expect(page.locator("main ul li")).toContainText(["hand"]);
-  await expect(page.locator("main ul li")).toHaveCount(41);
+  await expect(results).toBeGreaterThanOrEqual(defaultIcons);
 });