[MOL-22572][RP] feat: add mobile, tablet-vertical and desktop icons

package.json

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

src/desktop-fill.tsx

@@ -0,0 +1,18 @@
+import * as React from "react";
+import { SVGProps } from "react";
+export const DesktopFillIcon = (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="M8.5 15.5048V14H3.5C3.0875 14 2.73438 13.8531 2.44062 13.5594C2.14687 13.2656 2 12.9125 2 12.5V4.5C2 4.0875 2.14687 3.73438 2.44062 3.44063C2.73438 3.14688 3.0875 3 3.5 3H16.5C16.9125 3 17.2656 3.14688 17.5594 3.44063C17.8531 3.73438 18 4.0875 18 4.5V12.5C18 12.9125 17.8531 13.2656 17.5594 13.5594C17.2656 13.8531 16.9125 14 16.5 14H11.5V15.5H12.25C12.4625 15.5 12.6406 15.5715 12.7844 15.7144C12.9281 15.8573 13 16.0344 13 16.2456C13 16.4569 12.9282 16.6354 12.7846 16.7812C12.641 16.9271 12.4631 17 12.2508 17H7.75583C7.54361 17 7.36458 16.9285 7.21875 16.7856C7.07292 16.6427 7 16.4656 7 16.2544C7 16.0431 7.07187 15.8654 7.21562 15.7213C7.35938 15.5769 7.5375 15.5048 7.75 15.5048H8.5Z"
+            fill="currentColor"
+        />
+    </svg>
+);
+DesktopFillIcon.displayName = "DesktopFillIcon";

src/desktop.tsx

@@ -0,0 +1,18 @@
+import * as React from "react";
+import { SVGProps } from "react";
+export const DesktopIcon = (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="M8.5 15.5048V14H3.5C3.0875 14 2.73438 13.8531 2.44062 13.5594C2.14687 13.2656 2 12.9125 2 12.5V4.5C2 4.0875 2.14687 3.73438 2.44062 3.44063C2.73438 3.14688 3.0875 3 3.5 3H16.5C16.9125 3 17.2656 3.14688 17.5594 3.44063C17.8531 3.73438 18 4.0875 18 4.5V12.5C18 12.9125 17.8531 13.2656 17.5594 13.5594C17.2656 13.8531 16.9125 14 16.5 14H11.5V15.5H12.25C12.4625 15.5 12.6406 15.5715 12.7844 15.7144C12.9281 15.8573 13 16.0344 13 16.2456C13 16.4569 12.9282 16.6354 12.7846 16.7812C12.641 16.9271 12.4631 17 12.2508 17H7.75583C7.54361 17 7.36458 16.9285 7.21875 16.7856C7.07292 16.6427 7 16.4656 7 16.2544C7 16.0431 7.07187 15.8654 7.21562 15.7213C7.35938 15.5769 7.5375 15.5048 7.75 15.5048H8.5ZM3.5 12.5H16.5V4.5H3.5V12.5Z"
+            fill="currentColor"
+        />
+    </svg>
+);
+DesktopIcon.displayName = "DesktopIcon";

src/index.ts

@@ -96,6 +96,8 @@ export * from "./copy";
 export * from "./cross-circle-fill";
 export * from "./cross-circle";
 export * from "./cross";
+export * from "./desktop-fill";
+export * from "./desktop";
 export * from "./doc-fill";
 export * from "./doc-pencil-fill";
 export * from "./doc-pencil";
@@ -176,6 +178,8 @@ export * from "./minus-circle";
 export * from "./minus-square-fill";
 export * from "./minus-square";
 export * from "./minus";
+export * from "./mobile-fill";
+export * from "./mobile";
 export * from "./multi-chevron-down-up";
 export * from "./multi-chevron-up-down-square-fill";
 export * from "./multi-chevron-up-down-square";
@@ -258,6 +262,8 @@ export * from "./table-remove-column";
 export * from "./table-remove-row";
 export * from "./table";
 export * from "./tablet-fill";
+export * from "./tablet-vertical-fill";
+export * from "./tablet-vertical";
 export * from "./tablet";
 export * from "./text-compare-fill";
 export * from "./text-compare";

