Skip to content

Commit

Permalink
feat: add flash,keyboard,list-search Icon. [DSSUP-197] (#2482)
Browse files Browse the repository at this point in the history 
* feat: add flash keyboard listsearch icon

* feat: added snap

* chore: update react native tests

* chore: added changeset

* chore: update to list-search
  • Loading branch information
@tewarig
tewarig authored Jan 17, 2025
1 parent 2326fa2 commit c228d8c
Show file tree
Hide file tree
Showing 22 changed files with 458 additions and 1 deletion.
5 changes: 5 additions & 0 deletions .changeset/pretty-coats-judge.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@razorpay/blade': minor
---

feat(blade): add flask,keyboard and list-search icons
8 changes: 7 additions & 1 deletion packages/blade/scripts/icons.json
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,11 @@
[
{
"ray": "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M3 3H7.5H9.74999L12 12L14.25 3H16.5H21V7.5V9.75L12 12L21 14.25V16.5V21H16.5H14.25L12 12L9.74999 21H7.5H3V16.5V14.25L12 12L3 9.75V7.5V3Z\" fill=\"#192839\"/>\n</svg>\n"
"list-search": "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M2.30005 6.05C2.30005 5.85109 2.37906 5.66032 2.51972 5.51967C2.66037 5.37902 2.85113 5.3 3.05005 5.3H19.55C19.749 5.3 19.9397 5.37902 20.0804 5.51967C20.221 5.66032 20.3 5.85109 20.3 6.05C20.3 6.24891 20.221 6.43968 20.0804 6.58033C19.9397 6.72098 19.749 6.8 19.55 6.8H3.05005C2.85113 6.8 2.66037 6.72098 2.51972 6.58033C2.37906 6.43968 2.30005 6.24891 2.30005 6.05ZM11.3 17.3H3.05005C2.85113 17.3 2.66037 17.379 2.51972 17.5197C2.37906 17.6603 2.30005 17.8511 2.30005 18.05C2.30005 18.2489 2.37906 18.4397 2.51972 18.5803C2.66037 18.721 2.85113 18.8 3.05005 18.8H11.3C11.499 18.8 11.6897 18.721 11.8304 18.5803C11.971 18.4397 12.05 18.2489 12.05 18.05C12.05 17.8511 11.971 17.6603 11.8304 17.5197C11.6897 17.379 11.499 17.3 11.3 17.3ZM21.5807 18.5806C21.511 18.6504 21.4283 18.7057 21.3372 18.7434C21.2462 18.7812 21.1486 18.8006 21.05 18.8006C20.9515 18.8006 20.8539 18.7812 20.7628 18.7434C20.6718 18.7057 20.5891 18.6504 20.5194 18.5806L18.6125 16.6775C17.8371 17.1891 16.8993 17.3947 15.9809 17.2543C15.0625 17.114 14.229 16.6377 13.6417 15.9179C13.0544 15.198 12.7553 14.2857 12.8022 13.3579C12.8491 12.43 13.2388 11.5526 13.8958 10.8957C14.5527 10.2388 15.4301 9.8491 16.3579 9.80216C17.2858 9.75522 18.198 10.0544 18.9179 10.6416C19.6378 11.2289 20.114 12.0625 20.2544 12.9809C20.3947 13.8993 20.1892 14.837 19.6775 15.6125L21.5807 17.5156C21.651 17.5853 21.7068 17.6683 21.7448 17.7597C21.7829 17.8511 21.8025 17.9491 21.8025 18.0481C21.8025 18.1471 21.7829 18.2452 21.7448 18.3366C21.7068 18.428 21.651 18.5109 21.5807 18.5806ZM16.55 15.8C16.9951 15.8 17.4301 15.668 17.8001 15.4208C18.1701 15.1736 18.4585 14.8222 18.6288 14.411C18.7991 13.9999 18.8436 13.5475 18.7568 13.111C18.67 12.6746 18.4557 12.2737 18.141 11.959C17.8264 11.6443 17.4255 11.43 16.989 11.3432C16.5525 11.2564 16.1001 11.301 15.689 11.4713C15.2779 11.6416 14.9265 11.93 14.6792 12.3C14.432 12.67 14.3 13.105 14.3 13.55C14.3 14.1467 14.5371 14.719 14.9591 15.141C15.381 15.5629 15.9533 15.8 16.55 15.8Z\" fill=\"#192839\"/>\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M2.00005 6.05C2.00005 5.77152 2.11067 5.50445 2.30758 5.30754C2.5045 5.11062 2.77157 5 3.05005 5H19.55C19.8285 5 20.0956 5.11062 20.2925 5.30754C20.4894 5.50445 20.6 5.77152 20.6 6.05C20.6 6.32848 20.4894 6.59555 20.2925 6.79246C20.0956 6.98938 19.8285 7.1 19.55 7.1H3.05005C2.77157 7.1 2.5045 6.98938 2.30758 6.79246C2.11067 6.59555 2.00005 6.32848 2.00005 6.05ZM9.80005 13.1H3.05005C2.77157 13.1 2.5045 12.9894 2.30758 12.7925C2.11067 12.5955 2.00005 12.3285 2.00005 12.05C2.00005 11.7715 2.11067 11.5045 2.30758 11.3075C2.5045 11.1106 2.77157 11 3.05005 11H9.80005C10.0785 11 10.3456 11.1106 10.5425 11.3075C10.7394 11.5045 10.85 11.7715 10.85 12.05C10.85 12.3285 10.7394 12.5955 10.5425 12.7925C10.3456 12.9894 10.0785 13.1 9.80005 13.1ZM3.05005 17H11.3C11.5785 17 11.8456 17.1106 12.0425 17.3075C12.2394 17.5045 12.35 17.7715 12.35 18.05C12.35 18.3285 12.2394 18.5955 12.0425 18.7925C11.8456 18.9894 11.5785 19.1 11.3 19.1H3.05005C2.77157 19.1 2.5045 18.9894 2.30758 18.7925C2.11067 18.5955 2.00005 18.3285 2.00005 18.05C2.00005 17.7715 2.11067 17.5045 2.30758 17.3075C2.5045 17.1106 2.77157 17 3.05005 17ZM21.7919 18.7936C21.6946 18.8908 21.5792 18.9679 21.4521 19.0206C21.3247 19.0734 21.188 19.1006 21.05 19.1006C20.9121 19.1006 20.7754 19.0734 20.648 19.0206C20.5205 18.9677 20.4047 18.8903 20.3072 18.7926L18.5683 17.0572C17.7743 17.5144 16.8461 17.69 15.9356 17.5509C14.9438 17.3993 14.0435 16.885 13.4092 16.1075C12.775 15.33 12.4519 14.3448 12.5026 13.3427C12.5533 12.3407 12.9741 11.3931 13.6836 10.6836C14.3931 9.9741 15.3407 9.55324 16.3428 9.50254C17.3449 9.45184 18.3301 9.77493 19.1075 10.4092C19.885 11.0434 20.3994 11.9437 20.5509 12.9356C20.6901 13.846 20.5144 14.7741 20.0573 15.568L21.7919 17.3026C21.8901 17.4001 21.9686 17.5166 22.0218 17.6443C22.0751 17.7723 22.1025 17.9095 22.1025 18.0481C22.1025 18.1867 22.0751 18.324 22.0218 18.4519C21.9685 18.5799 21.8903 18.696 21.7919 18.7936ZM19.6775 15.6125C20.1892 14.837 20.3947 13.8993 20.2544 12.9809C20.114 12.0625 19.6378 11.2289 18.9179 10.6416C18.198 10.0544 17.2858 9.75522 16.3579 9.80216C15.4301 9.8491 14.5527 10.2388 13.8958 10.8957C13.2388 11.5526 12.8491 12.43 12.8022 13.3579C12.7553 14.2857 13.0544 15.198 13.6417 15.9179C14.229 16.6377 15.0625 17.114 15.9809 17.2543C16.8993 17.3947 17.8371 17.1891 18.6125 16.6775L20.5194 18.5806C20.5891 18.6504 20.6718 18.7057 20.7628 18.7434C20.8539 18.7812 20.9515 18.8006 21.05 18.8006C21.1486 18.8006 21.2462 18.7812 21.3372 18.7434C21.4283 18.7057 21.511 18.6504 21.5807 18.5806C21.651 18.5109 21.7068 18.428 21.7448 18.3366C21.7829 18.2452 21.8025 18.1471 21.8025 18.0481C21.8025 17.9491 21.7829 17.8511 21.7448 17.7597C21.7068 17.6683 21.651 17.5853 21.5807 17.5156L19.6775 15.6125ZM16.55 15.5C16.9357 15.5 17.3127 15.3856 17.6334 15.1714C17.9541 14.9571 18.204 14.6526 18.3516 14.2962C18.4992 13.9399 18.5378 13.5478 18.4626 13.1696C18.3873 12.7913 18.2016 12.4439 17.9289 12.1711C17.6562 11.8984 17.3087 11.7127 16.9305 11.6375C16.5522 11.5622 16.1601 11.6008 15.8038 11.7484C15.4475 11.896 15.1429 12.146 14.9287 12.4666C14.7144 12.7873 14.6 13.1643 14.6 13.55C14.6 14.0672 14.8055 14.5632 15.1712 14.9289C15.5369 15.2946 16.0329 15.5 16.55 15.5ZM2.51972 5.51967C2.37906 5.66032 2.30005 5.85109 2.30005 6.05C2.30005 6.24891 2.37906 6.43968 2.51972 6.58033C2.66037 6.72098 2.85113 6.8 3.05005 6.8H19.55C19.749 6.8 19.9397 6.72098 20.0804 6.58033C20.221 6.43968 20.3 6.24891 20.3 6.05C20.3 5.85109 20.221 5.66032 20.0804 5.51967C19.9397 5.37902 19.749 5.3 19.55 5.3H3.05005C2.85113 5.3 2.66037 5.37902 2.51972 5.51967ZM3.05005 17.3H11.3C11.499 17.3 11.6897 17.379 11.8304 17.5197C11.971 17.6603 12.05 17.8511 12.05 18.05C12.05 18.2489 11.971 18.4397 11.8304 18.5803C11.6897 18.721 11.499 18.8 11.3 18.8H3.05005C2.85113 18.8 2.66037 18.721 2.51972 18.5803C2.37906 18.4397 2.30005 18.2489 2.30005 18.05C2.30005 17.8511 2.37906 17.6603 2.51972 17.5197C2.66037 17.379 2.85113 17.3 3.05005 17.3ZM17.8001 15.4208C17.4301 15.668 16.9951 15.8 16.55 15.8C15.9533 15.8 15.381 15.5629 14.9591 15.141C14.5371 14.719 14.3 14.1467 14.3 13.55C14.3 13.105 14.432 12.67 14.6792 12.3C14.9265 11.93 15.2779 11.6416 15.689 11.4713C16.1001 11.301 16.5525 11.2564 16.989 11.3432C17.4255 11.43 17.8264 11.6443 18.141 11.959C18.4557 12.2737 18.67 12.6746 18.7568 13.111C18.8436 13.5475 18.7991 13.9999 18.6288 14.411C18.4585 14.8222 18.1701 15.1736 17.8001 15.4208Z\" fill=\"#192839\"/>\n</svg>\n"
},
{
"flask": "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M8.50024 4H9.00025V9.01733L3.24969 18.5992C3.09029 18.8646 3.00418 19.1677 3.00016 19.4773C2.99614 19.7871 3.07444 20.0924 3.22705 20.362C3.37966 20.6316 3.60111 20.8559 3.86878 21.0119C4.13636 21.1679 4.44085 21.25 4.75056 21.25H19.7512C20.0608 21.2497 20.3648 21.1673 20.6322 21.0111C20.8996 20.8549 21.1207 20.6306 21.273 20.3611C21.4254 20.0915 21.5035 19.7863 21.4994 19.4767C21.4953 19.1671 21.4091 18.8642 21.2496 18.5988L15.5002 9.01737V4H16.0002C16.5525 4 17.0002 3.55228 17.0002 3C17.0002 2.44772 16.5525 2 16.0002 2H8.50024C7.94796 2 7.50024 2.44772 7.50024 3C7.50024 3.55228 7.94796 4 8.50024 4ZM11.0002 9.29437V4H13.5002V9.29437C13.5002 9.47563 13.5495 9.65348 13.6428 9.80891L17.0363 15.4642C16.0214 15.5851 14.5849 15.4364 12.702 14.483C11.2168 13.7316 9.90548 13.3801 8.77413 13.2807L10.8577 9.80897C10.951 9.65353 11.0002 9.47566 11.0002 9.29437ZM7.57785 15.274L5.19162 19.25H19.308L18.1323 17.2907C16.6446 17.6706 14.5183 17.6444 11.7988 16.2674C9.96949 15.3419 8.57037 15.1786 7.57785 15.274Z\" fill=\"#192839\"/>\n</svg>\n"
},
{
"keyboard": "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M4 5C3.44772 5 3 5.44772 3 6V18C3 18.5523 3.44772 19 4 19H20C20.5523 19 21 18.5523 21 18V6C21 5.44771 20.5523 5 20 5H4ZM1 6C1 4.34315 2.34315 3 4 3H20C21.6569 3 23 4.34315 23 6V18C23 19.6569 21.6569 21 20 21H4C2.34315 21 1 19.6569 1 18V6ZM5 8C5 7.44772 5.44772 7 6 7H6.01C6.56228 7 7.01 7.44772 7.01 8C7.01 8.55228 6.56228 9 6.01 9H6C5.44772 9 5 8.55228 5 8ZM9 8C9 7.44772 9.44772 7 10 7H10.01C10.5623 7 11.01 7.44772 11.01 8C11.01 8.55228 10.5623 9 10.01 9H10C9.44772 9 9 8.55228 9 8ZM13 8C13 7.44772 13.4477 7 14 7H14.01C14.5623 7 15.01 7.44772 15.01 8C15.01 8.55228 14.5623 9 14.01 9H14C13.4477 9 13 8.55228 13 8ZM17 8C17 7.44772 17.4477 7 18 7H18.01C18.5623 7 19.01 7.44772 19.01 8C19.01 8.55228 18.5623 9 18.01 9H18C17.4477 9 17 8.55228 17 8ZM7 12C7 11.4477 7.44772 11 8 11H8.01C8.56228 11 9.01 11.4477 9.01 12C9.01 12.5523 8.56228 13 8.01 13H8C7.44772 13 7 12.5523 7 12ZM11 12C11 11.4477 11.4477 11 12 11H12.01C12.5623 11 13.01 11.4477 13.01 12C13.01 12.5523 12.5623 13 12.01 13H12C11.4477 13 11 12.5523 11 12ZM15 12C15 11.4477 15.4477 11 16 11H16.01C16.5623 11 17.01 11.4477 17.01 12C17.01 12.5523 16.5623 13 16.01 13H16C15.4477 13 15 12.5523 15 12ZM6 16C6 15.4477 6.44772 15 7 15H17C17.5523 15 18 15.4477 18 16C18 16.5523 17.5523 17 17 17H7C6.44772 17 6 16.5523 6 16Z\" fill=\"#192839\"/>\n</svg>\n"
}
]
11 changes: 11 additions & 0 deletions packages/blade/src/components/Icons/FlaskIcon/FlaskIcon.native.test.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import FlaskIcon from '.';
import renderWithTheme from '~utils/testing/renderWithTheme.native';

describe('<FlaskIcon />', () => {
it('should render FlaskIcon', () => {
const renderTree = renderWithTheme(
<FlaskIcon color="feedback.icon.neutral.intense" size="large" />,
).toJSON();
expect(renderTree).toMatchSnapshot();
});
});
20 changes: 20 additions & 0 deletions packages/blade/src/components/Icons/FlaskIcon/FlaskIcon.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
import { Svg, Path } from '../_Svg';
import type { IconComponent } from '..';
import useIconProps from '../useIconProps';

const FlaskIcon: IconComponent = ({ size, color, ...styledProps }) => {
const { height, width, iconColor } = useIconProps({ size, color });

return (
<Svg {...styledProps} width={width} height={height} viewBox="0 0 24 24" fill="none">
<Path
fillRule="evenodd"
clipRule="evenodd"
d="M8.50024 4H9.00025V9.01733L3.24969 18.5992C3.09029 18.8646 3.00418 19.1677 3.00016 19.4773C2.99614 19.7871 3.07444 20.0924 3.22705 20.362C3.37966 20.6316 3.60111 20.8559 3.86878 21.0119C4.13636 21.1679 4.44085 21.25 4.75056 21.25H19.7512C20.0608 21.2497 20.3648 21.1673 20.6322 21.0111C20.8996 20.8549 21.1207 20.6306 21.273 20.3611C21.4254 20.0915 21.5035 19.7863 21.4994 19.4767C21.4953 19.1671 21.4091 18.8642 21.2496 18.5988L15.5002 9.01737V4H16.0002C16.5525 4 17.0002 3.55228 17.0002 3C17.0002 2.44772 16.5525 2 16.0002 2H8.50024C7.94796 2 7.50024 2.44772 7.50024 3C7.50024 3.55228 7.94796 4 8.50024 4ZM11.0002 9.29437V4H13.5002V9.29437C13.5002 9.47563 13.5495 9.65348 13.6428 9.80891L17.0363 15.4642C16.0214 15.5851 14.5849 15.4364 12.702 14.483C11.2168 13.7316 9.90548 13.3801 8.77413 13.2807L10.8577 9.80897C10.951 9.65353 11.0002 9.47566 11.0002 9.29437ZM7.57785 15.274L5.19162 19.25H19.308L18.1323 17.2907C16.6446 17.6706 14.5183 17.6444 11.7988 16.2674C9.96949 15.3419 8.57037 15.1786 7.57785 15.274Z"
fill={iconColor}
/>
</Svg>
);
};

export default FlaskIcon;
11 changes: 11 additions & 0 deletions packages/blade/src/components/Icons/FlaskIcon/FlaskIcon.web.test.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import FlaskIcon from './';
import renderWithTheme from '~utils/testing/renderWithTheme.web';

describe('<FlaskIcon />', () => {
it('should render FlaskIcon', () => {
const { container } = renderWithTheme(
<FlaskIcon color="feedback.icon.neutral.intense" size="large" />,
);
expect(container).toMatchSnapshot();
});
});
72 changes: 72 additions & 0 deletions packages/blade/src/components/Icons/FlaskIcon/__snapshots__/FlaskIcon.native.test.tsx.snap
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`<FlaskIcon /> should render FlaskIcon 1`] = `
<View
style={
{
"flex": 1,
}
}
>
<RNSVGSvgView
accessibilityElementsHidden={true}
align="xMidYMid"
bbHeight="20px"
bbWidth="20px"
data-blade-component="icon"
fill="none"
focusable={false}
height="20px"
importantForAccessibility="no-hide-descendants"
meetOrSlice={0}
minX={0}
minY={0}
style={
[
{
"backgroundColor": "transparent",
"borderWidth": 0,
},
[
{},
],
{
"flex": 0,
"height": 20,
"width": 20,
},
]
}
vbHeight={24}
vbWidth={24}
width="20px"
>
<RNSVGGroup
fill={null}
propList={
[
"fill",
]
}
>
<RNSVGPath
clipRule={0}
d="M8.50024 4H9.00025V9.01733L3.24969 18.5992C3.09029 18.8646 3.00418 19.1677 3.00016 19.4773C2.99614 19.7871 3.07444 20.0924 3.22705 20.362C3.37966 20.6316 3.60111 20.8559 3.86878 21.0119C4.13636 21.1679 4.44085 21.25 4.75056 21.25H19.7512C20.0608 21.2497 20.3648 21.1673 20.6322 21.0111C20.8996 20.8549 21.1207 20.6306 21.273 20.3611C21.4254 20.0915 21.5035 19.7863 21.4994 19.4767C21.4953 19.1671 21.4091 18.8642 21.2496 18.5988L15.5002 9.01737V4H16.0002C16.5525 4 17.0002 3.55228 17.0002 3C17.0002 2.44772 16.5525 2 16.0002 2H8.50024C7.94796 2 7.50024 2.44772 7.50024 3C7.50024 3.55228 7.94796 4 8.50024 4ZM11.0002 9.29437V4H13.5002V9.29437C13.5002 9.47563 13.5495 9.65348 13.6428 9.80891L17.0363 15.4642C16.0214 15.5851 14.5849 15.4364 12.702 14.483C11.2168 13.7316 9.90548 13.3801 8.77413 13.2807L10.8577 9.80897C10.951 9.65353 11.0002 9.47566 11.0002 9.29437ZM7.57785 15.274L5.19162 19.25H19.308L18.1323 17.2907C16.6446 17.6706 14.5183 17.6444 11.7988 16.2674C9.96949 15.3419 8.57037 15.1786 7.57785 15.274Z"
fill={
{
"payload": 4280563015,
"type": 0,
}
}
fillRule={0}
propList={
[
"fill",
"fillRule",
]
}
/>
</RNSVGGroup>
</RNSVGSvgView>
</View>
`;
23 changes: 23 additions & 0 deletions packages/blade/src/components/Icons/FlaskIcon/__snapshots__/FlaskIcon.web.test.tsx.snap
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`<FlaskIcon /> should render FlaskIcon 1`] = `
<div>
<svg
aria-hidden="true"
class="Svgweb__StyledSvg-vcmjs8-0"
data-blade-component="icon"
fill="none"
height="20px"
viewBox="0 0 24 24"
width="20px"
>
<path
clip-rule="evenodd"
d="M8.50024 4H9.00025V9.01733L3.24969 18.5992C3.09029 18.8646 3.00418 19.1677 3.00016 19.4773C2.99614 19.7871 3.07444 20.0924 3.22705 20.362C3.37966 20.6316 3.60111 20.8559 3.86878 21.0119C4.13636 21.1679 4.44085 21.25 4.75056 21.25H19.7512C20.0608 21.2497 20.3648 21.1673 20.6322 21.0111C20.8996 20.8549 21.1207 20.6306 21.273 20.3611C21.4254 20.0915 21.5035 19.7863 21.4994 19.4767C21.4953 19.1671 21.4091 18.8642 21.2496 18.5988L15.5002 9.01737V4H16.0002C16.5525 4 17.0002 3.55228 17.0002 3C17.0002 2.44772 16.5525 2 16.0002 2H8.50024C7.94796 2 7.50024 2.44772 7.50024 3C7.50024 3.55228 7.94796 4 8.50024 4ZM11.0002 9.29437V4H13.5002V9.29437C13.5002 9.47563 13.5495 9.65348 13.6428 9.80891L17.0363 15.4642C16.0214 15.5851 14.5849 15.4364 12.702 14.483C11.2168 13.7316 9.90548 13.3801 8.77413 13.2807L10.8577 9.80897C10.951 9.65353 11.0002 9.47566 11.0002 9.29437ZM7.57785 15.274L5.19162 19.25H19.308L18.1323 17.2907C16.6446 17.6706 14.5183 17.6444 11.7988 16.2674C9.96949 15.3419 8.57037 15.1786 7.57785 15.274Z"
data-blade-component="svg-path"
fill="hsla(211, 33%, 21%, 1)"
fill-rule="evenodd"
/>
</svg>
</div>
`;
1 change: 1 addition & 0 deletions packages/blade/src/components/Icons/FlaskIcon/index.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { default } from './FlaskIcon';
11 changes: 11 additions & 0 deletions packages/blade/src/components/Icons/KeyboardIcon/KeyboardIcon.native.test.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import KeyboardIcon from '.';
import renderWithTheme from '~utils/testing/renderWithTheme.native';

