Removes unicons support and introduces CareIcons library for intern…

…al use (#4071)

public/index.html

@@ -10,7 +10,7 @@
   <meta property="og:title" content="%REACT_APP_TITLE%" />
   <meta property="og:description" content="%REACT_APP_META_DESCRIPTION%" />
   <meta property="og:image" content="%REACT_APP_COVER_IMAGE%"" />
-  <meta property=" og:url" content="https://care.coronasafe.network/" />
+  <meta property="og:url" content="https://care.coronasafe.network/" />
   <meta property="og:site_name" content="Care CoronaSafe Network." />
   <meta name="twitter:title" content="CARE" />
   <meta name="twitter:description"
@@ -37,6 +37,5 @@
   <div id="root"></div>
 </body>
 <script src="https://kit.fontawesome.com/d69454c2e7.js" crossorigin="anonymous"></script>
-<link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css">
 
 </html>

src/CAREUI/icons/CareIcon.tsx

@@ -0,0 +1,15 @@
+import { useEffect } from "react";
+import { transformIcons } from "./icon";
+
+export interface CareIconProps {
+  className?: string | undefined;
+}
+
+export default function CareIcon({ className }: CareIconProps) {
+  useEffect(() => transformIcons(), [className]);
+  return (
+    <span key={className}>
+      <i className={`care ${className}`} />
+    </span>
+  );
+}

src/CAREUI/icons/icon.css

@@ -0,0 +1,8 @@
+/*  Pulling the svg icon down by -0.125em places the icon onto the proper baseline of the text. */
+
+.care-svg-icon__baseline {
+  display: inline-block;
+  height: 1em;
+  overflow: visible;
+  vertical-align: -0.125em;
+}

src/CAREUI/icons/icon.js

@@ -0,0 +1,45 @@
+import "./icon.css";
+import iconData from "./UniconPaths.json";
+
+const xmlns = "http://www.w3.org/2000/svg";
+
+const findIconName = (className) => {
+  const iconName = className.match(/care-([a-zA-Z0-9-]+)/);
+  return iconName ? iconName[1] : "default";
+};
+
+const getIconData = (className) => {
+  const data = iconData[findIconName(className)];
+  return typeof data === "undefined" ? iconData["default"] : data;
+};
+
+const createSvg = (className) => {
+  const icon = getIconData(className);
+  const el = document.createElementNS(xmlns, "svg");
+  el.setAttribute(
+    "class",
+    className.replace("care", "care-svg-icon__baseline")
+  );
+  el.setAttribute("role", "img");
+  el.setAttribute("xmlns", xmlns);
+  el.setAttribute("viewBox", `0 0 ${icon[0]} ${icon[0]}`);
+
+  const path = document.createElementNS(xmlns, "path");
+  path.setAttribute("fill", "currentColor");
+  path.setAttribute("d", icon[1]);
+  el.appendChild(path);
+  return el;
+};
+
+export const transformIcons = () => {
+  const elements = Array.from(document.getElementsByClassName("care"));
+  elements.forEach((element) => {
+    if (element.tagName == "I") {
+      element.parentNode.replaceChild(createSvg(element.className), element);
+    }
+  });
+};
+
+export const addListener = () => {
+  window.addEventListener("load", transformIcons);
+};

src/CAREUI/interactive/LegendInput.tsx

@@ -1,4 +1,5 @@
 import { RefObject, useRef, useState } from "react";
+import CareIcon from "../icons/CareIcon";
 import { classNames } from "../../Utils/utils";
 
 type InputProps = {
@@ -111,7 +112,9 @@ export default function LegendInput(props: InputProps) {
             className="absolute right-0 top-0 h-full flex items-center px-3 z-10 text-xl"
             onClick={() => setShowPassword(!showPassword)}
           >
-            <i className={`uil uil-eye${showPassword ? "" : "-slash"}`} />
+            <CareIcon
+              className={`care-l-eye${showPassword ? "" : "-slash"} h-5`}
+            />
           </button>
         )}
       </div>

src/Common/constants.tsx

@@ -755,7 +755,7 @@ export const FACILITY_FEATURE_TYPES = [
   {
     id: 1,
     name: "CT Scan",
-    icon: "uil uil-compact-disc",
+    icon: "compact-disc",
   },
   {
     id: 2,
@@ -786,17 +786,17 @@ export const FACILITY_FEATURE_TYPES = [
   {
     id: 4,
     name: "Neonatal Care",
-    icon: "uil uil-baby-carriage",
+    icon: "baby-carriage",
   },
   {
     id: 5,
     name: "Operation Theater",
-    icon: "uil uil-syringe",
+    icon: "syringe",
   },
   {
     id: 6,
     name: "Blood Bank",
-    icon: "uil uil-tear",
+    icon: "tear",
   },
 ];
 

src/Components/Assets/AssetFilter.tsx

@@ -12,6 +12,7 @@ import { LocationSelect } from "../Common/LocationSelect";
 import { AssetLocationObject } from "./AssetTypes";
 import FilterButtons from "../Common/FilterButtons";
 import { FieldLabel } from "../Form/FormFields/FormField";
+import CareIcon from "../../CAREUI/icons/CareIcon";
 
 const initialLocation = {
   id: "",
@@ -122,7 +123,7 @@ function AssetFilter(props: any) {
       />
       <div className="w-full flex-none pt-14">
         <div className="text-md my-6 flex items-center text-gray-700 gap-2">
-          <i className="uil uil-filter" />
+          <CareIcon className="care-l-filter h-5" />
           <p>Filter by</p>
         </div>
 

src/Components/Assets/AssetManage.tsx

@@ -11,6 +11,7 @@ import QRCode from "qrcode.react";
 import AssetWarrantyCard from "./AssetWarrantyCard";
 import { formatDate } from "../../Utils/utils";
 import Chip from "../../CAREUI/display/Chip";
+import CareIcon from "../../CAREUI/icons/CareIcon";
 import ButtonV2 from "../Common/components/ButtonV2";
 const PageTitle = loadable(() => import("../Common/PageTitle"));
 const Loading = loadable(() => import("../Common/Loading"));
@@ -149,7 +150,7 @@ const AssetManage = (props: AssetManageProps) => {
       <div className="flex flex-col">
         <div className="flex flex-start items-center">
           <div className="w-8">
-            <i className={`uil uil-${item.icon} text-gray-700 text-lg`}></i>
+            <CareIcon className={`care-l-${item.icon} h-5 fill-gray-700`} />
           </div>
           <div className="text-gray-700 break-words">{item.label}</div>
         </div>
@@ -243,15 +244,15 @@ const AssetManage = (props: AssetManageProps) => {
                 }
                 id="update-asset"
               >
-                <i className="uil uil-pen text-white mr-4" />
+                <CareIcon className="care-l-pen h-5 mr-4" />
                 Update
               </ButtonV2>
               {asset?.asset_class && (
                 <ButtonV2
                   onClick={() => navigate(`/assets/${asset?.id}/configure`)}
                   id="configure-asset"
                 >
-                  <i className="uil uil-setting text-white mr-4"></i>
+                  <CareIcon className="care-l-setting h-5 mr-4" />
                   Configure
                 </ButtonV2>
               )}

src/Components/Assets/AssetWarrantyCard.tsx

@@ -1,4 +1,5 @@
 import moment from "moment";
+import CareIcon from "../../CAREUI/icons/CareIcon";
 import { AssetData } from "./AssetTypes";
 
 export default function AssetWarrantyCard(props: { asset: AssetData }) {
@@ -52,7 +53,7 @@ export default function AssetWarrantyCard(props: { asset: AssetData }) {
                       }
                       className="text-primary-300 hover:text-primary-400 border-b border-primary-300"
                     >
-                      <i className={"mr-1 uil uil-" + item[2]} />
+                      <CareIcon className={"h-5 mr-1 care-l-" + item[2]} />
                       {item[1]}
                     </a>
                   </>

src/Components/Auth/Login.tsx

@@ -9,6 +9,7 @@ import * as Notification from "../../Utils/Notifications.js";
 import { get } from "lodash";
 import LegendInput from "../../CAREUI/interactive/LegendInput";
 import LanguageSelectorLogin from "../Common/LanguageSelectorLogin";
+import CareIcon from "../../CAREUI/icons/CareIcon";
 
 export const Login = (props: { forgot?: boolean }) => {
   const dispatch: any = useDispatch();
@@ -329,7 +330,7 @@ export const Login = (props: { forgot?: boolean }) => {
               type="button"
               className="text-sm text-primary-400 hover:text-primary-500 mb-4"
             >
-              <i className="uil uil-arrow-left" /> Back to login
+              <CareIcon className="care-l-arrow-left h-5" /> Back to login
             </button>
             <div className="text-4xl w-[300px] font-black mb-8 text-primary-600">
               {t("forget_password")}

src/Components/Common/Sidebar/Sidebar.tsx

@@ -4,6 +4,7 @@ import SidebarUserCard from "./SidebarUserCard";
 import NotificationItem from "../../Notifications/NotificationsList";
 import { Dialog, Transition } from "@headlessui/react";
 import useActiveLink from "../../../Common/hooks/useActiveLink";
+import CareIcon from "../../../CAREUI/icons/CareIcon";
 
 export const SIDEBAR_SHRINK_PREFERENCE_KEY = "sidebarShrinkPreference";
 
@@ -25,28 +26,20 @@ type StatelessSidebarProps =
       setShrinked?: undefined;
     };
 
-// Sidebar item icons.
-const Facility = () => <i className="uil uil-hospital" />;
-const Patient = () => <i className="uil uil-wheelchair" />;
-const Asset = () => <i className="uil uil-shopping-cart-alt" />;
-const SampleTest = () => <i className="uil uil-medkit" />;
-const Shifting = () => <i className="uil uil-ambulance" />;
-const Resource = () => <i className="uil uil-heart-medical" />;
-const Result = () => <i className="uil uil-clipboard-notes" />;
-const Users = () => <i className="uil uil-users-alt" />;
-const NoticeBoard = () => <i className="uil uil-meeting-board" />;
-const Dashboard = () => <i className="uil uil-dashboard" />;
-
 const NavItems = [
-  { text: "Facilities", to: "/facility", icon: <Facility /> },
-  { text: "Patients", to: "/patients", icon: <Patient /> },
-  { text: "Assets", to: "/assets", icon: <Asset /> },
-  { text: "Sample Test", to: "/sample", icon: <SampleTest /> },
-  { text: "Shifting", to: "/shifting", icon: <Shifting /> },
-  { text: "Resource", to: "/resource", icon: <Resource /> },
-  { text: "External Results", to: "/external_results", icon: <Result /> },
-  { text: "Users", to: "/users", icon: <Users /> },
-  { text: "Notice Board", to: "/notice_board", icon: <NoticeBoard /> },
+  { text: "Facilities", to: "/facility", icon: "care-l-hospital" },
+  { text: "Patients", to: "/patients", icon: "care-l-wheelchair" },
+  { text: "Assets", to: "/assets", icon: "care-l-shopping-cart-alt" },
+  { text: "Sample Test", to: "/sample", icon: "care-l-medkit" },
+  { text: "Shifting", to: "/shifting", icon: "care-l-ambulance" },
+  { text: "Resource", to: "/resource", icon: "care-l-heart-medical" },
+  {
+    text: "External Results",
+    to: "/external_results",
+    icon: "care-l-clipboard-notes",
+  },
+  { text: "Users", to: "/users", icon: "care-l-users-alt" },
+  { text: "Notice Board", to: "/notice_board", icon: "care-l-meeting-board" },
 ];
 
 const StatelessSidebar = ({
@@ -129,11 +122,23 @@ const StatelessSidebar = ({
             bg-primary-400 rounded z-10 transition-all`}
         />
         {NavItems.map((i) => {
-          return <Item key={i.text} {...i} selected={i.to === activeLink} />;
+          return (
+            <Item
+              key={i.text}
+              {...i}
+              icon={<CareIcon className={`${i.icon} h-5`} />}
+              selected={i.to === activeLink}
+            />
+          );
         })}
 
         <NotificationItem shrinked={shrinked} />
-        <Item text="Dashboard" to={DASHBOARD} icon={<Dashboard />} external />
+        <Item
+          text="Dashboard"
+          to={DASHBOARD}
+          icon={<CareIcon className="care-l-dashboard h-5" />}
+          external
+        />
       </div>
       <div className="flex-1" />
       <div className="relative flex justify-end">

src/Components/Common/Sidebar/SidebarItem.tsx

@@ -1,5 +1,6 @@
 import { Link } from "raviger";
 import { useTranslation } from "react-i18next";
+import CareIcon from "../../../CAREUI/icons/CareIcon";
 
 export type SidebarIcon = React.ReactNode;
 
@@ -48,7 +49,9 @@ const SidebarItemBase = ({
         >
           {t(props.text)}
         </span>
-        {external && !shrinked && <i className="uil uil-external-link-alt" />}
+        {external && !shrinked && (
+          <CareIcon className="care-l-external-link-alt h-5" />
+        )}
       </div>
 
       {!!props.badgeCount && (

src/Components/Common/Sidebar/SidebarUserCard.tsx

@@ -2,6 +2,7 @@ import { get } from "lodash";
 import { Link } from "raviger";
 import { useTranslation } from "react-i18next";
 import { useSelector } from "react-redux";
+import CareIcon from "../../../CAREUI/icons/CareIcon";
 import { handleSignOut } from "../../../Utils/utils";
 
 const SidebarUserCard = ({ shrinked }: { shrinked: boolean }) => {
@@ -19,7 +20,7 @@ const SidebarUserCard = ({ shrinked }: { shrinked: boolean }) => {
       } transition-all duration-200 ease-in-out`}
     >
       <Link href="/user/profile" className="flex-none">
-        <i className="text-white text-3xl uil uil-user-circle" />
+        <CareIcon className="care-l-user-circle h-8 text-white" />
       </Link>
       <div
         className={`${shrinked ? "hidden" : "grow"} pl-3 flex flex-col min-w-0`}

src/Components/Common/components/ContactLink.tsx

@@ -1,3 +1,5 @@
+import CareIcon from "../../../CAREUI/icons/CareIcon";
+
 type ContactLinkProps =
   | { mailto: string; tel?: undefined }
   | { mailto?: undefined; tel: string };
@@ -9,11 +11,11 @@ export default function ContactLink(props: ContactLinkProps) {
         href={props.tel ? `tel:${props.tel}` : `mailto:${props.mailto}`}
         className=" tracking-wider text-base font-medium flex items-center gap-2 border-b border-blue-500 text-blue-500"
       >
-        <i
-          className={`uil ${
-            props.tel ? "uil-outgoing-call" : "uil-envelope-alt"
-          }`}
-        ></i>
+        <CareIcon
+          className={`care-l-${
+            props.tel ? "outgoing-call" : "envelope-alt"
+          } h-5 fill-gray-700`}
+        />
         {props.tel ? props.tel : props.mailto}
       </a>
     </div>

src/Components/Common/components/Menu.tsx

@@ -1,5 +1,6 @@
 import { Menu } from "@headlessui/react";
 import { ReactNode } from "react";
+import CareIcon from "../../../CAREUI/icons/CareIcon";
 import { useIsAuthorized } from "../../../Common/hooks/useIsAuthorized";
 import { Anyone, AuthorizedElementProps } from "../../../Utils/AuthorizeFor";
 import { ButtonVariant } from "./ButtonV2";
@@ -19,7 +20,7 @@ export default function DropdownMenu(props: {
             {props.title}
           </div>
 
-          <i className="ml-2 -mr-1 uil uil-angle-down text-2xl"></i>
+          <CareIcon className="ml-2 -mr-1 care-l-angle-down h-6" />
         </Menu.Button>
         <DropdownTransition>
           <Menu.Items className="absolute right-0 mt-2 py-1 min-w-full sm:min-w-[250px] origin-top-right rounded-lg bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">

src/Components/Facility/AddBedForm.tsx

@@ -18,6 +18,7 @@ import {
 import { LOCATION_BED_TYPES } from "../../Common/constants";
 import { navigate } from "raviger";
 import ButtonV2 from "../Common/components/ButtonV2";
+import CareIcon from "../../CAREUI/icons/CareIcon";
 const Loading = loadable(() => import("../Common/Loading"));
 const PageTitle = loadable(() => import("../Common/PageTitle"));
 
@@ -219,11 +220,11 @@ export const AddBedForm = (props: BedFormProps) => {
                       )
                     }
                   >
-                    <i className="uil uil-times-circle text-xl"></i>
+                    <CareIcon className="care-l-times-circle h-5" />
                     Cancel
                   </ButtonV2>
                   <ButtonV2 type="submit" onClick={(e) => handleSubmit(e)}>
-                    <i className="uil uil-check-circle text-xl"></i>
+                    <CareIcon className="care-l-check-circle h-5" />
                     {buttonText}
                   </ButtonV2>
                 </div>