src/mobile-fill.tsx

@@ -0,0 +1,30 @@
+import * as React from "react";
+import { SVGProps } from "react";
+export const MobileFillIcon = (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="M11.7129 2.75391C11.7128 2.66324 11.6994 2.57861 11.6729 2.5H7.5C7.47518 2.57598 7.46289 2.65832 7.46289 2.74609C7.463 2.95714 7.53507 3.13552 7.67871 3.28125C7.82243 3.42698 8.00047 3.5 8.21289 3.5H10.9629C11.1753 3.49997 11.3533 3.42805 11.4971 3.28516C11.6407 3.14227 11.7129 2.96506 11.7129 2.75391Z"
+            fill="currentColor"
+        />
+        <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M15 17.5C15 17.9125 14.8533 18.2658 14.5596 18.5596C14.2658 18.8533 13.9125 19 13.5 19H5.5C5.0875 19 4.73418 18.8533 4.44043 18.5596C4.14668 18.2658 4 17.9125 4 17.5V2.5C4 2.04167 4.13542 1.67708 4.40625 1.40625C4.67708 1.13542 5.04167 1 5.5 1H13.5C13.9125 1 14.2658 1.14668 14.5596 1.44043C14.8533 1.73418 15 2.0875 15 2.5V5.5C15.2778 5.5 15.5136 5.59755 15.708 5.79199C15.9025 5.98644 16 6.22222 16 6.5V8.5C16 8.77778 15.9025 9.01356 15.708 9.20801C15.5136 9.40245 15.2778 9.5 15 9.5V17.5ZM13.5 15.5059V17.5H5.5V15.5059H13.5ZM5.5 2.5H7.5H11.6729H13.5V14V14.0059H5.5V14V2.5Z"
+            fill="currentColor"
+        />
+        <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M13.5 17.5V15.5059H5.5V17.5H13.5ZM10.8281 16.1465C10.7134 16.049 10.571 16 10.4014 16H8.60352C8.43391 16 8.29149 16.048 8.17676 16.1436C8.1098 16.1993 8.06205 16.2626 8.03418 16.334C8.01443 16.3846 8.00494 16.4395 8.00488 16.498C8.00488 16.6393 8.06206 16.759 8.17676 16.8564C8.29149 16.9539 8.43391 17.0029 8.60352 17.0029H10.4014C10.571 17.0029 10.7134 16.9549 10.8281 16.8594C10.9427 16.7639 11 16.645 11 16.5039C10.9999 16.4434 10.9889 16.3865 10.9678 16.334C10.9397 16.2645 10.8933 16.2019 10.8281 16.1465Z"
+            fill="currentColor"
+        />
+    </svg>
+);
+MobileFillIcon.displayName = "MobileFillIcon";

src/mobile.tsx

@@ -0,0 +1,28 @@
+import * as React from "react";
+import { SVGProps } from "react";
+export const MobileIcon = (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="M11.7129 2.75391C11.7128 2.66324 11.6994 2.57861 11.6729 2.5H7.5C7.47518 2.57598 7.46289 2.65832 7.46289 2.74609C7.463 2.95714 7.53507 3.13552 7.67871 3.28125C7.82243 3.42698 8.00047 3.5 8.21289 3.5H10.9629C11.1753 3.49997 11.3533 3.42805 11.4971 3.28516C11.6407 3.14227 11.7129 2.96506 11.7129 2.75391Z"
+            fill="currentColor"
+        />
+        <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M15 17.5C15 17.9125 14.8533 18.2658 14.5596 18.5596C14.2658 18.8533 13.9125 19 13.5 19H5.5C5.0875 19 4.73418 18.8533 4.44043 18.5596C4.14668 18.2658 4 17.9125 4 17.5V2.5C4 2.04167 4.13542 1.67708 4.40625 1.40625C4.67708 1.13542 5.04167 1 5.5 1H13.5C13.9125 1 14.2658 1.14668 14.5596 1.44043C14.8533 1.73418 15 2.0875 15 2.5V5.5C15.2778 5.5 15.5136 5.59755 15.708 5.79199C15.9025 5.98644 16 6.22222 16 6.5V8.5C16 8.77778 15.9025 9.01356 15.708 9.20801C15.5136 9.40245 15.2778 9.5 15 9.5V17.5ZM13.5 15.5059V17.5H5.5V15.5059H13.5ZM5.5 2.5H7.5H11.6729H13.5V14V14.0059H5.5V14V2.5Z"
+            fill="currentColor"
+        />
+        <path
+            d="M10.4014 16C10.571 16 10.7134 16.049 10.8281 16.1465C10.8933 16.2019 10.9397 16.2645 10.9678 16.334C10.9889 16.3865 10.9999 16.4434 11 16.5039C11 16.645 10.9427 16.7639 10.8281 16.8594C10.7134 16.9549 10.571 17.0029 10.4014 17.0029H8.60352C8.43391 17.0029 8.29149 16.9539 8.17676 16.8564C8.06206 16.759 8.00488 16.6393 8.00488 16.498C8.00494 16.4395 8.01443 16.3846 8.03418 16.334C8.06205 16.2626 8.1098 16.1993 8.17676 16.1436C8.29149 16.048 8.43391 16 8.60352 16H10.4014Z"
+            fill="currentColor"
+        />
+    </svg>
+);
+MobileIcon.displayName = "MobileIcon";

