diff --git a/src/react/components/Icon/Icon.tsx b/src/react/components/Icon/Icon.tsx index 13e17fd..4603607 100644 --- a/src/react/components/Icon/Icon.tsx +++ b/src/react/components/Icon/Icon.tsx @@ -1,7 +1,7 @@ import { FC } from 'react' import { IconData, IconName } from './data' -export type IconSize = 'small' | 'medium' | 'large' | 'xlarge' +export type IconSize = 'sm' | 'md' | 'lg' | 'xl' export interface IconProps { /** @@ -34,14 +34,6 @@ export interface IconProps { className?: string } -// Tailwind classes for the icon sizes -const sizeMap = { - small: 'w-[0.75rem] h-[0.75rem]', - medium: 'w-[1rem] h-[1rem]', - large: 'w-[1.5rem] h-[1.5rem]', - xlarge: 'w-[2rem] h-[2rem]', -} - /** * Component for displaying a Flume icon * @@ -50,7 +42,7 @@ const sizeMap = { * return */ export const Icon: FC = (props) => { - const { icon, color, size = 'medium', inline = false, filled = false, className } = props + const { icon, color, size, inline = false, filled = false, className } = props let iconName = icon if (filled && !icon.includes('filled') && `${icon}_filled` in IconData) { @@ -60,8 +52,10 @@ export const Icon: FC = (props) => { return ( + size === 'sm' ? 'w-[0.75rem] h-[0.75rem]' : '' + } ${size === 'md' ? 'w-[1rem] h-[1rem]' : ''} ${ + size === 'lg' ? 'w-[1.5rem] h-[1.5rem]' : '' + } ${size === 'xl' ? 'w-[2rem] h-[2rem]' : ''} ${className}`}>