diff options
Diffstat (limited to 'src/components/atoms/images/icons/plus-minus-icon/plus-minus-icon.tsx')
| -rw-r--r-- | src/components/atoms/images/icons/plus-minus-icon/plus-minus-icon.tsx | 30 |
1 files changed, 30 insertions, 0 deletions
diff --git a/src/components/atoms/images/icons/plus-minus-icon/plus-minus-icon.tsx b/src/components/atoms/images/icons/plus-minus-icon/plus-minus-icon.tsx new file mode 100644 index 0000000..ed6bcf2 --- /dev/null +++ b/src/components/atoms/images/icons/plus-minus-icon/plus-minus-icon.tsx @@ -0,0 +1,30 @@ +import type { FC, HTMLAttributes } from 'react'; +import styles from './plus-minus-icon.module.scss'; + +export type PlusMinusIconShape = 'minus' | 'plus'; + +export type PlusMinusIconProps = Omit< + HTMLAttributes<HTMLDivElement>, + 'children' +> & { + /** + * Which shape should be displayed. + */ + shape: PlusMinusIconShape; +}; + +/** + * PlusMinusIcon component + * + * Render a plus or a minus icon. + */ +export const PlusMinusIcon: FC<PlusMinusIconProps> = ({ + className = '', + shape, + ...props +}) => { + const shapeClass = styles[`icon--${shape}`]; + const iconClass = `${styles.icon} ${shapeClass} ${className}`; + + return <div {...props} className={iconClass} />; +}; |
