Skip to content

Commit fda7f4d

Browse files
KarineBrandelliKarineBrandelli
authored
Merge pull request #374 from nginformatica/chore/add-new-ds-icons
chore/add new ds icons
2 parents f739bee + 88bae88 commit fda7f4d

33 files changed

+1370
-639
lines changed

‎package.json

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "flipper-ui",
3-
"version": "0.35.11",
3+
"version": "0.35.12",
44
"description": "React UI based on the @mui/material toolkit for the web",
55
"main": "dist/index.js",
66
"author": "NG",
@@ -35,45 +35,45 @@
3535
"@mui/icons-material": "6.4.8",
3636
"@mui/material": "6.4.8",
3737
"@mui/system": "6.4.8",
38-
"@mui/x-date-pickers": "7.28.0",
38+
"@mui/x-date-pickers": "7.28.2",
3939
"ramda": "0.30.1",
4040
"react-loading-skeleton": "3.5.0",
4141
"react-number-format": "5.4.3"
4242
},
4343
"devDependencies": {
44-
"@babel/cli": "7.26.4",
44+
"@babel/cli": "7.27.0",
4545
"@babel/core": "7.26.10",
4646
"@babel/plugin-transform-runtime": "7.26.10",
4747
"@babel/preset-env": "7.26.9",
4848
"@babel/preset-react": "7.26.3",
49-
"@babel/preset-typescript": "7.26.0",
49+
"@babel/preset-typescript": "7.27.0",
5050
"@faker-js/faker": "9.6.0",
51-
"@storybook/addon-essentials": "8.6.7",
51+
"@storybook/addon-essentials": "8.6.11",
5252
"@storybook/addon-webpack5-compiler-babel": "3.0.5",
53-
"@storybook/blocks": "8.6.7",
54-
"@storybook/react": "8.6.7",
55-
"@storybook/react-webpack5": "8.6.7",
53+
"@storybook/blocks": "8.6.11",
54+
"@storybook/react": "8.6.11",
55+
"@storybook/react-webpack5": "8.6.11",
5656
"@stylistic/eslint-plugin": "4.2.0",
5757
"@testing-library/dom": "10.4.0",
5858
"@testing-library/jest-dom": "6.6.3",
5959
"@testing-library/react": "16.2.0",
6060
"@testing-library/user-event": "14.6.1",
6161
"@types/jest": "29.5.14",
62-
"@types/node": "22.13.11",
62+
"@types/node": "22.13.14",
6363
"@types/ramda": "0.30.2",
6464
"@types/react": "18.3.12",
6565
"@types/uuid": "10.0.0",
66-
"@typescript-eslint/eslint-plugin": "8.27.0",
67-
"@typescript-eslint/parser": "8.27.0",
66+
"@typescript-eslint/eslint-plugin": "8.28.0",
67+
"@typescript-eslint/parser": "8.28.0",
6868
"babel-loader": "10.0.0",
6969
"babel-plugin-import": "1.13.8",
7070
"babel-plugin-module-resolver": "5.0.2",
7171
"date-fns": "4.1.0",
72-
"eslint": "9.22.0",
72+
"eslint": "9.23.0",
7373
"eslint-config-prettier": "10.1.1",
74-
"eslint-import-resolver-typescript": "4.2.2",
74+
"eslint-import-resolver-typescript": "4.2.7",
7575
"eslint-plugin-import": "2.31.0",
76-
"eslint-plugin-prettier": "5.2.3",
76+
"eslint-plugin-prettier": "5.2.5",
7777
"eslint-plugin-react": "7.37.4",
7878
"eslint-plugin-react-hooks": "5.2.0",
7979
"fs-extra": "11.3.0",
@@ -83,12 +83,12 @@
8383
"prettier": "3.5.3",
8484
"react": "18.3.1",
8585
"react-dom": "18.3.1",
86-
"storybook": "8.6.7",
86+
"storybook": "8.6.11",
8787
"styled-components": "6.1.16",
88-
"ts-jest": "29.2.6",
88+
"ts-jest": "29.3.0",
8989
"ts-loader": "9.5.2",
9090
"typescript": "5.8.2",
91-
"typescript-eslint": "8.27.0",
91+
"typescript-eslint": "8.28.0",
9292
"uuid": "11.1.0",
9393
"webpack": "5.98.0"
9494
},

