.ts

// icon.ts
export const icons = {
  clock15: require('../../../assets/icons/15_min.svg').default,
  clock20: require('../../../assets/icons/20_min.svg').default,
  clock30: require('../../../assets/icons/30_min.svg').default,
  clock60: require('../../../assets/icons/60_min.svg').default,
  clock45: require('../../../assets/icons/45_min.svg').default,
  clock90: require('../../../assets/icons/90_min.svg').default,
  clock120: require('../../../assets/icons/120_min.svg').default,
  checkGreen: require('../../../assets/icons/check.svg').default,
  crossRed: require('../../../assets/icons/cross-red.svg').default,
  starEmpty: require('../../../assets/icons/star-empty.svg').default,
  starHalf: require('../../../assets/icons/star-half.svg').default,
  starFilled: require('../../../assets/icons/star-full.svg').default,
  checkmark: require('../../../assets/icons/checkmark.svg').default,
  crossDefault: require('../../../assets/icons/cross.svg').default,
  search: require('../../../assets/icons/search.svg').default,
  chevronBack: require('../../../assets/icons/arrow-left.svg').default,
};

export type IconTypes = keyof typeof icons;

// icon.tsx
import { getColor } from '@tailwind';
import * as React from 'react';
import { IconProps } from './icon.props';
import { icons } from './icons';

export const Icon = (props: IconProps) => {
  const {
    style: styleOverride,
    width = 20,
    height = 20,
    icon,
    containerStyle,
    fill = getColor('gray-300'),
  } = props;

  if (!icons[icon]) {
    throw new Error(
      `${icons[icon]} does not exist in the icons map. Please check /icons/icons.ts file`,
    );
  }

  const Component = icons[icon];

  return (
    <div>
      <Component
        width={width}
        height={height}
        style={[ROOT, styleOverride]}
        fill={fill}
      />
    </div>
  );
};