src/tablet-vertical-fill.tsx

@@ -0,0 +1,32 @@
+import * as React from "react";
+import { SVGProps } from "react";
+export const TabletVerticalFillIcon = (props: SVGProps<SVGSVGElement>) => (
+    <svg
+        width="1em"
+        height="1em"
+        viewBox="0 0 20 20"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        {...props}
+    >
+        <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M15.9702 0.55957C16.3827 0.55957 16.736 0.70625 17.0298 1C17.3235 1.29375 17.4702 1.64707 17.4702 2.05957L17.5298 17.9404C17.5298 18.3528 17.3829 18.7063 17.0894 19C16.7957 19.2937 16.4422 19.4404 16.0298 19.4404H4.02979C3.61729 19.4404 3.26396 19.2938 2.97021 19C2.67649 18.7063 2.52979 18.3529 2.52979 17.9404L2.47021 2.05957C2.47021 1.64716 2.61703 1.29371 2.91064 1C3.20435 0.706296 3.5578 0.559617 3.97021 0.55957H15.9702ZM4.02979 17.9404H16.0298V14.9404H4.02979V17.9404ZM4.02979 13.4404H16.0298V5.94043H4.02979V13.4404ZM4.02979 4.44043H16.0298V2H4.02979V4.44043Z"
+            fill="currentColor"
+        />
+        <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M4.02979 4.44043H16.0298V2H4.02979V4.44043ZM8.5 3.2998C8.49987 3.02377 8.27606 2.7998 8 2.7998H7C6.72394 2.7998 6.50013 3.02377 6.5 3.2998C6.5 3.57595 6.72386 3.7998 7 3.7998H8C8.27614 3.7998 8.5 3.57595 8.5 3.2998ZM13.5298 3.2998C13.5297 3.02377 13.3058 2.7998 13.0298 2.7998H10.0298C9.75372 2.7998 9.52992 3.02377 9.52979 3.2998C9.52979 3.57595 9.75364 3.7998 10.0298 3.7998H13.0298C13.3059 3.7998 13.5298 3.57595 13.5298 3.2998Z"
+            fill="currentColor"
+        />
+        <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M4.02979 17.9404H16.0298V14.9404H4.02979V17.9404ZM11.3794 16.1455C11.2795 16.0485 11.163 16 11.0298 16H9.104C8.97067 16 8.85342 16.0483 8.75342 16.1455C8.65347 16.2427 8.604 16.3611 8.604 16.5C8.604 16.6389 8.65347 16.7573 8.75342 16.8545C8.85342 16.9517 8.97067 17 9.104 17H11.0298C11.163 17 11.2795 16.9515 11.3794 16.8545C11.4794 16.7573 11.5298 16.6389 11.5298 16.5C11.5298 16.3611 11.4794 16.2427 11.3794 16.1455Z"
+            fill="currentColor"
+        />
+    </svg>
+);
+TabletVerticalFillIcon.displayName = "TabletVerticalFillIcon";