[COMMPORTAL-907][JW] add Heart and HeartFill icons

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@lifesg/react-icons",
-    "version": "1.13.0",
+    "version": "1.14.0",
     "description": "An icon component library for LifeSG and BookingSG web apps",
     "main": "dist/cjs/index.js",
     "module": "dist/index.js",

src/heart-fill.tsx

@@ -0,0 +1,18 @@
+import * as React from "react";
+import { SVGProps } from "react";
+export const HeartFillIcon = (props: SVGProps<SVGSVGElement>) => (
+    <svg
+        width="1em"
+        height="1em"
+        viewBox="0 0 20 20"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        {...props}
+    >
+        <path
+            d="M10 16.6283C9.81944 16.6283 9.64236 16.5971 9.46875 16.5346C9.29514 16.4721 9.13194 16.3714 8.97917 16.2325L7.75 15.1075C6.23611 13.7603 4.89931 12.4443 3.73958 11.1596C2.57986 9.87484 2 8.47554 2 6.96165C2 5.73943 2.41667 4.71859 3.25 3.89915C4.08333 3.07971 5.11806 2.66998 6.35417 2.66998C7.0625 2.66998 7.73264 2.81929 8.36458 3.1179C8.99653 3.41651 9.54167 3.84359 10 4.39915C10.4861 3.84359 11.0382 3.41651 11.6562 3.1179C12.2743 2.81929 12.9375 2.66998 13.6458 2.66998C14.8819 2.66998 15.9167 3.07971 16.75 3.89915C17.5833 4.71859 18 5.73943 18 6.96165C18 8.47554 17.4201 9.87484 16.2604 11.1596C15.1007 12.4443 13.7639 13.7603 12.25 15.1075L11.0208 16.2325C10.8681 16.3714 10.7049 16.4721 10.5312 16.5346C10.3576 16.5971 10.1806 16.6283 10 16.6283Z"
+            fill="currentColor"
+        />
+    </svg>
+);
+HeartFillIcon.displayName = "HeartFillIcon";

src/heart.tsx

@@ -0,0 +1,18 @@
+import * as React from "react";
+import { SVGProps } from "react";
+export const HeartIcon = (props: SVGProps<SVGSVGElement>) => (
+    <svg
+        width="1em"
+        height="1em"
+        viewBox="0 0 20 20"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        {...props}
+    >
+        <path
+            d="M10 16.6283C9.81944 16.6283 9.64236 16.5971 9.46875 16.5346C9.29514 16.4721 9.13194 16.3714 8.97917 16.2325L7.75 15.1075C6.23611 13.7603 4.89931 12.4443 3.73958 11.1596C2.57986 9.87484 2 8.47554 2 6.96165C2 5.73918 2.41563 4.71828 3.24688 3.89896C4.07813 3.07964 5.11389 2.66998 6.35417 2.66998C7.06524 2.66998 7.73606 2.81929 8.36665 3.1179C8.99722 3.41651 9.54167 3.84359 10 4.39915C10.4861 3.84359 11.0393 3.41651 11.6596 3.1179C12.2799 2.81929 12.9397 2.66998 13.6392 2.66998C14.8797 2.66998 15.9167 3.07964 16.75 3.89896C17.5833 4.71828 18 5.73918 18 6.96165C18 8.47554 17.4201 9.87484 16.2604 11.1596C15.1007 12.4443 13.7639 13.7603 12.25 15.1075L11.0208 16.2325C10.8681 16.3714 10.7049 16.4721 10.5312 16.5346C10.3576 16.5971 10.1806 16.6283 10 16.6283ZM9.29167 5.96165C8.95833 5.39221 8.54167 4.95123 8.04167 4.63873C7.54167 4.32623 6.97917 4.16998 6.35417 4.16998C5.53869 4.16998 4.85913 4.43387 4.31548 4.96165C3.77183 5.48943 3.5 6.15882 3.5 6.96984C3.5 7.67271 3.75 8.41304 4.25 9.19082C4.75 9.96859 5.34722 10.729 6.04167 11.4721C6.73611 12.2151 7.45139 12.9061 8.1875 13.545C8.92361 14.1839 9.52778 14.7116 10 15.1283C10.4722 14.7116 11.0764 14.1839 11.8125 13.545C12.5486 12.9061 13.2639 12.2151 13.9583 11.4721C14.6528 10.729 15.25 9.96859 15.75 9.19082C16.25 8.41304 16.5 7.67271 16.5 6.96984C16.5 6.15882 16.2282 5.48943 15.6845 4.96165C15.1409 4.43387 14.4613 4.16998 13.6458 4.16998C13.0208 4.16998 12.4549 4.32623 11.9479 4.63873C11.441 4.95123 11.0208 5.39221 10.6875 5.96165C10.6181 6.10054 10.5205 6.20123 10.3948 6.26373C10.2692 6.32623 10.1372 6.35748 9.999 6.35748C9.86078 6.35748 9.72569 6.32623 9.59375 6.26373C9.46181 6.20123 9.36111 6.10054 9.29167 5.96165Z"
+            fill="currentColor"
+        />
+    </svg>
+);
+HeartIcon.displayName = "HeartIcon";

src/index.ts

@@ -112,6 +112,8 @@ export * from "./fullscreen-open";
 export * from "./gear-fill";
 export * from "./gear";
 export * from "./globe";
+export * from "./heart-fill";
+export * from "./heart";
 export * from "./home-office-fill";
 export * from "./home-office";
 export * from "./house-fill";

stories/icon/data.tsx

@@ -110,6 +110,8 @@ import {
     GearFillIcon,
     GearIcon,
     GlobeIcon,
+    HeartFillIcon,
+    HeartIcon,
     HomeOfficeFillIcon,
     HomeOfficeIcon,
     HouseFillIcon,
@@ -368,6 +370,9 @@ export const ICONS: JSX.Element[] = [
     <GearFillIcon key="GearFillIcon" />,
     // Globe
     <GlobeIcon key="GlobeIcon" />,
+    // Heart
+    <HeartFillIcon key="HeartFillIcon" />,
+    <HeartIcon key="HeartIcon" />,
     // HomeOffice
     <HomeOfficeIcon key="HomeOffice" />,
     <HomeOfficeFillIcon key="HomeOfficeFill" />,