From 8fc28ef57660343d936f22981218d741cf055bb9 Mon Sep 17 00:00:00 2001 From: Rajitha Pathiraja Date: Mon, 21 Sep 2026 13:53:30 +0800 Subject: [PATCH 1/2] [MOL-22572][RP] feat: add mobile, tablet-vertical and desktop icons --- assets/desktop-fill.svg | 3 +++ assets/desktop.svg | 3 +++ assets/mobile-fill.svg | 3 +++ assets/mobile.svg | 3 +++ assets/tablet-vertical-fill.svg | 5 +++++ assets/tablet-vertical.svg | 6 ++++++ package-lock.json | 4 ++-- package.json | 2 +- src/desktop-fill.tsx | 18 ++++++++++++++++++ src/desktop.tsx | 18 ++++++++++++++++++ src/index.ts | 6 ++++++ src/mobile-fill.tsx | 18 ++++++++++++++++++ src/mobile.tsx | 18 ++++++++++++++++++ src/tablet-vertical-fill.tsx | 32 ++++++++++++++++++++++++++++++++ src/tablet-vertical.tsx | 32 ++++++++++++++++++++++++++++++++ stories/icon/data.tsx | 15 +++++++++++++++ 16 files changed, 183 insertions(+), 3 deletions(-) create mode 100644 assets/desktop-fill.svg create mode 100644 assets/desktop.svg create mode 100644 assets/mobile-fill.svg create mode 100644 assets/mobile.svg create mode 100644 assets/tablet-vertical-fill.svg create mode 100644 assets/tablet-vertical.svg create mode 100644 src/desktop-fill.tsx create mode 100644 src/desktop.tsx create mode 100644 src/mobile-fill.tsx create mode 100644 src/mobile.tsx create mode 100644 src/tablet-vertical-fill.tsx create mode 100644 src/tablet-vertical.tsx diff --git a/assets/desktop-fill.svg b/assets/desktop-fill.svg new file mode 100644 index 0000000..32100df --- /dev/null +++ b/assets/desktop-fill.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/desktop.svg b/assets/desktop.svg new file mode 100644 index 0000000..d0faaba --- /dev/null +++ b/assets/desktop.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/mobile-fill.svg b/assets/mobile-fill.svg new file mode 100644 index 0000000..e8c6c9a --- /dev/null +++ b/assets/mobile-fill.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/mobile.svg b/assets/mobile.svg new file mode 100644 index 0000000..111ab62 --- /dev/null +++ b/assets/mobile.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/tablet-vertical-fill.svg b/assets/tablet-vertical-fill.svg new file mode 100644 index 0000000..bf89bb6 --- /dev/null +++ b/assets/tablet-vertical-fill.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/assets/tablet-vertical.svg b/assets/tablet-vertical.svg new file mode 100644 index 0000000..56fc572 --- /dev/null +++ b/assets/tablet-vertical.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/package-lock.json b/package-lock.json index 75653ff..84f9148 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@lifesg/react-icons", - "version": "1.21.0", + "version": "1.22.0", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@lifesg/react-icons", - "version": "1.21.0", + "version": "1.22.0", "license": "ISC", "devDependencies": { "@babel/core": "^7.17.8", diff --git a/package.json b/package.json index dd15bd3..dc9de7f 100644 --- a/package.json +++ b/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", diff --git a/src/desktop-fill.tsx b/src/desktop-fill.tsx new file mode 100644 index 0000000..ab375df --- /dev/null +++ b/src/desktop-fill.tsx @@ -0,0 +1,18 @@ +import * as React from "react"; +import { SVGProps } from "react"; +export const DesktopFillIcon = (props: SVGProps) => ( + + + +); +DesktopFillIcon.displayName = "DesktopFillIcon"; diff --git a/src/desktop.tsx b/src/desktop.tsx new file mode 100644 index 0000000..bc1a3c3 --- /dev/null +++ b/src/desktop.tsx @@ -0,0 +1,18 @@ +import * as React from "react"; +import { SVGProps } from "react"; +export const DesktopIcon = (props: SVGProps) => ( + + + +); +DesktopIcon.displayName = "DesktopIcon"; diff --git a/src/index.ts b/src/index.ts index e14be0f..3a2ab14 100644 --- a/src/index.ts +++ b/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"; diff --git a/src/mobile-fill.tsx b/src/mobile-fill.tsx new file mode 100644 index 0000000..74e9bb6 --- /dev/null +++ b/src/mobile-fill.tsx @@ -0,0 +1,18 @@ +import * as React from "react"; +import { SVGProps } from "react"; +export const MobileFillIcon = (props: SVGProps) => ( + + + +); +MobileFillIcon.displayName = "MobileFillIcon"; diff --git a/src/mobile.tsx b/src/mobile.tsx new file mode 100644 index 0000000..48405ed --- /dev/null +++ b/src/mobile.tsx @@ -0,0 +1,18 @@ +import * as React from "react"; +import { SVGProps } from "react"; +export const MobileIcon = (props: SVGProps) => ( + + + +); +MobileIcon.displayName = "MobileIcon"; diff --git a/src/tablet-vertical-fill.tsx b/src/tablet-vertical-fill.tsx new file mode 100644 index 0000000..e836fe1 --- /dev/null +++ b/src/tablet-vertical-fill.tsx @@ -0,0 +1,32 @@ +import * as React from "react"; +import { SVGProps } from "react"; +export const TabletVerticalFillIcon = (props: SVGProps) => ( + + + + + +); +TabletVerticalFillIcon.displayName = "TabletVerticalFillIcon"; diff --git a/src/tablet-vertical.tsx b/src/tablet-vertical.tsx new file mode 100644 index 0000000..1543fed --- /dev/null +++ b/src/tablet-vertical.tsx @@ -0,0 +1,32 @@ +import * as React from "react"; +import { SVGProps } from "react"; +export const TabletVerticalIcon = (props: SVGProps) => ( + + + + + + +); +TabletVerticalIcon.displayName = "TabletVerticalIcon"; diff --git a/stories/icon/data.tsx b/stories/icon/data.tsx index 700eb70..46f92da 100644 --- a/stories/icon/data.tsx +++ b/stories/icon/data.tsx @@ -94,6 +94,8 @@ import { CrossCircleFillIcon, CrossCircleIcon, CrossIcon, + DesktopFillIcon, + DesktopIcon, DocFillIcon, DocIcon, DocPencilFillIcon, @@ -174,6 +176,8 @@ import { MinusIcon, MinusSquareFillIcon, MinusSquareIcon, + MobileFillIcon, + MobileIcon, MultiChevronDownUpIcon, MultiChevronUpDownIcon, MultiChevronUpDownSquareFillIcon, @@ -257,6 +261,8 @@ import { TableRemoveRowIcon, TabletFillIcon, TabletIcon, + TabletVerticalFillIcon, + TabletVerticalIcon, TextCompareFillIcon, TextCompareIcon, TextFillIcon, @@ -404,6 +410,9 @@ export const ICONS: JSX.Element[] = [ , , , + // Desktop + , + , // Download , // Doc @@ -522,6 +531,9 @@ export const ICONS: JSX.Element[] = [ , , , + // Mobile + , + , // Multi Chevron , , @@ -639,6 +651,9 @@ export const ICONS: JSX.Element[] = [ //Tablet , , + // Tablet Vertical + , + , // Text , , From d4a0253d3e1a579101a6bdb0d4d5c74ae7f2ea46 Mon Sep 17 00:00:00 2001 From: Rajitha Pathiraja Date: Mon, 21 Sep 2026 17:44:18 +0800 Subject: [PATCH 2/2] [MOL-22572][RP] fix: update mobile and mobile-fill icons to latest Figma --- assets/mobile-fill.svg | 4 +++- assets/mobile.svg | 4 +++- src/mobile-fill.tsx | 14 +++++++++++++- src/mobile.tsx | 12 +++++++++++- 4 files changed, 30 insertions(+), 4 deletions(-) diff --git a/assets/mobile-fill.svg b/assets/mobile-fill.svg index e8c6c9a..8e57a5d 100644 --- a/assets/mobile-fill.svg +++ b/assets/mobile-fill.svg @@ -1,3 +1,5 @@ - + + + diff --git a/assets/mobile.svg b/assets/mobile.svg index 111ab62..43b398a 100644 --- a/assets/mobile.svg +++ b/assets/mobile.svg @@ -1,3 +1,5 @@ - + + + diff --git a/src/mobile-fill.tsx b/src/mobile-fill.tsx index 74e9bb6..80b32dd 100644 --- a/src/mobile-fill.tsx +++ b/src/mobile-fill.tsx @@ -10,7 +10,19 @@ export const MobileFillIcon = (props: SVGProps) => ( {...props} > + + diff --git a/src/mobile.tsx b/src/mobile.tsx index 48405ed..ce8bc00 100644 --- a/src/mobile.tsx +++ b/src/mobile.tsx @@ -10,7 +10,17 @@ export const MobileIcon = (props: SVGProps) => ( {...props} > + +