describe('<KeyboardIcon />', () => {
it('should render KeyboardIcon', () => {
const renderTree = renderWithTheme(
<KeyboardIcon color="feedback.icon.neutral.intense" size="large" />,
).toJSON();
expect(renderTree).toMatchSnapshot();
});
});
20 changes: 20 additions & 0 deletions packages/blade/src/components/Icons/KeyboardIcon/KeyboardIcon.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
import { Svg, Path } from '../_Svg';
import type { IconComponent } from '..';
import useIconProps from '../useIconProps';

const KeyboardIcon: IconComponent = ({ size, color, ...styledProps }) => {
const { height, width, iconColor } = useIconProps({ size, color });

return (
<Svg {...styledProps} width={width} height={height} viewBox="0 0 24 24" fill="none">
<Path
fillRule="evenodd"
clipRule="evenodd"
d="M4 5C3.44772 5 3 5.44772 3 6V18C3 18.5523 3.44772 19 4 19H20C20.5523 19 21 18.5523 21 18V6C21 5.44771 20.5523 5 20 5H4ZM1 6C1 4.34315 2.34315 3 4 3H20C21.6569 3 23 4.34315 23 6V18C23 19.6569 21.6569 21 20 21H4C2.34315 21 1 19.6569 1 18V6ZM5 8C5 7.44772 5.44772 7 6 7H6.01C6.56228 7 7.01 7.44772 7.01 8C7.01 8.55228 6.56228 9 6.01 9H6C5.44772 9 5 8.55228 5 8ZM9 8C9 7.44772 9.44772 7 10 7H10.01C10.5623 7 11.01 7.44772 11.01 8C11.01 8.55228 10.5623 9 10.01 9H10C9.44772 9 9 8.55228 9 8ZM13 8C13 7.44772 13.4477 7 14 7H14.01C14.5623 7 15.01 7.44772 15.01 8C15.01 8.55228 14.5623 9 14.01 9H14C13.4477 9 13 8.55228 13 8ZM17 8C17 7.44772 17.4477 7 18 7H18.01C18.5623 7 19.01 7.44772 19.01 8C19.01 8.55228 18.5623 9 18.01 9H18C17.4477 9 17 8.55228 17 8ZM7 12C7 11.4477 7.44772 11 8 11H8.01C8.56228 11 9.01 11.4477 9.01 12C9.01 12.5523 8.56228 13 8.01 13H8C7.44772 13 7 12.5523 7 12ZM11 12C11 11.4477 11.4477 11 12 11H12.01C12.5623 11 13.01 11.4477 13.01 12C13.01 12.5523 12.5623 13 12.01 13H12C11.4477 13 11 12.5523 11 12ZM15 12C15 11.4477 15.4477 11 16 11H16.01C16.5623 11 17.01 11.4477 17.01 12C17.01 12.5523 16.5623 13 16.01 13H16C15.4477 13 15 12.5523 15 12ZM6 16C6 15.4477 6.44772 15 7 15H17C17.5523 15 18 15.4477 18 16C18 16.5523 17.5523 17 17 17H7C6.44772 17 6 16.5523 6 16Z"
fill={iconColor}
/>
</Svg>
);
};

export default KeyboardIcon;
11 changes: 11 additions & 0 deletions packages/blade/src/components/Icons/KeyboardIcon/KeyboardIcon.web.test.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import KeyboardIcon from './';
import renderWithTheme from '~utils/testing/renderWithTheme.web';

describe('<KeyboardIcon />', () => {
it('should render KeyboardIcon', () => {
const { container } = renderWithTheme(
<KeyboardIcon color="feedback.icon.neutral.intense" size="large" />,
);
expect(container).toMatchSnapshot();
});
});
Loading

0 comments on commit c228d8c

Please sign in to comment.