42 lines
1.0 KiB
TypeScript
42 lines
1.0 KiB
TypeScript
import {
|
|
Box,
|
|
Flex,
|
|
FlexProps,
|
|
} from '@chakra-ui/react';
|
|
import { forwardRef, ReactNode } from 'react';
|
|
|
|
export type IconProps = FlexProps & {
|
|
icon: ReactNode;
|
|
color?: string;
|
|
sizeIcon?: FlexProps['width'];
|
|
};
|
|
|
|
export const Icon = forwardRef<HTMLDivElement, IconProps>(
|
|
({ icon: IconEl, color, sizeIcon = '1em', ...rest }, ref) => {
|
|
return (
|
|
<Flex flex="none"
|
|
minWidth={sizeIcon}
|
|
minHeight={sizeIcon}
|
|
maxWidth={sizeIcon}
|
|
maxHeight={sizeIcon}
|
|
align="center"
|
|
padding="1px"
|
|
ref={ref}
|
|
{...rest}>
|
|
<Box
|
|
marginX="auto"
|
|
width="100%"
|
|
minWidth="100%"
|
|
height="100%"
|
|
color={color}
|
|
asChild
|
|
>
|
|
{IconEl}
|
|
</Box>
|
|
</Flex>
|
|
);
|
|
}
|
|
);
|
|
|
|
Icon.displayName = 'Icon';
|