import React, { ReactNode } from 'react';

const SizePresets: any = {

xsmall: 8,

small: 12,

medium: 16,

large: 20,

xlarge: 30,

};

export interface IconProps {

className?: string;

fill?: string;

size?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | number;

children?: ReactNode;

style?: Record<string, unknown>;

}

export function SVGIcon({

fill,

size = 'medium',

viewBox,

style,

children,

...props

}: IconProps & {

viewBox: string;

}) {

// eslint-disable-next-line no-prototype-builtins

if (SizePresets.hasOwnProperty(size)) {

size = SizePresets[size];

}

return (

<svg

fill="currentColor"

preserveAspectRatio="xMidYMid meet"

width={size}

height={size}

viewBox={viewBox}

{...props}

style={{

color: fill,

...style,

}}

>

{children}

</svg>

);

}