Skip to content

Instantly share code, notes, and snippets.

@dani-z
Created November 15, 2021 12:04
Show Gist options
  • Save dani-z/8bc715ffb8e24e50603366eed21bd330 to your computer and use it in GitHub Desktop.
Save dani-z/8bc715ffb8e24e50603366eed21bd330 to your computer and use it in GitHub Desktop.
// 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>
);
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment