Making the icon on the header configurable

src/components/header/home-header.component.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
-import { Calendar, Location } from "@carbon/react/icons";
+import { Calendar, Events, Location } from "@carbon/react/icons";
 import { formatDate, useSession } from "@openmrs/esm-framework";
 import { HomeIllustration } from "./home-illustration.component";
 import styles from "./home-header.scss";
@@ -26,15 +26,15 @@ export const HomeHeader: React.FC<HomeHeaderProps> = ({
     <>
       <div className={styles.header}>
         <div className={styles["left-justified-items"]}>
-          <HomeIllustration />
+          <HomeIllustration icon={<Events />} />
           <div className={styles["page-labels"]}>
             <p>{t("home", "Home")}</p>
             <p className={styles["page-name"]}>{headerTitle}</p>
           </div>
         </div>
         <div className={styles["right-justified-items"]}>
           <div className={styles["date-and-location"]}>
-            {icon}
+            <Location size={16} />
             <span className={styles.value}>{userLocation}</span>
             <span className={styles.middot}>&middot;</span>
             <Calendar size={16} />

src/components/header/home-header.scss

@@ -80,3 +80,15 @@
     left: -10.15rem;
   }
 }
+
+svg.iconOverrides {
+  width: 72px !important;
+  height: 72px !important;
+  fill: var(--brand-03);
+}
+
+.svgContainer svg {
+  width: 72px;
+  height: 72px;
+  fill: var(--brand-03);
+}

src/components/header/home-illustration.component.tsx

@@ -1,29 +1,12 @@
 import React from "react";
+import styles from "./home-header.scss";
 
-export const HomeIllustration: React.FC = () => {
-  return (
-    <svg
-      width="100"
-      height="72"
-      viewBox="0 0 250 250"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <g>
-        <g>
-          <g>
-            <path
-              fill="#7BBCB9"
-              data-title="Layer 0"
-              d="M24.1,116.2v106.2h89.7h89.7V116.2V10h-89.7H24.1V116.2L24.1,116.2z M137.1,44.7c3.7,1.9,5.7,3.8,7.6,7.3c1.7,2.9,1.8,3.6,1.8,8.9v5.7l5.8,3.5l5.8,3.5l2.7-1.6c2.4-1.3,3.5-1.5,7.8-1.5c5.7,0,8.4,1.1,12.1,4.7c3.7,3.7,4.7,6.4,4.7,12.1s-1.1,8.4-4.7,12.1c-3.7,3.7-6.4,4.7-12.1,4.7c-4.5,0-5.4-0.2-8.1-1.8c-3.5-1.9-5.4-3.9-7.4-7.6c-1.1-2-1.3-3.4-1.3-8.1l0.1-5.6l-5.8-3.6l-5.9-3.5l-2.6,1.5c-1.7,0.9-4,1.5-6.3,1.8l-3.7,0.3l-7.5,12.4l-7.5,12.4l1.7,2.1c3.3,4.2,3.9,5.9,3.9,11.3c0,5.7-1.1,8.4-4.7,12.1c-3.7,3.7-6.4,4.7-12.1,4.7c-5.7,0-8.4-1.1-12.1-4.7c-3.7-3.8-4.7-6.4-4.7-12.5v-5.3l-5.8-4l-5.8-4l-2.4,1.1c-3.7,1.7-11.1,1.5-14.4-0.2c-3.2-1.7-6.3-4.8-8-8c-1.1-2-1.4-3.4-1.4-7.5c0-4.5,0.2-5.4,1.8-8.1c1.9-3.5,3.9-5.4,7.6-7.4c1.9-1,3.4-1.3,7.4-1.3c5.7,0,8.4,1.1,12.1,4.7c3.4,3.5,4.7,6.4,4.7,11.5c0,2.4-0.2,5.2-0.5,6.3c-0.5,1.8-0.4,1.9,4.9,5.5l5.4,3.7l2.9-1.6c1.9-1,4.3-1.7,6.8-1.9l3.9-0.4l7.3-12.1c4.7-7.7,7.2-12.3,6.8-12.8c-0.2-0.4-1.2-1.8-2.1-3.1c-6.8-9.5-2.8-22.2,8.3-26.4C127.4,42.7,134,43.1,137.1,44.7z M161,156.3v4.7h-47.2H66.6v-4.7v-4.7h47.2H161V156.3z M161,184.6v4.7h-47.2H66.6v-4.7v-4.7h47.2H161V184.6z"
-            />
-            <path
-              fill="#7BBCB9"
-              data-title="Layer 1"
-              d="M208.2,38.3V43h7.1h7.1v96.8v96.8h-80.2H61.8v-4.7v-4.7h-4.7h-4.7v9.4v9.4h89.4h89.4v-38.5c0-21.1,0.2-68.9,0.4-106.2l0.4-67.7h-11.9h-11.9V38.3z"
-            />
-          </g>
-        </g>
-      </g>
-    </svg>
-  );
+export interface HomeIllustrationProps {
+  icon: React.ReactNode;
+}
+
+export const HomeIllustration: React.FC<HomeIllustrationProps> = ({ icon }) => {
+  return <div className={styles.svgContainer}>{icon}</div>;
 };
+
+export default HomeIllustration;