forked from mantinedev/mantine
-
Notifications
You must be signed in to change notification settings - Fork 0
/
ThemeIcon.tsx
55 lines (44 loc) · 1.5 KB
/
ThemeIcon.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
import React, { forwardRef } from 'react';
import {
DefaultProps,
MantineNumberSize,
MantineGradient,
MantineColor,
useComponentDefaultProps,
} from '@mantine/styles';
import { Box } from '../Box';
import useStyles, { ThemeIconVariant, ThemeIconStylesParams } from './ThemeIcon.styles';
export interface ThemeIconProps
extends DefaultProps<never, ThemeIconStylesParams>,
React.ComponentPropsWithoutRef<'div'> {
/** Icon */
children: React.ReactNode;
/** Predefined width and height or number for width and height in px */
size?: MantineNumberSize;
/** Predefined border-radius from theme.radius or number for border-radius in px */
radius?: MantineNumberSize;
/** Icon color from theme */
color?: MantineColor;
/** Controls appearance */
variant?: ThemeIconVariant;
/** Controls gradient settings in gradient variant only */
gradient?: MantineGradient;
}
const defaultProps: Partial<ThemeIconProps> = {
size: 'md',
variant: 'filled',
};
export const ThemeIcon = forwardRef<HTMLDivElement, ThemeIconProps>((props, ref) => {
const { className, size, radius, variant, color, children, gradient, unstyled, ...others } =
useComponentDefaultProps('ThemeIcon', defaultProps, props);
const { classes, cx } = useStyles(
{ variant, radius, color, size, gradient },
{ name: 'ThemeIcon', unstyled }
);
return (
<Box className={cx(classes.root, className)} ref={ref} {...others}>
{children}
</Box>
);
});
ThemeIcon.displayName = '@mantine/core/ThemeIcon';