Skip to content

[BOOKINGSG-7495][LS] Add id-card and id-card-fill icons #35

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
qroll merged 2 commits into from
Jun 5, 2025
Merged

[BOOKINGSG-7495][LS] Add id-card and id-card-fill icons #35

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4426e38
[BOOKINGSG-7495][LS] Add id-card and id-card-fill icons
lionel-sim Jun 5, 2025
930fbc6
[MISC][RL] v1.12.0
Jun 5, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions assets/id-card-fill.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions assets/id-card.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 2 additions & 2 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@lifesg/react-icons",
"version": "1.11.0",
"version": "1.12.0",
"description": "An icon component library for LifeSG and BookingSG web apps",
"main": "dist/cjs/index.js",
"module": "dist/index.js",
Expand Down
18 changes: 18 additions & 0 deletions src/id-card-fill.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import * as React from "react";
import { SVGProps } from "react";
export const IdCardFillIcon = (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="M14.75 11C14.9625 11 15.1406 10.9285 15.2844 10.7856C15.4281 10.6427 15.5 10.4656 15.5 10.2544C15.5 10.0431 15.4281 9.86458 15.2844 9.71875C15.1406 9.57292 14.9625 9.5 14.75 9.5H11.75C11.5375 9.5 11.3594 9.57146 11.2156 9.71438C11.0719 9.85729 11 10.0344 11 10.2456C11 10.4569 11.0719 10.6354 11.2156 10.7812C11.3594 10.9271 11.5375 11 11.75 11H14.75ZM14.75 8.5C14.9625 8.5 15.1406 8.42854 15.2844 8.28563C15.4281 8.14271 15.5 7.96563 15.5 7.75438C15.5 7.54313 15.4281 7.36458 15.2844 7.21875C15.1406 7.07292 14.9625 7 14.75 7H11.75C11.5375 7 11.3594 7.07146 11.2156 7.21437C11.0719 7.35729 11 7.53437 11 7.74562C11 7.95687 11.0719 8.13542 11.2156 8.28125C11.3594 8.42708 11.5375 8.5 11.75 8.5H14.75ZM6.98958 10.5C6.59375 10.5 6.22569 10.5382 5.88542 10.6146C5.54514 10.691 5.22222 10.8056 4.91667 10.9583C4.63889 11.1111 4.41667 11.3065 4.25 11.5444C4.08333 11.7824 4 12.0385 4 12.3125C4 12.5089 4.05903 12.6726 4.17708 12.8035C4.29514 12.9345 4.43056 13 4.58333 13H9.41667C9.56944 13 9.70486 12.9351 9.82292 12.8052C9.94097 12.6753 10 12.5111 10 12.3125C10 12.0347 9.91667 11.7812 9.75 11.5521C9.58333 11.3229 9.36111 11.1319 9.08333 10.9792C8.76389 10.8264 8.43403 10.7083 8.09375 10.625C7.75347 10.5417 7.38542 10.5 6.98958 10.5ZM7.00437 10C7.41813 10 7.77083 9.85271 8.0625 9.55813C8.35417 9.26354 8.5 8.90937 8.5 8.49562C8.5 8.08187 8.35271 7.72917 8.05813 7.4375C7.76354 7.14583 7.40938 7 6.99563 7C6.58188 7 6.22917 7.14729 5.9375 7.44188C5.64583 7.73646 5.5 8.09063 5.5 8.50438C5.5 8.91813 5.64729 9.27083 5.94187 9.5625C6.23646 9.85417 6.59062 10 7.00437 10ZM3.5 16C3.0875 16 2.73438 15.8531 2.44063 15.5592C2.14688 15.2653 2 14.9119 2 14.4992V5.49417C2 5.08139 2.14688 4.72917 2.44063 4.4375C2.73438 4.14583 3.0875 4 3.5 4H16.5C16.9125 4 17.2656 4.14694 17.5594 4.44083C17.8531 4.73472 18 5.08806 18 5.50083V14.5058C18 14.9186 17.8531 15.2708 17.5594 15.5625C17.2656 15.8542 16.9125 16 16.5 16H3.5Z"
fill="currentColor"
/>
</svg>
);
IdCardFillIcon.displayName = "IdCardFillIcon";
18 changes: 18 additions & 0 deletions src/id-card.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import * as React from "react";
import { SVGProps } from "react";
export const IdCardIcon = (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="M14.75 11C14.9625 11 15.1406 10.9285 15.2844 10.7856C15.4281 10.6427 15.5 10.4656 15.5 10.2544C15.5 10.0431 15.4281 9.86458 15.2844 9.71875C15.1406 9.57292 14.9625 9.5 14.75 9.5H11.75C11.5375 9.5 11.3594 9.57146 11.2156 9.71438C11.0719 9.85729 11 10.0344 11 10.2456C11 10.4569 11.0719 10.6354 11.2156 10.7812C11.3594 10.9271 11.5375 11 11.75 11H14.75ZM14.75 8.5C14.9625 8.5 15.1406 8.42854 15.2844 8.28563C15.4281 8.14271 15.5 7.96563 15.5 7.75438C15.5 7.54313 15.4281 7.36458 15.2844 7.21875C15.1406 7.07292 14.9625 7 14.75 7H11.75C11.5375 7 11.3594 7.07146 11.2156 7.21437C11.0719 7.35729 11 7.53437 11 7.74562C11 7.95687 11.0719 8.13542 11.2156 8.28125C11.3594 8.42708 11.5375 8.5 11.75 8.5H14.75ZM6.98958 10.5C6.59375 10.5 6.22569 10.5382 5.88542 10.6146C5.54514 10.691 5.22222 10.8056 4.91667 10.9583C4.63889 11.1111 4.41667 11.3065 4.25 11.5444C4.08333 11.7824 4 12.0385 4 12.3125C4 12.5089 4.05903 12.6726 4.17708 12.8035C4.29514 12.9345 4.43056 13 4.58333 13H9.41667C9.56944 13 9.70486 12.9351 9.82292 12.8052C9.94097 12.6753 10 12.5111 10 12.3125C10 12.0347 9.91667 11.7812 9.75 11.5521C9.58333 11.3229 9.36111 11.1319 9.08333 10.9792C8.76389 10.8264 8.43403 10.7083 8.09375 10.625C7.75347 10.5417 7.38542 10.5 6.98958 10.5ZM7.00437 10C7.41813 10 7.77083 9.85271 8.0625 9.55813C8.35417 9.26354 8.5 8.90937 8.5 8.49562C8.5 8.08187 8.35271 7.72917 8.05813 7.4375C7.76354 7.14583 7.40938 7 6.99563 7C6.58188 7 6.22917 7.14729 5.9375 7.44188C5.64583 7.73646 5.5 8.09063 5.5 8.50438C5.5 8.91813 5.64729 9.27083 5.94187 9.5625C6.23646 9.85417 6.59062 10 7.00437 10ZM3.5 16C3.0875 16 2.73438 15.8531 2.44063 15.5592C2.14688 15.2653 2 14.9119 2 14.4992V5.49417C2 5.08139 2.14688 4.72917 2.44063 4.4375C2.73438 4.14583 3.0875 4 3.5 4H16.5C16.9125 4 17.2656 4.14694 17.5594 4.44083C17.8531 4.73472 18 5.08806 18 5.50083V14.5058C18 14.9186 17.8531 15.2708 17.5594 15.5625C17.2656 15.8542 16.9125 16 16.5 16H3.5ZM3.5 14.5H16.5V5.5H3.5V14.5Z"
fill="currentColor"
/>
</svg>
);
IdCardIcon.displayName = "IdCardIcon";
2 changes: 2 additions & 0 deletions src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -116,6 +116,8 @@ export * from "./house-fill";
export * from "./house";
export * from "./i-circle-fill";
export * from "./i-circle";
export * from "./id-card-fill";
export * from "./id-card";
export * from "./inbox-fill";
export * from "./inbox";
export * from "./language";
Expand Down
5 changes: 5 additions & 0 deletions stories/icon/data.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -114,6 +114,8 @@ import {
HouseIcon,
ICircleFillIcon,
ICircleIcon,
IdCardFillIcon,
IdCardIcon,
InboxFillIcon,
InboxIcon,
LanguageIcon,
Expand Down Expand Up @@ -370,6 +372,9 @@ export const ICONS: JSX.Element[] = [
// I-Circle
<ICircleIcon key="ICircleIcon" />,
<ICircleFillIcon key="ICircleFillIcon" />,
// Id Card
<IdCardIcon key="IdCardIcon" />,
<IdCardFillIcon key="IdCardFillIcon" />,
// Inbox
<InboxIcon key="InboxIcon" />,
<InboxFillIcon key="InboxFillIcon" />,
Expand Down
Loading