38 Icon Library

package.json

@@ -24,6 +24,9 @@
     "@capacitor/haptics": "6.0.0",
     "@capacitor/keyboard": "6.0.1",
     "@capacitor/status-bar": "6.0.0",
+    "@fortawesome/fontawesome-svg-core": "6.6.0",
+    "@fortawesome/free-solid-svg-icons": "6.6.0",
+    "@fortawesome/react-fontawesome": "0.2.2",
     "@ionic/react": "8.2.6",
     "@ionic/react-router": "8.2.6",
     "@tanstack/react-query": "5.51.23",
@@ -34,7 +37,6 @@
     "classnames": "2.5.1",
     "dayjs": "1.11.12",
     "formik": "2.4.6",
-    "ionicons": "7.4.0",
     "lodash": "4.17.21",
     "react": "18.3.1",
     "react-dom": "18.3.1",

src/common/components/Card/EmptyCard.tsx

@@ -1,6 +1,5 @@
-import { informationCircle } from 'ionicons/icons';
-
 import MessageCard, { MessageCardProps } from './MessageCard';
+import { IconName } from '../Icon/Icon';
 
 /**
  * Properties for the `EmptyCard` component.
@@ -16,7 +15,7 @@ interface EmptyCardProps extends MessageCardProps {}
  * @returns JSX
  */
 const EmptyCard = ({
-  icon = informationCircle,
+  icon = IconName.CircleInfo,
   testid = 'card-empty',
   title = 'No data',
   ...cardProps

src/common/components/Card/ErrorCard.tsx

@@ -1,6 +1,5 @@
-import { warning } from 'ionicons/icons';
-
 import MessageCard, { MessageCardProps } from './MessageCard';
+import { IconName } from '../Icon/Icon';
 
 /**
  * Properties for the `ErrorCard` component.
@@ -16,7 +15,7 @@ interface ErrorCardProps extends MessageCardProps {}
  */
 const ErrorCard = ({
   color = 'danger',
-  icon = warning,
+  icon = IconName.TriangleExclamation,
   testid = 'card-error',
   title = 'Uh oh',
   ...cardProps

src/common/components/Card/MessageCard.scss

@@ -5,7 +5,7 @@
     align-items: center;
 
     .icon {
-      font-size: 1.5rem;
+      font-size: 1.25rem;
       margin-right: 0.5rem;
     }
   }

src/common/components/Card/MessageCard.tsx

@@ -4,13 +4,13 @@ import {
   IonCardHeader,
   IonCardSubtitle,
   IonCardTitle,
-  IonIcon,
 } from '@ionic/react';
 import { ComponentPropsWithoutRef, ReactNode } from 'react';
 import classNames from 'classnames';
 
 import './MessageCard.scss';
 import { BaseComponentProps } from '../types';
+import Icon, { IconProps } from '../Icon/Icon';
 
 /**
  * Properties for the `MessageCard` component.
@@ -24,7 +24,7 @@ import { BaseComponentProps } from '../types';
 export interface MessageCardProps
   extends BaseComponentProps,
     Pick<ComponentPropsWithoutRef<typeof IonCard>, 'color'>,
-    Pick<ComponentPropsWithoutRef<typeof IonIcon>, 'icon'> {
+    Partial<Pick<IconProps, 'icon'>> {
   content?: ReactNode;
   subtitle?: ReactNode;
   title?: ReactNode;
@@ -52,9 +52,7 @@ const MessageCard = ({
       {title && (
         <IonCardHeader className="header">
           <IonCardTitle className="title-block">
-            {icon && (
-              <IonIcon icon={icon} className="icon" data-testid={`${testid}-icon`}></IonIcon>
-            )}
+            {icon && <Icon icon={icon} data-testid={`${testid}-icon`} />}
             <div className="title" data-testid={`${testid}-title`}>
               {title}
             </div>

src/common/components/Content/PageHeader.scss

@@ -11,4 +11,13 @@
   .title {
     font-size: 2rem;
   }
+
+  ion-buttons {
+    ion-button {
+      height: 3rem;
+      width: 3rem;
+
+      margin: 0;
+    }
+  }
 }

src/common/components/Content/PageHeader.tsx

@@ -29,7 +29,7 @@ interface PageHeaderProps extends BaseComponentProps {
  *   buttons={
  *     <>
  *       <IonButton>
- *         <IonIcon slot="icon-only" icon={add} />
+ *         <Icon icon={IconName.Users} />
  *       </IonButton>
  *     </>
  *   }

src/common/components/Header/Header.scss

@@ -16,4 +16,13 @@
       font-size: 1rem;
     }
   }
+
+  ion-buttons[slot='end'] {
+    ion-button {
+      height: 3rem;
+      width: 3rem;
+
+      margin: 0;
+    }
+  }
 }

src/common/components/Icon/Icon.tsx

@@ -0,0 +1,94 @@
+import { ComponentPropsWithoutRef } from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { IconProp } from '@fortawesome/fontawesome-svg-core';
+import {
+  faBuilding,
+  faCircleInfo,
+  faEnvelope,
+  faHouse,
+  faLink,
+  faMapLocationDot,
+  faPenToSquare,
+  faPhone,
+  faSignOutAlt,
+  faTrash,
+  faTriangleExclamation,
+  faUser,
+  faUserGear,
+  faUsers,
+} from '@fortawesome/free-solid-svg-icons';
+import classNames from 'classnames';
+
+import { BaseComponentProps } from '../types';
+
+/**
+ * Properties for the `Icon` component.
+ * @see {@link BaseComponentProps}
+ * @see {@link FontAwesomeIcon}
+ */
+export interface IconProps
+  extends BaseComponentProps,
+    Omit<ComponentPropsWithoutRef<typeof FontAwesomeIcon>, 'icon'> {
+  icon: IconName;
+}
+
+/**
+ * Icon names.
+ */
+export enum IconName {
+  Building = 'building',
+  CircleInfo = 'circle_info',
+  Envelope = 'envelope',
+  House = 'house',
+  Link = 'link',
+  MapLocationDot = 'map_location_dot',
+  PenToSquare = 'pen_to_square',
+  Phone = 'phone',
+  SignOut = 'sign_out',
+  Trash = 'trash',
+  TriangleExclamation = 'triangle_exclamation',
+  User = 'user',
+  Users = 'users',
+  UserGear = 'user_gear',
+}
+
+/**
+ * A key/value mapping of every icon used in the application.
+ */
+const icons: Record<IconName, IconProp> = {
+  building: faBuilding,
+  circle_info: faCircleInfo,
+  envelope: faEnvelope,
+  house: faHouse,
+  link: faLink,
+  map_location_dot: faMapLocationDot,
+  pen_to_square: faPenToSquare,
+  phone: faPhone,
+  sign_out: faSignOutAlt,
+  trash: faTrash,
+  triangle_exclamation: faTriangleExclamation,
+  user_gear: faUserGear,
+  user: faUser,
+  users: faUsers,
+};
+
+/**
+ * The `Icon` component renders an icon. Wraps the `FontAwesomeIcon` component.
+ *
+ * @param {IconProps} props - Component properties.
+ * @returns {JSX.Element} JSX
+ * @see {@link FontAwesomeIcon}
+ */
+const Icon = ({ className, icon, testid = 'icon', ...iconProps }: IconProps): JSX.Element => {
+  const faIcon = icons[icon];
+  return (
+    <FontAwesomeIcon
+      className={classNames('icon', className)}
+      icon={faIcon}
+      {...iconProps}
+      data-testid={testid}
+    />
+  );
+};
+
+export default Icon;

src/common/components/Icon/__tests__/Icon.test.tsx

@@ -0,0 +1,16 @@
+import { describe, expect, it } from 'vitest';
+
+import { render, screen } from 'test/test-utils';
+
+import Icon, { IconName } from '../Icon';
+
+describe('Icon', () => {
+  it('should render successfully', async () => {
+    // ARRANGE
+    render(<Icon icon={IconName.Building} />);
+    await screen.findByTestId('icon');
+
+    // ASSERT
+    expect(screen.getByTestId('icon')).toBeDefined();
+  });
+});

src/common/components/Menu/AppMenu.scss

@@ -28,5 +28,7 @@
 
   .icon {
     margin-right: 1rem;
+
+    opacity: 0.5;
   }
 }

src/common/components/Menu/AppMenu.tsx

@@ -1,7 +1,6 @@
 import {
   IonContent,
   IonHeader,
-  IonIcon,
   IonItem,
   IonLabel,
   IonMenu,
@@ -10,14 +9,14 @@ import {
   IonTitle,
   IonToolbar,
 } from '@ionic/react';
-import { home, logOut, people, personCircle } from 'ionicons/icons';
 import classNames from 'classnames';
 
 import './AppMenu.scss';
 import { BaseComponentProps } from '../types';
 import { useAuth } from 'common/hooks/useAuth';
 import { useGetCurrentUser } from 'common/api/useGetCurrentUser';
 import Avatar from '../Icon/Avatar';
+import Icon, { IconName } from '../Icon/Icon';
 
 /**
  * Properties for the `AppMenu` component.
@@ -64,13 +63,13 @@ const AppMenu = ({ className, testid = 'menu-app' }: AppMenuProps): JSX.Element
           <>
             <IonMenuToggle>
               <IonItem routerLink="/tabs/home" lines="full" data-testid={`${testid}-item-home`}>
-                <IonIcon icon={home} className="icon" />
+                <Icon icon={IconName.House} fixedWidth className="icon" />
                 <IonLabel>Home</IonLabel>
               </IonItem>
             </IonMenuToggle>
             <IonMenuToggle>
               <IonItem routerLink="/tabs/users" lines="full" data-testid={`${testid}-item-users`}>
-                <IonIcon icon={people} className="icon" />
+                <Icon icon={IconName.Users} fixedWidth className="icon" />
                 <IonLabel>Users</IonLabel>
               </IonItem>
             </IonMenuToggle>
@@ -80,7 +79,7 @@ const AppMenu = ({ className, testid = 'menu-app' }: AppMenuProps): JSX.Element
                 lines="full"
                 data-testid={`${testid}-item-account`}
               >
-                <IonIcon icon={personCircle} className="icon" />
+                <Icon icon={IconName.UserGear} fixedWidth className="icon" />
                 <IonLabel>Account</IonLabel>
               </IonItem>
             </IonMenuToggle>
@@ -90,7 +89,7 @@ const AppMenu = ({ className, testid = 'menu-app' }: AppMenuProps): JSX.Element
                 lines="full"
                 data-testid={`${testid}-item-signout`}
               >
-                <IonIcon icon={logOut} className="icon" />
+                <Icon icon={IconName.SignOut} fixedWidth className="icon" />
                 <IonLabel>Sign Out</IonLabel>
               </IonItem>
             </IonMenuToggle>

src/common/components/Router/TabNavigation.scss

@@ -0,0 +1,8 @@
+.tab-navigation {
+  ion-tab-button {
+    .icon {
+      margin-top: 0.375rem;
+      margin-bottom: 0.125rem;
+    }
+  }
+}