46 lines
1.4 KiB
TypeScript
46 lines
1.4 KiB
TypeScript
import clsx from 'clsx';
|
|
import React from 'react';
|
|
import colors, { Color } from '@views/styles/colors.module.scss';
|
|
import fonts, { Size } from '@views/styles/fonts.module.scss';
|
|
import styles from './Icon.module.scss';
|
|
import { MaterialIconCode } from './MaterialIcons';
|
|
|
|
/**
|
|
*
|
|
*/
|
|
export type Props = {
|
|
name: MaterialIconCode;
|
|
className?: string;
|
|
style?: React.CSSProperties;
|
|
color?: Color;
|
|
backgroundColor?: Color;
|
|
weight?: 'normal' | 'bold';
|
|
size?: Size | number;
|
|
onClick?: (e: React.MouseEvent<HTMLSpanElement>) => void;
|
|
testId?: string;
|
|
};
|
|
|
|
/**
|
|
* This is a reusable Icon component that uses the Material Icons Round font internally
|
|
* You can find the list of icons here: https://fonts.google.com/icons?selected=Material+Icons+Round
|
|
*/
|
|
export default function Icon(props: Props) {
|
|
const style = props.style || {};
|
|
|
|
style.color ??= colors?.[props.color ?? 'charcoal'];
|
|
style.backgroundColor ??= props.backgroundColor ? colors?.[props.backgroundColor] : undefined;
|
|
style.fontSize ??= fonts?.[`${props.size}_size`];
|
|
style.fontWeight ??= fonts?.[`${props.weight ?? 'normal'}_weight`];
|
|
|
|
return (
|
|
<span
|
|
data-testid={props.testId}
|
|
style={style}
|
|
className={clsx(styles.icon, props.className)}
|
|
onClick={props.onClick}
|
|
>
|
|
{props.name}
|
|
</span>
|
|
);
|
|
}
|