From 3727ec25c918142de52283d1829b452e831b916d Mon Sep 17 00:00:00 2001 From: wrryu09 Date: Sun, 17 Nov 2024 00:20:05 +0900 Subject: [PATCH 1/9] =?UTF-8?q?chore:=20=EC=95=84=EC=9D=B4=EC=BD=98?= =?UTF-8?q?=EB=AA=85=20lint=20=EB=A7=9E=EA=B2=8C=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/svg/index.ts | 16 ++++++++-------- src/components/common/NavBarIcon.tsx | 8 ++++---- 2 files changed, 12 insertions(+), 12 deletions(-) diff --git a/src/assets/svg/index.ts b/src/assets/svg/index.ts index 0c49c8c6..e8e0bddb 100644 --- a/src/assets/svg/index.ts +++ b/src/assets/svg/index.ts @@ -18,10 +18,10 @@ import IcnArrangeSet from '@/assets/svg/icn_arrange_set.svg?react'; import Icn_clock from '@/assets/svg/icn_clock.svg?react'; import IcnFile from '@/assets/svg/icn_file.svg?react'; import Icn_hover_indicator from '@/assets/svg/icn_hover_indicator.svg?react'; -import Icn_nav_calendar from '@/assets/svg/icn_nav_calendar.svg?react'; -import Icn_nav_dashboard from '@/assets/svg/icn_nav_dashboard.svg?react'; -import Icn_nav_setting from '@/assets/svg/icn_nav_setting.svg?react'; -import Icn_nav_today from '@/assets/svg/icn_nav_today.svg?react'; +import IcnNavCalendar from '@/assets/svg/icn_nav_calendar.svg?react'; +import IcnNavDashboard from '@/assets/svg/icn_nav_dashboard.svg?react'; +import IcnNavSetting from '@/assets/svg/icn_nav_setting.svg?react'; +import IcnNavToday from '@/assets/svg/icn_nav_today.svg?react'; import Icn_line from '@/assets/svg/line164.svg?react'; import plus_circle from '@/assets/svg/plus-circle.svg?react'; import PlusArrow from '@/assets/svg/PlusArrow.svg?react'; @@ -47,10 +47,10 @@ const Icons = { Icn_hover_indicator, IcnFile, Navbar: { - Icn_nav_calendar, - Icn_nav_dashboard, - Icn_nav_setting, - Icn_nav_today, + IcnNavCalendar, + IcnNavDashboard, + IcnNavSetting, + IcnNavToday, }, ArrangeBtn: { IcnArrangeRight, diff --git a/src/components/common/NavBarIcon.tsx b/src/components/common/NavBarIcon.tsx index 0dfe3e62..2aca39a7 100644 --- a/src/components/common/NavBarIcon.tsx +++ b/src/components/common/NavBarIcon.tsx @@ -69,10 +69,10 @@ const createStyledIcon = (IconComponent: React.FunctionComponent ($iscurrent ? theme.palette.Primary : theme.palette.Grey.Grey5)}; `; -const TodayIcon = createStyledIcon(Icons.Navbar.Icn_nav_today); -const DashboardIcon = createStyledIcon(Icons.Navbar.Icn_nav_dashboard); -const CalendarIcon = createStyledIcon(Icons.Navbar.Icn_nav_calendar); -const SettingIcon = createStyledIcon(Icons.Navbar.Icn_nav_setting); +const TodayIcon = createStyledIcon(Icons.Navbar.IcnNavToday); +const DashboardIcon = createStyledIcon(Icons.Navbar.IcnNavDashboard); +const CalendarIcon = createStyledIcon(Icons.Navbar.IcnNavCalendar); +const SettingIcon = createStyledIcon(Icons.Navbar.IcnNavSetting); const Caption = styled.p<{ $iscurrent: boolean }>` ${({ theme }) => theme.fontTheme.CAPTION_02}; From 14cb58b5940e9646e22195d0e682bb4ba668db58 Mon Sep 17 00:00:00 2001 From: wrryu09 Date: Sun, 17 Nov 2024 00:20:25 +0900 Subject: [PATCH 2/9] =?UTF-8?q?feat:=20IconButton=20=EC=A0=9C=EC=9E=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/v2/IconButton.tsx | 102 ++++++++++++++++++++++++ 1 file changed, 102 insertions(+) create mode 100644 src/components/common/v2/IconButton.tsx diff --git a/src/components/common/v2/IconButton.tsx b/src/components/common/v2/IconButton.tsx new file mode 100644 index 00000000..992f6b32 --- /dev/null +++ b/src/components/common/v2/IconButton.tsx @@ -0,0 +1,102 @@ +import { css, SerializedStyles } from '@emotion/react'; +import styled from '@emotion/styled'; +import { cloneElement, ReactElement } from 'react'; + +import color from '@/styles/color'; +import { theme } from '@/styles/theme'; + +type SizeType = 'small' | 'big'; +type IconBtnType = 'solid' | 'normal' | 'outlined'; +type IconButtonProps = { + type: IconBtnType; + size: SizeType; + disabled: boolean; + Icon: ReactElement; + onClick: () => void; +}; + +function IconButton({ type, size, disabled, Icon, onClick }: IconButtonProps) { + const buttonSizes: Record = { + big: css` + width: 4rem; + height: 4rem; + `, + small: css` + width: 3.2rem; + height: 3.2rem; + `, + }; + + const getIconBtnStyles = ( + strokeColor: string, + defaultBG: string, + hoverBG: string, + pressedBG: string, + border: boolean + ) => { + if (disabled) { + return css` + color: ${color.Grey.Grey4}; + ${border && + css` + border: solid 1px ${color.Grey.Grey4}; + `} + `; + } + return css` + background-color: ${defaultBG}; + + ${border && + css` + border: solid 1px ${strokeColor}; + `} + :hover { + background-color: ${hoverBG}; + } + + :active { + background-color: ${pressedBG}; + } + `; + }; + const buttonStyles: Record = { + solid: getIconBtnStyles(color.Grey.White, color.Blue.Blue6, color.Blue.Blue7, color.Blue.Blue8, false), + normal: getIconBtnStyles(color.Grey.Grey5, color.Grey.White, color.Grey.Grey2, color.Grey.Grey3, false), + outlined: getIconBtnStyles(color.Grey.White, color.Grey.White, color.Grey.Grey2, color.Grey.Grey3, true), + }; + + const IconBtnContainer = styled.div` + display: flex; + ${buttonSizes[size]} + align-items: center; + justify-content: center; + + border-radius: 8px; + ${buttonStyles[type]} + `; + + const getIconColor = () => { + switch (type) { + case 'solid': + return theme.color.Grey.White; + + case 'normal': + case 'outlined': + if (disabled) { + return theme.color.Grey.Grey4; + } + return theme.color.Grey.Grey5; + + default: + return theme.color.Grey.Grey4; + } + }; + + return ( + {} : onClick}> + {cloneElement(Icon, { color: getIconColor() })} + + ); +} + +export default IconButton; From c81bb65335307296bc23551ac66e5c149cf7f64d Mon Sep 17 00:00:00 2001 From: wrryu09 Date: Sun, 17 Nov 2024 00:20:36 +0900 Subject: [PATCH 3/9] =?UTF-8?q?docs:=20IconButton=20=EC=8A=A4=ED=86=A0?= =?UTF-8?q?=EB=A6=AC=EB=B6=81=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Common/Button/IconButton.stories.tsx | 47 +++++++++++++++++++ 1 file changed, 47 insertions(+) create mode 100644 src/stories/Common/Button/IconButton.stories.tsx diff --git a/src/stories/Common/Button/IconButton.stories.tsx b/src/stories/Common/Button/IconButton.stories.tsx new file mode 100644 index 00000000..740a7b3a --- /dev/null +++ b/src/stories/Common/Button/IconButton.stories.tsx @@ -0,0 +1,47 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { fn } from '@storybook/test'; + +import Icons from '@/assets/svg/index'; +import IconButton from '@/components/common/v2/IconButton'; + +const meta = { + title: 'Common/IconButton', + component: IconButton, + parameters: { + layout: 'centered', + }, + tags: ['autodocs'], + args: { onClick: fn() }, +} satisfies Meta; + +export default meta; + +type Story = StoryObj; + +export const Solid: Story = { + args: { + type: 'solid', + size: 'big', + disabled: false, + Icon: , + onClick: fn(), + }, +}; +export const Normal: Story = { + args: { + type: 'normal', + size: 'big', + disabled: false, + Icon: , + onClick: fn(), + }, +}; +export const Outlined: Story = { + args: { + type: 'outlined', + size: 'big', + disabled: false, + Icon: , + onClick: fn(), + }, +}; From 3d055c09ac0b3a96987737ca4de4546f547cf1c7 Mon Sep 17 00:00:00 2001 From: wrryu09 Date: Sun, 17 Nov 2024 00:25:07 +0900 Subject: [PATCH 4/9] =?UTF-8?q?refactor:=20=ED=95=A8=EC=88=98=20=EC=88=9C?= =?UTF-8?q?=EC=84=9C=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/v2/IconButton.tsx | 36 ++++++++++--------------- 1 file changed, 14 insertions(+), 22 deletions(-) diff --git a/src/components/common/v2/IconButton.tsx b/src/components/common/v2/IconButton.tsx index 992f6b32..88f72a22 100644 --- a/src/components/common/v2/IconButton.tsx +++ b/src/components/common/v2/IconButton.tsx @@ -16,6 +16,7 @@ type IconButtonProps = { }; function IconButton({ type, size, disabled, Icon, onClick }: IconButtonProps) { + // 사이즈별 분기 const buttonSizes: Record = { big: css` width: 4rem; @@ -27,6 +28,7 @@ function IconButton({ type, size, disabled, Icon, onClick }: IconButtonProps) { `, }; + // 아이콘 배경 색상 및 테두리 const getIconBtnStyles = ( strokeColor: string, defaultBG: string, @@ -65,6 +67,17 @@ function IconButton({ type, size, disabled, Icon, onClick }: IconButtonProps) { outlined: getIconBtnStyles(color.Grey.White, color.Grey.White, color.Grey.Grey2, color.Grey.Grey3, true), }; + // 아이콘 색상 설정 + const getIconColor = () => { + const iconColors = { + solid: theme.color.Grey.White, + normal: disabled ? theme.color.Grey.Grey4 : theme.color.Grey.Grey5, + outlined: disabled ? theme.color.Grey.Grey4 : theme.color.Grey.Grey5, + }; + return iconColors[type]; + }; + const ColoredIcon = cloneElement(Icon, { color: getIconColor() }); + const IconBtnContainer = styled.div` display: flex; ${buttonSizes[size]} @@ -75,28 +88,7 @@ function IconButton({ type, size, disabled, Icon, onClick }: IconButtonProps) { ${buttonStyles[type]} `; - const getIconColor = () => { - switch (type) { - case 'solid': - return theme.color.Grey.White; - - case 'normal': - case 'outlined': - if (disabled) { - return theme.color.Grey.Grey4; - } - return theme.color.Grey.Grey5; - - default: - return theme.color.Grey.Grey4; - } - }; - - return ( - {} : onClick}> - {cloneElement(Icon, { color: getIconColor() })} - - ); + return {} : onClick}>{ColoredIcon}; } export default IconButton; From ff516850ce8b8f94df8cda2b5efb203784bec3c4 Mon Sep 17 00:00:00 2001 From: wrryu09 Date: Sun, 17 Nov 2024 00:52:51 +0900 Subject: [PATCH 5/9] =?UTF-8?q?fix:=20=EB=94=94=EC=9E=90=EC=9D=B8=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/v2/IconButton.tsx | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/src/components/common/v2/IconButton.tsx b/src/components/common/v2/IconButton.tsx index 88f72a22..ab8e7b56 100644 --- a/src/components/common/v2/IconButton.tsx +++ b/src/components/common/v2/IconButton.tsx @@ -37,11 +37,16 @@ function IconButton({ type, size, disabled, Icon, onClick }: IconButtonProps) { border: boolean ) => { if (disabled) { + if (type === 'solid') + return css` + background-color: ${color.Blue.Blue2}; + `; return css` - color: ${color.Grey.Grey4}; ${border && css` - border: solid 1px ${color.Grey.Grey4}; + box-sizing: border-box; + + border: solid 1px ${color.Grey.Grey3}; `} `; } @@ -50,8 +55,11 @@ function IconButton({ type, size, disabled, Icon, onClick }: IconButtonProps) { ${border && css` + box-sizing: border-box; + border: solid 1px ${strokeColor}; `} + :hover { background-color: ${hoverBG}; } @@ -64,7 +72,7 @@ function IconButton({ type, size, disabled, Icon, onClick }: IconButtonProps) { const buttonStyles: Record = { solid: getIconBtnStyles(color.Grey.White, color.Blue.Blue6, color.Blue.Blue7, color.Blue.Blue8, false), normal: getIconBtnStyles(color.Grey.Grey5, color.Grey.White, color.Grey.Grey2, color.Grey.Grey3, false), - outlined: getIconBtnStyles(color.Grey.White, color.Grey.White, color.Grey.Grey2, color.Grey.Grey3, true), + outlined: getIconBtnStyles(color.Grey.Grey4, color.Grey.White, color.Grey.Grey2, color.Grey.Grey3, true), }; // 아이콘 색상 설정 From 7ad5226084a2519590c36c22c43ec09fbb862786 Mon Sep 17 00:00:00 2001 From: wrryu09 Date: Mon, 18 Nov 2024 13:57:02 +0900 Subject: [PATCH 6/9] =?UTF-8?q?refactor:=20useTheme=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/v2/IconButton.tsx | 34 ++++++++++++++++++------- 1 file changed, 25 insertions(+), 9 deletions(-) diff --git a/src/components/common/v2/IconButton.tsx b/src/components/common/v2/IconButton.tsx index ab8e7b56..e2bf6ee3 100644 --- a/src/components/common/v2/IconButton.tsx +++ b/src/components/common/v2/IconButton.tsx @@ -1,10 +1,7 @@ -import { css, SerializedStyles } from '@emotion/react'; +import { css, SerializedStyles, useTheme } from '@emotion/react'; import styled from '@emotion/styled'; import { cloneElement, ReactElement } from 'react'; -import color from '@/styles/color'; -import { theme } from '@/styles/theme'; - type SizeType = 'small' | 'big'; type IconBtnType = 'solid' | 'normal' | 'outlined'; type IconButtonProps = { @@ -16,6 +13,7 @@ type IconButtonProps = { }; function IconButton({ type, size, disabled, Icon, onClick }: IconButtonProps) { + const theme = useTheme(); // 사이즈별 분기 const buttonSizes: Record = { big: css` @@ -39,14 +37,14 @@ function IconButton({ type, size, disabled, Icon, onClick }: IconButtonProps) { if (disabled) { if (type === 'solid') return css` - background-color: ${color.Blue.Blue2}; + background-color: ${theme.color.Blue.Blue2}; `; return css` ${border && css` box-sizing: border-box; - border: solid 1px ${color.Grey.Grey3}; + border: solid 1px ${theme.color.Grey.Grey3}; `} `; } @@ -70,9 +68,27 @@ function IconButton({ type, size, disabled, Icon, onClick }: IconButtonProps) { `; }; const buttonStyles: Record = { - solid: getIconBtnStyles(color.Grey.White, color.Blue.Blue6, color.Blue.Blue7, color.Blue.Blue8, false), - normal: getIconBtnStyles(color.Grey.Grey5, color.Grey.White, color.Grey.Grey2, color.Grey.Grey3, false), - outlined: getIconBtnStyles(color.Grey.Grey4, color.Grey.White, color.Grey.Grey2, color.Grey.Grey3, true), + solid: getIconBtnStyles( + theme.color.Grey.White, + theme.color.Blue.Blue6, + theme.color.Blue.Blue7, + theme.color.Blue.Blue8, + false + ), + normal: getIconBtnStyles( + theme.color.Grey.Grey5, + theme.color.Grey.White, + theme.color.Grey.Grey2, + theme.color.Grey.Grey3, + false + ), + outlined: getIconBtnStyles( + theme.color.Grey.Grey4, + theme.color.Grey.White, + theme.color.Grey.Grey2, + theme.color.Grey.Grey3, + true + ), }; // 아이콘 색상 설정 From 53ef66392c1017b4ca9209c4cb059d71b0d1c240 Mon Sep 17 00:00:00 2001 From: wrryu09 Date: Mon, 18 Nov 2024 13:58:09 +0900 Subject: [PATCH 7/9] =?UTF-8?q?chore:=20default=20=EA=B0=92=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/v2/IconButton.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/common/v2/IconButton.tsx b/src/components/common/v2/IconButton.tsx index e2bf6ee3..14bb9f5c 100644 --- a/src/components/common/v2/IconButton.tsx +++ b/src/components/common/v2/IconButton.tsx @@ -12,7 +12,7 @@ type IconButtonProps = { onClick: () => void; }; -function IconButton({ type, size, disabled, Icon, onClick }: IconButtonProps) { +function IconButton({ type, size = 'small', disabled = false, Icon, onClick }: IconButtonProps) { const theme = useTheme(); // 사이즈별 분기 const buttonSizes: Record = { From c26408e9ea5e7931059058df56dfb7c3828a415b Mon Sep 17 00:00:00 2001 From: wrryu09 Date: Mon, 18 Nov 2024 14:09:32 +0900 Subject: [PATCH 8/9] =?UTF-8?q?chore:=20useTheme=20color=20=EC=9E=84?= =?UTF-8?q?=ED=8F=AC=ED=8A=B8=EB=A1=9C=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/v2/IconButton.tsx | 36 +++++++------------------ 1 file changed, 9 insertions(+), 27 deletions(-) diff --git a/src/components/common/v2/IconButton.tsx b/src/components/common/v2/IconButton.tsx index 14bb9f5c..867ba719 100644 --- a/src/components/common/v2/IconButton.tsx +++ b/src/components/common/v2/IconButton.tsx @@ -13,7 +13,7 @@ type IconButtonProps = { }; function IconButton({ type, size = 'small', disabled = false, Icon, onClick }: IconButtonProps) { - const theme = useTheme(); + const { color } = useTheme(); // 사이즈별 분기 const buttonSizes: Record = { big: css` @@ -37,14 +37,14 @@ function IconButton({ type, size = 'small', disabled = false, Icon, onClick }: I if (disabled) { if (type === 'solid') return css` - background-color: ${theme.color.Blue.Blue2}; + background-color: ${color.Blue.Blue2}; `; return css` ${border && css` box-sizing: border-box; - border: solid 1px ${theme.color.Grey.Grey3}; + border: solid 1px ${color.Grey.Grey3}; `} `; } @@ -68,35 +68,17 @@ function IconButton({ type, size = 'small', disabled = false, Icon, onClick }: I `; }; const buttonStyles: Record = { - solid: getIconBtnStyles( - theme.color.Grey.White, - theme.color.Blue.Blue6, - theme.color.Blue.Blue7, - theme.color.Blue.Blue8, - false - ), - normal: getIconBtnStyles( - theme.color.Grey.Grey5, - theme.color.Grey.White, - theme.color.Grey.Grey2, - theme.color.Grey.Grey3, - false - ), - outlined: getIconBtnStyles( - theme.color.Grey.Grey4, - theme.color.Grey.White, - theme.color.Grey.Grey2, - theme.color.Grey.Grey3, - true - ), + solid: getIconBtnStyles(color.Grey.White, color.Blue.Blue6, color.Blue.Blue7, color.Blue.Blue8, false), + normal: getIconBtnStyles(color.Grey.Grey5, color.Grey.White, color.Grey.Grey2, color.Grey.Grey3, false), + outlined: getIconBtnStyles(color.Grey.Grey4, color.Grey.White, color.Grey.Grey2, color.Grey.Grey3, true), }; // 아이콘 색상 설정 const getIconColor = () => { const iconColors = { - solid: theme.color.Grey.White, - normal: disabled ? theme.color.Grey.Grey4 : theme.color.Grey.Grey5, - outlined: disabled ? theme.color.Grey.Grey4 : theme.color.Grey.Grey5, + solid: color.Grey.White, + normal: disabled ? color.Grey.Grey4 : color.Grey.Grey5, + outlined: disabled ? color.Grey.Grey4 : color.Grey.Grey5, }; return iconColors[type]; }; From 1a7bed6dd72c04d6ff4535619d5c6fad5cdb98b9 Mon Sep 17 00:00:00 2001 From: wrryu09 Date: Mon, 18 Nov 2024 14:42:06 +0900 Subject: [PATCH 9/9] =?UTF-8?q?refactor:=20css=20=EB=A1=9C=20Icon=20?= =?UTF-8?q?=EC=8A=A4=ED=83=80=EC=9D=BC=EB=A7=81=ED=95=98=EB=8F=84=EB=A1=9D?= =?UTF-8?q?=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/v2/IconButton.tsx | 26 ++++++++++--------------- 1 file changed, 10 insertions(+), 16 deletions(-) diff --git a/src/components/common/v2/IconButton.tsx b/src/components/common/v2/IconButton.tsx index 867ba719..2aa3f1b3 100644 --- a/src/components/common/v2/IconButton.tsx +++ b/src/components/common/v2/IconButton.tsx @@ -1,6 +1,6 @@ import { css, SerializedStyles, useTheme } from '@emotion/react'; import styled from '@emotion/styled'; -import { cloneElement, ReactElement } from 'react'; +import { ReactElement } from 'react'; type SizeType = 'small' | 'big'; type IconBtnType = 'solid' | 'normal' | 'outlined'; @@ -37,25 +37,30 @@ function IconButton({ type, size = 'small', disabled = false, Icon, onClick }: I if (disabled) { if (type === 'solid') return css` + color: ${color.Grey.White}; + background-color: ${color.Blue.Blue2}; `; return css` + color: ${color.Grey.Grey4}; ${border && css` box-sizing: border-box; border: solid 1px ${color.Grey.Grey3}; - `} + `}; `; } return css` + color: ${strokeColor}; + background-color: ${defaultBG}; ${border && css` box-sizing: border-box; - border: solid 1px ${strokeColor}; + border: solid 1px ${color.Grey.Grey4}; `} :hover { @@ -70,19 +75,8 @@ function IconButton({ type, size = 'small', disabled = false, Icon, onClick }: I const buttonStyles: Record = { solid: getIconBtnStyles(color.Grey.White, color.Blue.Blue6, color.Blue.Blue7, color.Blue.Blue8, false), normal: getIconBtnStyles(color.Grey.Grey5, color.Grey.White, color.Grey.Grey2, color.Grey.Grey3, false), - outlined: getIconBtnStyles(color.Grey.Grey4, color.Grey.White, color.Grey.Grey2, color.Grey.Grey3, true), - }; - - // 아이콘 색상 설정 - const getIconColor = () => { - const iconColors = { - solid: color.Grey.White, - normal: disabled ? color.Grey.Grey4 : color.Grey.Grey5, - outlined: disabled ? color.Grey.Grey4 : color.Grey.Grey5, - }; - return iconColors[type]; + outlined: getIconBtnStyles(color.Grey.Grey5, color.Grey.White, color.Grey.Grey2, color.Grey.Grey3, true), }; - const ColoredIcon = cloneElement(Icon, { color: getIconColor() }); const IconBtnContainer = styled.div` display: flex; @@ -94,7 +88,7 @@ function IconButton({ type, size = 'small', disabled = false, Icon, onClick }: I ${buttonStyles[type]} `; - return {} : onClick}>{ColoredIcon}; + return {} : onClick}>{Icon}; } export default IconButton;