(feat) O3-4168: Add gender icons to the CarbonMRS icon pack

packages/framework/esm-styleguide/mock.tsx

@@ -22,6 +22,10 @@ export const DownloadIcon = () => <div>DownloadIcon</div>;
 export const EditIcon = () => <div>EditIcon</div>;
 export const EventScheduleIcon = () => <div>EventScheduleIcon</div>;
 export const EventsIcon = () => <div>EventsIcon</div>;
+export const GenderFemaleIcon = () => <div>GenderFemaleIcon</div>;
+export const GenderMaleIcon = () => <div>GenderMaleIcon</div>;
+export const GenderTransgenderIcon = () => <div>GenderTransgenderIcon</div>;
+export const GenderUnknownIcon = () => <div>GenderUnknownIcon</div>;
 export const GroupIcon = () => <div>GroupIcon</div>;
 export const GroupAccessIcon = () => <div>GroupAccessIcon</div>;
 export const HospitalBedIcon = () => <div>HospitalBedIcon</div>;

packages/framework/esm-styleguide/src/icons/icon-registration.ts

@@ -29,6 +29,10 @@ import download from './svgs/download.svg';
 import edit from './svgs/edit.svg';
 import eventSchedule from './svgs/event-schedule.svg';
 import events from './svgs/events.svg';
+import genderFemale from './svgs/gender-female.svg';
+import genderMale from './svgs/gender-male.svg';
+import genderTransgender from './svgs/gender-transgender.svg';
+import genderUnknown from './svgs/gender-unknown.svg';
 import group from './svgs/group.svg';
 import groupAccess from './svgs/group-access.svg';
 import hospitalBed from './svgs/hospital-bed.svg';
@@ -109,6 +113,10 @@ export function setupIcons() {
   addSvg('omrs-icon-edit', edit);
   addSvg('omrs-icon-event-schedule', eventSchedule);
   addSvg('omrs-icon-events', events);
+  addSvg('omrs-icon-gender-female', genderFemale);
+  addSvg('omrs-icon-gender-male', genderMale);
+  addSvg('omrs-icon-gender-transgender', genderTransgender);
+  addSvg('omrs-icon-gender-unknown', genderUnknown);
   addSvg('omrs-icon-group', group);
   addSvg('omrs-icon-group-access', groupAccess);
   addSvg('omrs-icon-hospital-bed', hospitalBed);

packages/framework/esm-styleguide/src/icons/icons.tsx

@@ -249,6 +249,35 @@ export const EventsIcon = memo(
   }),
 );
 
+/**
+ */
+export const GenderFemaleIcon = memo(
+  forwardRef<SVGSVGElement, IconProps>(function GenderFemaleIcon(props, ref) {
+    return <Icon ref={ref} icon="omrs-icon-gender-female" iconProps={props} />;
+  }),
+);
+/**
+ */
+export const GenderMaleIcon = memo(
+  forwardRef<SVGSVGElement, IconProps>(function GenderMaleIcon(props, ref) {
+    return <Icon ref={ref} icon="omrs-icon-gender-male" iconProps={props} />;
+  }),
+);
+/**
+ */
+export const GenderTransgenderIcon = memo(
+  forwardRef<SVGSVGElement, IconProps>(function GenderTransgenderIcon(props, ref) {
+    return <Icon ref={ref} icon="omrs-icon-gender-transgender" iconProps={props} />;
+  }),
+);
+/**
+ */
+export const GenderUnknownIcon = memo(
+  forwardRef<SVGSVGElement, IconProps>(function GenderUnknownIcon(props, ref) {
+    return <Icon ref={ref} icon="omrs-icon-gender-unknown" iconProps={props} />;
+  }),
+);
+
 /**
  */
 export const GroupIcon = memo(