Replace font-awesome icons by CareIcon component

package.json

@@ -51,7 +51,6 @@
   "dependencies": {
     "@date-io/date-fns": "^2.16.0",
     "@fontsource/inter": "^5.0.16",
-    "@fortawesome/fontawesome-free": "^6.5.1",
     "@glennsl/bs-json": "^5.0.4",
     "@googlemaps/react-wrapper": "^1.1.35",
     "@googlemaps/typescript-guards": "^2.0.3",

src/CAREUI/display/FilterBadge.tsx

@@ -1,3 +1,5 @@
+import CareIcon from "../icons/CareIcon";
+
 export interface FilterBadgeProps {
   name: string;
   value: string;
@@ -17,11 +19,12 @@ const FilterBadge = ({ name, value, onRemove }: FilterBadgeProps) => {
       } flex flex-row items-center rounded-full border border-gray-300 bg-white px-3 py-1 text-xs font-medium leading-4 text-gray-600`}
     >
       {`${name}: ${value}`}
-      <i
+      <CareIcon
         id="removeicon"
-        className="fas fa-times ml-2 cursor-pointer rounded-full px-1 py-0.5 hover:bg-gray-500"
+        icon="l-times"
+        className="ml-2 box-content cursor-pointer rounded-full px-1 py-0.5 hover:bg-gray-500"
         onClick={onRemove}
-      ></i>
+      />
     </span>
   );
 };

src/CAREUI/icons/CareIcon.tsx

@@ -9,6 +9,7 @@ export interface CareIconProps {
   icon?: IconName;
   className?: string | undefined;
   onClick?: React.MouseEventHandler<HTMLSpanElement> | undefined;
+  id?: string;
 }
 
 /**
@@ -19,14 +20,19 @@ export interface CareIconProps {
  *
  * @see [icon library](https://iconscout.com/unicons/)
  */
-export default function CareIcon({ icon, className, onClick }: CareIconProps) {
+export default function CareIcon({
+  id,
+  icon,
+  className,
+  onClick,
+}: CareIconProps) {
   const effectiveClassName = icon
     ? `care-${icon} ${className ?? ""}`
     : className;
 
   useEffect(() => transformIcons(), [effectiveClassName]);
   return (
-    <span onClick={onClick} key={effectiveClassName}>
+    <span id={id} onClick={onClick} key={effectiveClassName}>
       <i className={`care ${effectiveClassName}`} />
     </span>
   );

src/Common/constants.tsx

@@ -547,77 +547,83 @@ export const DESIGNATION_HEALTH_CARE_WORKER = [
   "OTHERS",
 ];
 
-export const NOTIFICATION_EVENTS = [
-  { id: "MESSAGE", text: "Notice", icon: "fa-regular fa-message" },
+type NotificationEvent = {
+  id: string;
+  text: string;
+  icon: IconName;
+};
+
+export const NOTIFICATION_EVENTS: NotificationEvent[] = [
+  { id: "MESSAGE", text: "Notice", icon: "l-comment-alt-message" },
   {
     id: "PATIENT_CREATED",
     text: "Patient Created",
-    icon: "fa-solid fa-user-plus",
+    icon: "l-user-plus",
   },
   {
     id: "PATIENT_UPDATED",
     text: "Patient Updated",
-    icon: "fa-solid fa-user-pen",
+    icon: "l-edit",
   },
   {
     id: "PATIENT_DELETED",
     text: "Patient Deleted",
-    icon: "fa-solid fa-user-minus",
+    icon: "l-user-minus",
   },
   {
     id: "PATIENT_CONSULTATION_CREATED",
     text: "Patient Consultation Created",
-    icon: "fa-solid fa-heart-circle-check",
+    icon: "l-heart",
   },
   {
     id: "PATIENT_CONSULTATION_UPDATED",
     text: "Patient Consultation Updated",
-    icon: "fa-solid fa-heart-circle-plus",
+    icon: "l-heart-medical",
   },
   {
     id: "PATIENT_CONSULTATION_DELETED",
     text: "Patient Consultation Deleted",
-    icon: "fa-solid fa-heart-circle-minus",
+    icon: "l-heartbeat",
   },
   {
     id: "INVESTIGATION_SESSION_CREATED",
     text: "Investigation Session Created",
-    icon: "fa-solid fa-magnifying-glass",
+    icon: "l-search",
   },
   {
     id: "INVESTIGATION_UPDATED",
     text: "Investigation Updated",
-    icon: "fa-solid fa-magnifying-glass-plus",
+    icon: "l-search-plus",
   },
   {
     id: "PATIENT_FILE_UPLOAD_CREATED",
     text: "Patient File Upload Created",
-    icon: "fa-solid fa-file-medical",
+    icon: "l-file-medical",
   },
   {
     id: "CONSULTATION_FILE_UPLOAD_CREATED",
     text: "Consultation File Upload Created",
-    icon: "fa-solid fa-file-waveform",
+    icon: "l-file-upload",
   },
   {
     id: "PATIENT_CONSULTATION_UPDATE_CREATED",
     text: "Patient Consultation Update Created",
-    icon: "fa-solid fa-file-circle-check",
+    icon: "l-heart",
   },
   {
     id: "PATIENT_CONSULTATION_UPDATE_UPDATED",
     text: "Patient Consultation Update Updated",
-    icon: "fa-solid fa-file-circle-plus",
+    icon: "l-heart-medical",
   },
   {
     id: "SHIFTING_UPDATED",
     text: "Shifting Updated",
-    icon: "fa-solid fa-truck-medical",
+    icon: "l-ambulance",
   },
   {
     id: "PATIENT_NOTE_ADDED",
     text: "Patient Note Added",
-    icon: "fa-solid fa-message",
+    icon: "l-notes",
   },
 ];
 

src/Components/ABDM/LinkABHANumberModal.tsx

@@ -22,9 +22,9 @@ export const validateRule = (
   return (
     <div>
       {condition ? (
-        <i className="fas fa-circle-check text-green-500" />
+        <CareIcon icon="l-check-circle" className="text-green-500" />
       ) : (
-        <i className="fas fa-circle-xmark text-red-500" />
+        <CareIcon icon="l-times-circle" className="text-red-500" />
       )}{" "}
       <span
         className={classNames(condition ? "text-primary-500" : "text-red-500")}

src/Components/Assets/AssetImportModal.tsx

@@ -17,6 +17,7 @@ import DialogModal from "../Common/Dialog";
 import useQuery from "../../Utils/request/useQuery";
 import routes from "../../Redux/api";
 import { SelectFormField } from "../Form/FormFields/SelectFormField";
+import CareIcon from "../../CAREUI/icons/CareIcon";
 
 interface Props {
   open: boolean;
@@ -319,7 +320,11 @@ const AssetImportModal = ({ open, onClose, facility, onUpdate }: Props) => {
                 className="focus:ring-blue mx-auto mt-4 max-w-xs items-center rounded-md border border-primary-500 bg-white px-3 py-2 text-sm font-medium leading-4 text-primary-700 transition duration-150 ease-in-out hover:text-primary-500 hover:shadow focus:border-primary-300 focus:outline-none active:bg-gray-50 active:text-primary-800"
                 href={sample_format_asset_import}
               >
-                <i className="fa fa-download mr-1" aria-hidden="true"></i>{" "}
+                <CareIcon
+                  icon="l-download-alt"
+                  className="mr-1"
+                  aria-hidden="true"
+                />{" "}
                 <span>Sample Format</span>
               </a>
             </div>
@@ -328,7 +333,8 @@ const AssetImportModal = ({ open, onClose, facility, onUpdate }: Props) => {
           <div className="flex flex-col gap-2 sm:flex-row">
             <div>
               <label className="flex cursor-pointer items-center justify-center gap-1 rounded-lg border border-primary-500 bg-white px-4 py-2 text-sm font-medium text-primary-500 transition-all hover:border-primary-400 hover:text-primary-400">
-                <i className="fas fa-cloud-upload-alt mr-2"></i>Upload a file
+                <CareIcon icon="l-cloud-upload" className="mr-2" />
+                Upload a file
                 <input
                   data-testid="import-asset-file"
                   title="changeFile"
@@ -356,9 +362,9 @@ const AssetImportModal = ({ open, onClose, facility, onUpdate }: Props) => {
               data-testid="asset-import-btn"
             >
               {isImporting ? (
-                <i className="fa-solid fa-spinner animate-spin" />
+                <CareIcon icon="l-spinner" className="animate-spin" />
               ) : (
-                <i className="fa-solid fa-file-import" />
+                <CareIcon icon="l-file-import" />
               )}
               <span>{isImporting ? "Importing..." : "Import"}</span>
             </Submit>

src/Components/Assets/AssetManage.tsx

@@ -115,13 +115,14 @@ const AssetManage = (props: AssetManageProps) => {
           onClick={(_) => window.print()}
           className="btn btn-primary mr-2"
         >
-          <i className="fas fa-print mr-2"></i> Print QR Code
+          <CareIcon icon="l-print" className="mr-2" />
+          Print QR Code
         </button>
         <button
           onClick={(_) => setIsPrintMode(false)}
           className="btn btn-default"
         >
-          <i className="fas fa-times mr-2"></i> Close
+          <CareIcon icon="l-times" className="mr-2" /> Close
         </button>
       </div>
       <h2 className="text-center">Print Preview</h2>

src/Components/Assets/AssetsList.tsx

@@ -159,7 +159,8 @@ const AssetsList = () => {
           onClick={() => setIsScannerActive(false)}
           className="btn btn-default mb-2"
         >
-          <i className="fas fa-times mr-2"></i> Close Scanner
+          <CareIcon icon="l-times" className="mr-2" />
+          Close Scanner
         </button>
         <QrReader
           delay={300}
@@ -343,7 +344,7 @@ const AssetsList = () => {
               className="w-full py-[11px]"
               onClick={() => setIsScannerActive(true)}
             >
-              <i className="fas fa-search mr-1"></i> Scan Asset QR
+              <CareIcon icon="l-search" className="mr-1" /> Scan Asset QR
             </ButtonV2>
           </div>
           <div

src/Components/Assets/configure/MonitorConfigure.tsx

@@ -8,6 +8,7 @@ import { FieldLabel } from "../../Form/FormFields/FormField";
 import request from "../../../Utils/request/request";
 import routes from "../../../Redux/api";
 import useQuery from "../../../Utils/request/useQuery";
+import CareIcon from "../../../CAREUI/icons/CareIcon";
 
 const saveLink = async (assetId: string, bedId: string) => {
   await request(routes.createAssetBed, {
@@ -76,7 +77,7 @@ export default function MonitorConfigure({ asset }: { asset: AssetData }) {
           />
         </div>
         <Submit className="mt-6 w-full shrink-0">
-          <i className="fas fa-bed-pulse" />
+          <CareIcon icon="l-bed" />
           {updateLink ? "Update Bed" : "Save Bed"}
         </Submit>
       </div>

src/Components/Common/Breadcrumbs.tsx

@@ -127,7 +127,7 @@ export default function Breadcrumbs(props: any) {
                     >
                       {crumb.name.match(/^\w{8}-(\w{4}-){3}\w{12}$/) ? (
                         <div>
-                          <i className="fas fa-hashtag fa-lg mr-1" />
+                          <span className="mr-1 text-lg">#</span>
                           <span>{crumb.name.slice(0, 13) + "..."}</span>
                         </div>
                       ) : (

src/Components/Common/CareIcon.res

@@ -0,0 +1,19 @@
+type reactClass
+module CareIcon = {
+  @module("../../CAREUI/icons/CareIcon.tsx") @react.component
+  external make: (
+        ~icon: option<string>, 
+        ~className: option<string>, 
+        ~onClick: option<ReactEvent.Mouse.t => unit>, 
+        ~id: option<string>
+    ) => React.element = "default"
+}
+
+@react.component
+let make = (
+    ~icon = ?,
+    ~className = ?,
+    ~onClick = ?,
+    ~id = ?,
+) => <CareIcon icon className onClick id />
+

src/Components/Common/FilePreviewDialog.tsx

@@ -4,6 +4,7 @@ import CircularProgress from "./components/CircularProgress";
 import { useTranslation } from "react-i18next";
 import { StateInterface } from "../Patient/FileUpload";
 import { Dispatch, Fragment, ReactNode, SetStateAction } from "react";
+import CareIcon, { IconName } from "../../CAREUI/icons/CareIcon";
 
 export const zoom_values = [
   "h-1/6 w-1/6 my-40",
@@ -121,25 +122,25 @@ const FilePreviewDialog = (props: FilePreviewProps) => {
                               {[
                                 [
                                   t("Zoom In"),
-                                  "magnifying-glass-plus",
+                                  "l-search-plus",
                                   handleZoomIn,
                                   file_state.zoom === zoom_values.length,
                                 ],
                                 [
                                   t("Zoom Out"),
-                                  "magnifying-glass-minus",
+                                  "l-search-minus",
                                   handleZoomOut,
                                   file_state.zoom === 1,
                                 ],
                                 [
                                   t("Rotate Left"),
-                                  "rotate-left",
+                                  "l-corner-up-left",
                                   () => handleRotate(-90),
                                   false,
                                 ],
                                 [
                                   t("Rotate Right"),
-                                  "rotate-right",
+                                  "l-corner-up-right",
                                   () => handleRotate(90),
                                   false,
                                 ],
@@ -150,7 +151,10 @@ const FilePreviewDialog = (props: FilePreviewProps) => {
                                   className="z-50 rounded bg-white/60 px-4 py-2 text-black backdrop-blur transition hover:bg-white/70"
                                   disabled={button[3] as boolean}
                                 >
-                                  <i className={`fas fa-${button[1]} mr-2`} />
+                                  <CareIcon
+                                    icon={button[1] as IconName}
+                                    className="mr-2"
+                                  />
                                   {button[0] as string}
                                 </button>
                               ))}
@@ -164,15 +168,18 @@ const FilePreviewDialog = (props: FilePreviewProps) => {
                               download={`${file_state.name}.${file_state.extension}`}
                               className="z-50 rounded bg-white/60 px-4 py-2 text-black backdrop-blur transition hover:bg-white/70"
                             >
-                              <i className="fas fa-download mr-2" />
+                              <CareIcon
+                                icon="l-download-alt"
+                                className="mr-2"
+                              />
                               Download
                             </a>
                           )}
                           <button
                             onClick={onClose}
                             className="z-50 rounded bg-white/60 px-4 py-2 text-black backdrop-blur transition hover:bg-white/70"
                           >
-                            <i className="fas fa-times mr-2" />
+                            <CareIcon icon="l-times" className="mr-2" />
                             Close
                           </button>
                         </div>

src/Components/Common/PageTitle.tsx

@@ -3,6 +3,7 @@ import Breadcrumbs from "./Breadcrumbs";
 import PageHeadTitle from "./PageHeadTitle";
 import { classNames } from "../../Utils/utils";
 import useAppHistory from "../../Common/hooks/useAppHistory";
+import CareIcon from "../../CAREUI/icons/CareIcon";
 
 export interface PageTitleProps {
   title: string;
@@ -65,9 +66,10 @@ export default function PageTitle({
                 goBack(backUrl);
               }}
             >
-              <i className="fas fa-chevron-left mr-1 rounded-md p-2 text-2xl hover:bg-gray-200">
-                {" "}
-              </i>
+              <CareIcon
+                icon="l-angle-double-left"
+                className="mr-1 rounded-md p-2 text-2xl hover:bg-gray-200"
+              />{" "}
             </button>
           )}
           <h2 className="ml-0 text-2xl font-semibold leading-tight">{title}</h2>