Use same constant for icon sizes in Icon and IconButton

2 files changed, 4 insertions, 12 deletions

diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/icon-button/IconButton.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/icon-button/IconButton.tsx
index 819151706a..7db42fdcf7 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/icon-button/IconButton.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/icon-button/IconButton.tsx
@@ -3,7 +3,7 @@ import styled from 'styled-components';
 
 import { Colors } from '../../foundations';
 import { buttonReset } from '../../styles';
-import { IconProps } from '../icon/Icon';
+import { IconProps, iconSizes } from '../icon/Icon';
 import { IconButtonIcon } from './components/IconButtonIcon';
 import { IconButtonProvider } from './IconButtonContext';
 
@@ -12,14 +12,6 @@ export interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonEl
   size?: IconProps['size'];
 }
 
-const sizes = {
-  tiny: 12,
-  small: 16,
-  medium: 24,
-  large: 32,
-  big: 48,
-};
-
 const StyledButton = styled.button({
   ...buttonReset,
 
@@ -35,7 +27,7 @@ const StyledButton = styled.button({
 
 const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
   ({ variant = 'primary', size: sizeProp = 'medium', disabled, style, ...props }, ref) => {
-    const size = sizes[sizeProp];
+    const size = iconSizes[sizeProp];
     return (
       <IconButtonProvider size={sizeProp} variant={variant} disabled={disabled}>
         <StyledButton
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/icon/Icon.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/icon/Icon.tsx
index 9194235fc1..97a158855b 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/icon/Icon.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/icon/Icon.tsx
@@ -21,7 +21,7 @@ const StyledIcon = styled.div<
   background-color: ${({ $color }) => $color || 'currentColor'};
 `;
 
-const sizes = {
+export const iconSizes = {
   tiny: 12,
   small: 16,
   medium: 24,
@@ -37,5 +37,5 @@ export const Icon = ({
 }: IconProps) => {
   const icon = icons[iconProp];
   const src = iconProp.startsWith('data:') ? iconProp : `../../assets/icons/${icon}.svg`;
-  return <StyledIcon $src={src} $size={sizes[size]} $color={color} role="img" {...props} />;
+  return <StyledIcon $src={src} $size={iconSizes[size]} $color={color} role="img" {...props} />;
 };