‎src/core/inputs/autocomplete/autocomplete.stories.tsx

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
import React from 'react'
22
import type { Meta } from '@storybook/react'
33
import TextField from '@/core/inputs/text-field'
4-
import { Autocomplete } from '.'
4+
import { Autocomplete as AutocompleteInput } from '.'
55

66
export default {
7-
title: 'Inputs/Autocomplete Lab',
8-
component: Autocomplete
9-
} as Meta<typeof Autocomplete>
7+
title: 'Inputs/Autocomplete',
8+
component: AutocompleteInput
9+
} as Meta<typeof AutocompleteInput>
1010

11-
export const AutocompleteLab = () => (
12-
<Autocomplete
11+
export const Autocomplete = () => (
12+
<AutocompleteInput
1313
fullWidth
1414
disableClearable
1515
options={[

‎src/icons/mui/index.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ export { default as IconCheck } from '@mui/icons-material/Check'
2525
export { default as IconCheckBox } from '@mui/icons-material/CheckBox'
2626
export { default as IconCheckCircle } from '@mui/icons-material/CheckCircle'
2727
export { default as IconCheckCircleOutlined } from '@mui/icons-material/CheckCircleOutlined'
28+
export { default as IconCircle } from '@mui/icons-material/Circle'
2829
export { default as IconClose } from '@mui/icons-material/Close'
2930
export { default as IconCloudDownload } from '@mui/icons-material/CloudDownload'
3031
export { default as IconCompareArrows } from '@mui/icons-material/CompareArrows'
@@ -91,6 +92,7 @@ export { default as IconMovie } from '@mui/icons-material/Movie'
9192
export { default as IconNavigateBefore } from '@mui/icons-material/NavigateBefore'
9293
export { default as IconNavigateNext } from '@mui/icons-material/NavigateNext'
9394
export { default as IconNoteAdd } from '@mui/icons-material/NoteAdd'
95+
export { default as IconNotifications } from '@mui/icons-material/Notifications'
9496
export { default as IconOndemandVideoOutlined } from '@mui/icons-material/OndemandVideoOutlined'
9597
export { default as IconPeopleAlt } from '@mui/icons-material/PeopleAlt'
9698
export { default as IconPerson } from '@mui/icons-material/Person'

‎src/icons/specific/IconBrigades.tsx

Lines changed: 41 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -2,25 +2,45 @@ import React from 'react'
22
import type { IIconProps } from '../utils'
33
import { theme } from '@/theme'
44

5-
const { neutral, primary } = theme.colors
5+
const { lightPink, primary } = theme.colors
66

7-
export const IconBrigades = ({ color, width, height, viewBox }: IIconProps) => (
8-
<svg
9-
fill='none'
10-
width={width || 24}
11-
height={height || 24}
12-
viewBox={viewBox || '0 0 24 24'}
13-
xmlns='http://www.w3.org/2000/svg'>
14-
<path
15-
fillRule='evenodd'
16-
clipRule='evenodd'
17-
fill={color || primary.main}
18-
d='M14.7653 1.51859C17.3043 2.76165 19.2562 5.48571 19.5935 8.73582C22.2418 9.94755 24 11.7636 24 13.7926C24 16.094 21.2643 18.1166 17.957 19.3001C16.5892 22.1401 14.3157 24 11.7423 24C9.0972 24 6.7706 22.0368 5.41523 19.0622C2.39532 17.8568 0 15.9468 0 13.7926C0 11.9108 1.50839 10.2137 3.83812 9.01134C4.09421 5.57026 6.16162 2.68023 8.85049 1.44345L8.93169 2.83053C9.03787 2.76791 9.14404 2.71154 9.25023 2.65832L9.78113 0.544814C9.85608 0.25362 10.0435 0 10.362 0H13.1977C13.5163 0 13.7005 0.25362 13.7755 0.544814L14.3532 2.7178C14.4593 2.7773 14.5655 2.83679 14.6717 2.90255L14.7653 1.51859ZM11.7579 7.56165C10.8055 7.55225 10.209 6.11194 10.2027 5.15695C10.1996 4.58396 11.1708 4.40548 11.7423 4.40862C12.3264 4.41488 13.3101 4.60274 13.3132 5.19139C13.3195 6.13699 12.7011 7.57417 11.7579 7.56165ZM17.3668 12.1676V12.8657H18.1663C18.9314 12.9002 19.5373 13.4732 19.5373 14.1745C19.5373 14.8979 18.8908 15.4834 18.0945 15.4834C17.954 15.4834 17.8165 15.4646 17.6854 15.4301C16.5393 19.5851 13.8566 22.5221 11.7267 22.5221C9.60625 22.5221 6.93611 19.607 5.78374 15.4802C5.74939 15.4834 5.71815 15.4834 5.68692 15.4834C4.89057 15.4834 4.24412 14.8979 4.24412 14.1745C4.24412 13.5765 4.68757 13.0693 5.29343 12.9158H6.18035V12.1143C8.81926 10.7773 15.0339 10.8556 17.3668 12.1676Z'
19-
/>
20-
<defs>
21-
<clipPath id='clip0_319_7162'>
22-
<rect width='24' height='24' fill={neutral[50]} />
23-
</clipPath>
24-
</defs>
25-
</svg>
26-
)
7+
export const IconBrigades = ({
8+
card,
9+
color,
10+
width,
11+
height,
12+
opacity,
13+
viewBox
14+
}: IIconProps) => {
15+
return card ? (
16+
<svg
17+
fill='none'
18+
width={width || 100}
19+
height={height || 100}
20+
viewBox={viewBox || '0 0 100 100'}
21+
xmlns='http://www.w3.org/2000/svg'>
22+
<g opacity={opacity || '0.4'}>
23+
<path
24+
fillRule='evenodd'
25+
clipRule='evenodd'
26+
fill={color || lightPink[600]}
27+
d='M61.5223 6.32745C72.1014 11.5069 80.2341 22.8571 81.6395 36.3992C92.6741 41.4481 100 49.015 100 57.4691C100 67.0582 88.6014 75.4859 74.8209 80.4173C69.1218 92.2505 59.6486 100 48.9264 100C37.905 100 28.2108 91.82 22.5635 79.4259C9.9805 74.4032 0 66.445 0 57.4691C0 49.6282 6.28495 42.5571 15.9922 37.5473C17.0592 23.2094 25.6734 11.1676 36.877 6.01436L37.2154 11.7939C37.6578 11.533 38.1002 11.2981 38.5426 11.0763L40.7547 2.27006C41.067 1.05675 41.8478 0 43.175 0H54.9905C56.3177 0 57.0855 1.05675 57.3977 2.27006L59.805 11.3242C60.2473 11.5721 60.6895 11.82 61.1323 12.094L61.5223 6.32745ZM48.9914 31.5069C45.0228 31.4677 42.5374 25.4664 42.5114 21.4873C42.4984 19.0998 46.545 18.3562 48.9264 18.3692C51.36 18.3953 55.4586 19.1781 55.4718 21.6308C55.4977 25.5708 52.9214 31.559 48.9914 31.5069ZM72.3618 50.6982V53.6073H75.6927C78.8809 53.7509 81.4055 56.1382 81.4055 59.0605C81.4055 62.0745 78.7118 64.5141 75.3936 64.5141C74.8082 64.5141 74.2355 64.4359 73.6891 64.2923C68.9136 81.6045 57.7359 93.8423 48.8614 93.8423C40.026 93.8423 28.9005 81.6959 24.0989 64.5009C23.9558 64.5141 23.8256 64.5141 23.6955 64.5141C20.3774 64.5141 17.6838 62.0745 17.6838 59.0605C17.6838 56.5686 19.5315 54.4555 22.056 53.8159H25.7515V50.4764C36.7469 44.9054 62.6414 45.2316 72.3618 50.6982Z'
28+
/>
29+
</g>
30+
</svg>
31+
) : (
32+
<svg
33+
fill='none'
34+
width={width || 24}
35+
height={height || 24}
36+
viewBox={viewBox || '0 0 24 24'}
37+
xmlns='http://www.w3.org/2000/svg'>
38+
<path
39+
fill-rule='evenodd'
40+
clip-rule='evenodd'
41+
fill={color || primary.main}
42+
d='M14.7653 1.51859C17.3043 2.76165 19.2562 5.48571 19.5935 8.73582C22.2418 9.94755 24 11.7636 24 13.7926C24 16.094 21.2643 18.1166 17.957 19.3001C16.5892 22.1401 14.3157 24 11.7423 24C9.0972 24 6.7706 22.0368 5.41523 19.0622C2.39532 17.8568 0 15.9468 0 13.7926C0 11.9108 1.50839 10.2137 3.83812 9.01134C4.09421 5.57026 6.16162 2.68023 8.85049 1.44345L8.93169 2.83053C9.03787 2.76791 9.14404 2.71154 9.25023 2.65832L9.78113 0.544814C9.85608 0.25362 10.0435 0 10.362 0H13.1977C13.5163 0 13.7005 0.25362 13.7755 0.544814L14.3532 2.7178C14.4593 2.7773 14.5655 2.83679 14.6717 2.90255L14.7653 1.51859ZM11.7579 7.56165C10.8055 7.55225 10.209 6.11194 10.2027 5.15695C10.1996 4.58396 11.1708 4.40548 11.7423 4.40862C12.3264 4.41488 13.3101 4.60274 13.3132 5.19139C13.3195 6.13699 12.7011 7.57417 11.7579 7.56165ZM17.3668 12.1676V12.8657H18.1663C18.9314 12.9002 19.5373 13.4732 19.5373 14.1745C19.5373 14.8979 18.8908 15.4834 18.0945 15.4834C17.954 15.4834 17.8165 15.4646 17.6854 15.4301C16.5393 19.5851 13.8566 22.5221 11.7267 22.5221C9.60625 22.5221 6.93611 19.607 5.78374 15.4802C5.74939 15.4834 5.71815 15.4834 5.68692 15.4834C4.89057 15.4834 4.24412 14.8979 4.24412 14.1745C4.24412 13.5765 4.68757 13.0693 5.29343 12.9158H6.18035V12.1143C8.81926 10.7773 15.0339 10.8556 17.3668 12.1676Z'
43+
/>
44+
</svg>
45+
)
46+
}

‎src/icons/specific/IconCircleInner.tsx

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import React from 'react'
2+
import type { IIconProps } from '../utils'
3+
import { theme } from '@/theme'
4+
5+
const { lightGreen, gray } = theme.colors
6+
7+
export interface ICircleInner extends IIconProps {
8+
isGray?: boolean
9+
}
10+
11+
export const IconCircleInner = ({
12+
isGray,
13+
width,
14+
height,
15+
viewBox
16+
}: ICircleInner) => (
17+
<svg
18+
fill='none'
19+
width={width || 25}
20+
height={height || 24}
21+
viewBox={viewBox || '0 0 25 24'}
22+
xmlns='http://www.w3.org/2000/svg'>
23+
<circle
24+
cx='12.5'
25+
cy='12'
26+
r='12'
27+
fill={isGray ? gray[500] : lightGreen[400]}
28+
/>
29+
<circle
30+
cx='12.5'
31+
cy='12'
32+
r='6'
33+
fill={isGray ? gray[700] : lightGreen[700]}
34+
/>
35+
</svg>
36+
)

‎src/icons/specific/IconCircleReturn.tsx

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import React from 'react'
2+
import type { IIconProps } from '../utils'
3+
import { theme } from '@/theme'
4+
5+
const { gray } = theme.colors
6+
7+
export const IconCircleReturn = ({ width, height, viewBox }: IIconProps) => (
8+
<svg
9+
fill='none'
10+
width={width || 25}
11+
height={height || 24}
12+
viewBox={viewBox || '0 0 25 24'}
13+
xmlns='http://www.w3.org/2000/svg'>
14+
<path
15+
fill={gray[400]}
16+
d='M12.5 24C19.1274 24 24.5 18.6274 24.5 12C24.5 5.37258 19.1274 0 12.5 0C5.87258 0 0.5 5.37258 0.5 12C0.5 18.6274 5.87258 24 12.5 24Z'
17+
/>
18+
<path
19+
fill={gray[700]}
20+
d='M10.2353 12.6L6 9.3L10.2353 6V8.2H13.9019C16.1653 8.2 18 10.1699 18 12.6C18 15.03 16.1653 17 13.9019 17H7.41176V14.8H13.9019C14.9305 14.8 15.8824 13.8839 15.8824 12.6C15.8824 11.3161 14.9305 10.4 13.9019 10.4H10.2353V12.6Z'
21+
/>
22+
</svg>
23+
)

‎src/icons/specific/IconCircleRotate.tsx

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import React from 'react'
2+
import type { IIconProps } from '../utils'
3+
import { theme } from '@/theme'
4+
5+
const { brown, orange } = theme.colors
6+
7+
export const IconCircleRotate = ({ width, height, viewBox }: IIconProps) => (
8+
<svg
9+
fill='none'
10+
width={width || 25}
11+
height={height || 24}
12+
viewBox={viewBox || '0 0 25 24'}
13+
xmlns='http://www.w3.org/2000/svg'>
14+
<path
15+
fill={orange[600]}
16+
d='M12.5 24C19.1274 24 24.5 18.6274 24.5 12C24.5 5.37258 19.1274 0 12.5 0C5.87258 0 0.5 5.37258 0.5 12C0.5 18.6274 5.87258 24 12.5 24Z'
17+
/>
18+
<path
19+
fill={brown[600]}
20+
d='M12.0497 12.0588L8.77486 16.4706L5.5 12.0588H7.13742C7.13742 5.44117 13.2778 5 13.2778 5C12.3226 5.7353 10.4123 8.17647 10.4123 12.0588H12.0497Z'
21+
/>
22+
<path
23+
fill={brown[600]}
24+
d='M12.9503 10.9412L16.2252 6.52941L19.5 10.9412H17.8625C17.8625 17.5588 11.7222 18 11.7222 18C12.6774 17.2647 14.5877 14.8236 14.5877 10.9412H12.9503Z'
25+
/>
26+
</svg>
27+
)

‎src/icons/specific/IconClockLate.tsx

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import React from 'react'
2+
import type { IIconProps } from '../utils'
3+
import { theme } from '@/theme'
4+
5+
const { deepOrange, lightBrown } = theme.colors
6+
7+
export const IconClockLate = ({ width, height, viewBox }: IIconProps) => (
8+
<svg
9+
fill='none'
10+
width={width || '24'}
11+
height={height || '24'}
12+
viewBox={viewBox || '0 0 24 24'}
13+
xmlns='http://www.w3.org/2000/svg'>
14+
<path
15+
fill={deepOrange[600]}
16+
d='M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24Z'
17+
/>
18+
<path
19+
fill={lightBrown[900]}
20+
d='M12 5C15.866 5 19 8.13401 19 12V19.1414C20.8514 17.3265 22 14.7974 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C12.6849 22 13.3538 21.9311 14 21.8V18.7101C13.3663 18.8987 12.695 19 12 19C8.13401 19 5 15.866 5 12C5 8.13401 8.13401 5 12 5Z'
21+
/>
22+
<path
23+
fill={lightBrown[900]}
24+
d='M17.615 16.8803H15.4251L15.1203 12H18L17.615 16.8803ZM15 18.8993C15 18.578 15.1417 18.3153 15.4251 18.1113C15.7139 17.9028 16.0722 17.7986 16.5 17.7986C16.9278 17.7986 17.2834 17.9028 17.5668 18.1113C17.8556 18.3153 18 18.578 18 18.8993C18 19.2206 17.8556 19.4855 17.5668 19.6939C17.2834 19.898 16.9278 20 16.5 20C16.0722 20 15.7139 19.898 15.4251 19.6939C15.1417 19.4855 15 19.2206 15 18.8993Z'
25+
/>
26+
<path
27+
fill={lightBrown[900]}
28+
d='M11 7.5C11 6.67157 11.6716 6 12.5 6C13.3284 6 14 6.67157 14 7.5V12.5C14 13.3284 13.3284 14 12.5 14H7.5C6.67157 14 6 13.3284 6 12.5C6 11.6716 6.67157 11 7.5 11H11V7.5Z'
29+
/>
30+
</svg>
31+
)

‎src/icons/specific/IconClockPending.tsx

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import React from 'react'
2+
import type { IIconProps } from '../utils'
3+
import { theme } from '@/theme'
4+
5+
const { lightBlue } = theme.colors
6+
7+
export const IconClockPending = ({ width, height, viewBox }: IIconProps) => (
8+
<svg
9+
fill='none'
10+
width={width || '24'}
11+
height={height || '24'}
12+
viewBox={viewBox || '0 0 24 24'}
13+
xmlns='http://www.w3.org/2000/svg'>
14+
<path
15+
fill={lightBlue[600]}
16+
d='M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24Z'
17+
/>
18+
<path
19+
fill={lightBlue[900]}
20+
d='M12 19C15.866 19 19 15.866 19 12C19 8.13401 15.866 5 12 5C8.13401 5 5 8.13401 5 12C5 15.866 8.13401 19 12 19ZM12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z'
21+
/>
22+
<circle cx='12' cy='12' r='7' fill={lightBlue[600]} />
23+
<path
24+
fill={lightBlue[900]}
25+
d='M14 7.5V12.5C14 13.3284 13.3284 14 12.5 14H7.5C6.67157 14 6 13.3284 6 12.5C6 11.6716 6.67157 11 7.5 11H11V7.5C11 6.67157 11.6716 6 12.5 6C13.3284 6 14 6.67157 14 7.5Z'
26+
/>
27+
</svg>
28+
)

‎src/icons/specific/IconDownloadQRCode.tsx

Lines changed: 24 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -6,36 +6,30 @@ const { gray, primary } = theme.colors
66

77
export const IconDownloadQRCode = ({
88
disabled,
9+
color,
910
width,
1011
height,
1112
viewBox
12-
}: IIconProps) => (
13-
<svg
14-
fill='none'
15-
width={width || 24}
16-
height={height || 24}
17-
viewBox={viewBox || '0 0 16 16'}
18-
xmlns='http://www.w3.org/2000/svg'>
19-
<path
20-
fill={!disabled ? primary.main : gray[400]}
21-
d='M2.66667 2.66667H6.66667V6.66667H2.66667V2.66667ZM13.3333 2.66667V6.66667H9.33333V2.66667H13.3333ZM2.66667 13.3333V9.33333H6.66667V13.3333H2.66667ZM4 4V5.33333H5.33333V4H4ZM10.6667 4V5.33333H12V4H10.6667ZM4 10.6667V12H5.33333V10.6667H4ZM2.66667 7.33333H4V8.66667H2.66667V7.33333ZM7.33333 4H8.66667V6.66667H7.33333V4ZM1.33333 1.33333V4H0V1.33333C0 0.979711 0.140476 0.640573 0.390524 0.390524C0.640573 0.140476 0.979711 0 1.33333 0L4 0V1.33333H1.33333ZM14.6667 0C15.0203 0 15.3594 0.140476 15.6095 0.390524C15.8595 0.640573 16 0.979711 16 1.33333V4H14.6667V1.33333H12V0H14.6667ZM1.33333 12V14.6667H4V16H1.33333C0.979711 16 0.640573 15.8595 0.390524 15.6095C0.140476 15.3594 0 15.0203 0 14.6667V12H1.33333Z'
22-
/>
23-
<path
24-
fill={!disabled ? primary.main : gray[400]}
25-
d='M14.9667 10.9333H9.8334C9.22473 10.9333 8.7334 11.4246 8.7334 12.0333V14.2333H10.2001V15.7H14.6001V14.2333H16.0667V12.0333C16.0667 11.4246 15.5754 10.9333 14.9667 10.9333ZM13.8667 14.9666H10.9334V13.1333H13.8667V14.9666ZM14.9667 12.4C14.7651 12.4 14.6001 12.235 14.6001 12.0333C14.6001 11.8316 14.7651 11.6666 14.9667 11.6666C15.1684 11.6666 15.3334 11.8316 15.3334 12.0333C15.3334 12.235 15.1684 12.4 14.9667 12.4ZM14.6001 9.09998H10.2001V10.5666H14.6001V9.09998Z'
26-
/>
27-
<defs>
28-
<clipPath id='clip0_8_103'>
29-
<rect width='16' height='16' fill='none' />
30-
</clipPath>
31-
<clipPath id='clip1_8_103'>
32-
<rect
33-
fill='none'
34-
width='8.8'
35-
height='8.8'
36-
transform='translate(8 8)'
37-
/>
38-
</clipPath>
39-
</defs>
40-
</svg>
41-
)
13+
}: IIconProps) => {
14+
const handleColor = () => {
15+
return color || (disabled ? gray[400] : primary.main)
16+
}
17+
18+
return (
19+
<svg
20+
fill='none'
21+
width={width || 24}
22+
height={height || 24}
23+
viewBox={viewBox || '0 0 16 16'}
24+
xmlns='http://www.w3.org/2000/svg'>
25+
<path
26+
fill={handleColor()}
27+
d='M2.66667 2.66667H6.66667V6.66667H2.66667V2.66667ZM13.3333 2.66667V6.66667H9.33333V2.66667H13.3333ZM2.66667 13.3333V9.33333H6.66667V13.3333H2.66667ZM4 4V5.33333H5.33333V4H4ZM10.6667 4V5.33333H12V4H10.6667ZM4 10.6667V12H5.33333V10.6667H4ZM2.66667 7.33333H4V8.66667H2.66667V7.33333ZM7.33333 4H8.66667V6.66667H7.33333V4ZM1.33333 1.33333V4H0V1.33333C0 0.979711 0.140476 0.640573 0.390524 0.390524C0.640573 0.140476 0.979711 0 1.33333 0L4 0V1.33333H1.33333ZM14.6667 0C15.0203 0 15.3594 0.140476 15.6095 0.390524C15.8595 0.640573 16 0.979711 16 1.33333V4H14.6667V1.33333H12V0H14.6667ZM1.33333 12V14.6667H4V16H1.33333C0.979711 16 0.640573 15.8595 0.390524 15.6095C0.140476 15.3594 0 15.0203 0 14.6667V12H1.33333Z'
28+
/>
29+
<path
30+
fill={handleColor()}
31+
d='M14.9667 10.9333H9.8334C9.22473 10.9333 8.7334 11.4246 8.7334 12.0333V14.2333H10.2001V15.7H14.6001V14.2333H16.0667V12.0333C16.0667 11.4246 15.5754 10.9333 14.9667 10.9333ZM13.8667 14.9666H10.9334V13.1333H13.8667V14.9666ZM14.9667 12.4C14.7651 12.4 14.6001 12.235 14.6001 12.0333C14.6001 11.8316 14.7651 11.6666 14.9667 11.6666C15.1684 11.6666 15.3334 11.8316 15.3334 12.0333C15.3334 12.235 15.1684 12.4 14.9667 12.4ZM14.6001 9.09998H10.2001V10.5666H14.6001V9.09998Z'
32+
/>
33+
</svg>
34+
)
35+
}

0 commit comments

Comments
 (0)