[MOL-21203][DN]Add star-outline icon

package.json

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

src/index.ts

@@ -212,6 +212,7 @@ export * from "./square-tick";
 export * from "./square";
 export * from "./star-fill";
 export * from "./star-half";
+export * from "./star-outline";
 export * from "./star";
 export * from "./tablet-fill";
 export * from "./tablet";

src/star-outline.tsx

@@ -0,0 +1,26 @@
+import * as React from "react";
+import { SVGProps } from "react";
+export const StarOutlineIcon = (props: SVGProps<SVGSVGElement>) => (
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="1em"
+        height="1em"
+        viewBox="0 0 24 24"
+        fill="none"
+        {...props}
+    >
+        <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M6.84157 12.2183C6.44912 12.2183 6.09438 11.9468 6.00527 11.5477C5.9033 11.086 6.19463 10.6286 6.65648 10.5259L9.40103 9.91602L11.251 6.58763C11.4806 6.17479 12.0025 6.0249 12.4163 6.2553C12.8302 6.48485 12.9793 7.00646 12.7497 7.42015L10.7129 11.0843C10.5938 11.2984 10.389 11.4509 10.1491 11.5048L7.02837 12.1978C6.96581 12.2115 6.90326 12.2183 6.84157 12.2183Z"
+            fill="currentColor"
+        />
+        <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M12.0003 18.7927C12.1434 18.7927 12.2874 18.8287 12.4159 18.9006L18.5083 22.2838L17.1587 15.5345C17.1021 15.2536 17.1904 14.9632 17.3926 14.7611L22.287 9.8687L16.0987 8.49401C15.8597 8.4409 15.6549 8.28844 15.5358 8.07432L11.9978 1.70874L8.46491 8.07432C8.34581 8.28844 8.14102 8.4409 7.90195 8.49401L1.71365 9.8687L6.60808 14.7611C6.8103 14.9632 6.89856 15.2536 6.842 15.5345L5.49158 22.2838L11.5848 18.9006C11.7133 18.8287 11.8572 18.7927 12.0003 18.7927ZM5.48987 23.9994C5.13598 23.9994 4.78467 23.8881 4.48219 23.6671C3.93637 23.2688 3.67931 22.6101 3.81126 21.9481L5.07172 15.6484L0.502042 11.0798C0.0590414 10.637 -0.106334 9.98947 0.068467 9.38906C0.243268 8.78865 0.732539 8.33213 1.34263 8.1968L7.1539 6.90604L10.5025 0.880492C10.8042 0.337465 11.3783 0 12.0003 0C12.6224 0 13.1965 0.337465 13.4981 0.880492L16.8468 6.90604L22.6581 8.1968C23.2682 8.33213 23.7574 8.78865 23.9322 9.38906C24.107 9.98947 23.9417 10.637 23.4986 11.0798L18.929 15.6484L20.1894 21.9472C20.3214 22.6101 20.0643 23.2688 19.5185 23.6671C18.9727 24.0662 18.2666 24.1099 17.6762 23.781L12.0003 20.629L6.32446 23.781C6.0614 23.9275 5.77435 23.9994 5.48987 23.9994Z"
+            fill="currentColor"
+        />
+    </svg>
+);
+StarOutlineIcon.displayName = "StarOutlineIcon";

stories/icon/data.tsx

@@ -211,6 +211,7 @@ import {
     StarFillIcon,
     StarHalfIcon,
     StarIcon,
+    StarOutlineIcon,
     TabletFillIcon,
     TabletIcon,
     TextFillIcon,
@@ -514,6 +515,7 @@ export const ICONS: JSX.Element[] = [
     <StarIcon key="StarIcon" />,
     <StarHalfIcon key="StarHalfIcon" />,
     <StarFillIcon key="StarFillIcon" />,
+    <StarOutlineIcon key="StarOutlineIcon" />,
     // Speaker
     <SpeakerIcon key="SpeakerIcon" />,
     <SpeakerFillIcon key="SpeakerFillIcon" />,