Fix to icons

navapbc · May 16, 2024 · 8ee191a · 8ee191a
1 parent ba7ae0e
commit 8ee191a
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 48 deletions.
diff --git a/frontend/src/components/USWDSIcon.tsx b/frontend/src/components/USWDSIcon.tsx
@@ -0,0 +1,17 @@
+import SpriteSVG from "public/uswds/img/sprite.svg";
+
+interface IconProps {
+  name: string;
+  className: string;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+const sprite_uri = SpriteSVG.src as string;
+
+export function USWDSIcon(props: IconProps) {
+  return (
+    <svg className={props.className} aria-hidden="true" role="img">
+      <use href={`${sprite_uri}#${props.name}`}></use>
+    </svg>
+  );
+}
diff --git a/frontend/src/components/content/ProcessMilestones.tsx b/frontend/src/components/content/ProcessMilestones.tsx
@@ -12,12 +12,7 @@ import {
   IconListItem,
   IconListTitle,
 } from "@trussworks/react-uswds";
-import Image from "next/image";
-import AssessmentSvg from "@uswds/uswds/src/img/usa-icons/assessment.svg";
-import ContentCopySvg from "@uswds/uswds/src/img/usa-icons/content_copy.svg";
-import LaunchSVG from "@uswds/uswds/src/img/usa-icons/launch.svg";
-import NavigationNextSVG from "@uswds/uswds/src/img/usa-icons/navigate_next.svg";
-import SearchSvg from "@uswds/uswds/src/img/usa-icons/search.svg";
+import { USWDSIcon } from "src/components/USWDSIcon";
 
 import ContentLayout from "src/components/ContentLayout";
 
@@ -30,32 +25,11 @@ const ProcessMilestones = () => {
   const getIcon = (iconIndex: number) => {
     switch (iconIndex) {
       case 0:
-        return (
-          <Image
-            alt="magnifying glass icon"
-            src={SearchSvg as string}
-            aria-hidden={true}
-            className="text-middle"
-          />
-        );
+        return <USWDSIcon className="usa-icon" name="search" />;
       case 1:
-        return (
-          <Image
-            src={AssessmentSvg as string}
-            aria-hidden={true}
-            className="text-middle"
-            alt="Icon that looks like graph"
-          />
-        );
+        return <USWDSIcon className="usa-icon" name="assessment" />;
       case 2:
-        return (
-          <Image
-            src={ContentCopySvg as string}
-            aria-hidden={true}
-            className="text-middle"
-            alt="Content copy icon"
-          />
-        );
+        return <USWDSIcon className="usa-icon" name="content_copy" />;
       default:
         return <></>;
     }
@@ -72,7 +46,7 @@ const ProcessMilestones = () => {
       >
         {keys.map((key, index) => {
           const title = t(`milestones.icon_list.${key}.title`);
-          const content = t.rich(`intro.boxes.${key}.content`, {
+          const content = t.rich(`milestones.icon_list.${key}.content`, {
             p: (chunks) => (
               <p className="font-sans-md line-height-sans-4 desktop-lg:line-height-sans-6">
                 {chunks}
@@ -90,15 +64,15 @@ const ProcessMilestones = () => {
                     <IconListTitle className="margin-bottom-2" type="h3">
                       {title}
                     </IconListTitle>
-                    {content}
+                    <p className="font-sans-md line-height-sans-4 desktop-lg:line-height-sans-6">
+                      {content}
+                    </p>
                     {
                       // Don't show the chevron in the last row item.
                       index < keys.length - 1 ? (
-                        <Image
-                          src={NavigationNextSVG as string}
-                          alt="chevron pointing right"
-                          className="display-none tablet-lg:display-block text-base-lighter position-absolute right-0 top-0 margin-right-neg-5"
-                          aria-label="launch"
+                        <USWDSIcon
+                          className="usa-icon usa-icon--size-9 display-none tablet-lg:display-block text-base-lighter position-absolute right-0 top-0 margin-right-neg-5"
+                          name="navigate_next"
                         />
                       ) : (
                         ""
@@ -116,7 +90,10 @@ const ProcessMilestones = () => {
           <>
             <small className="display-block font-sans-lg margin-bottom-105">
               {t("milestones.roadmap_1")}
-
+              <USWDSIcon
+                className="usa-icon usa-icon--size-4 text-middle text-base-light"
+                name="navigate_next"
+              />
               {t("milestones.title_1")}
             </small>
             {t("milestones.name_1")}
@@ -145,11 +122,9 @@ const ProcessMilestones = () => {
           <Link href={ExternalRoutes.MILESTONE_GET_OPPORTUNITIES} passHref>
             <Button className="margin-bottom-4" type="button" size="big">
               <span className="margin-right-5">{t("milestones.cta_1")}</span>
-              <Image
-                src={LaunchSVG as string}
-                alt="icon"
-                className="text-middle margin-left-neg-4"
-                aria-label="launch"
+              <USWDSIcon
+                name="launch"
+                className="usa-icon usa-icon--size-4 text-middle margin-left-neg-4"
               />
             </Button>
           </Link>
@@ -160,11 +135,9 @@ const ProcessMilestones = () => {
           <>
             <small className="display-block font-sans-lg margin-bottom-105">
               {t("milestones.roadmap_2")}
-              <Image
-                src={NavigationNextSVG as string}
-                alt="chevron pointing right"
-                className="text-middle text-base-light"
-                aria-label="launch"
+              <USWDSIcon
+                className="usa-icon usa-icon--size-4 text-middle text-base-light"
+                name="navigate_next"
               />
               {t("milestones.title_2")}
             </small>
@@ -188,6 +161,10 @@ const ProcessMilestones = () => {
           <Link href={ExternalRoutes.MILESTONE_SEARCH_MVP} passHref>
             <Button className="margin-bottom-4" type="button" size="big">
               <span className="margin-right-5">{t("milestones.cta_2")}</span>
+              <USWDSIcon
+                name="launch"
+                className="usa-icon usa-icon--size-4 text-middle margin-left-neg-4"
+              />
             </Button>
           </Link>
         </Grid>