fd5c0c9747
* applied eslint * add locales and lint the project * removed error boundary * updated locales * fix min files * fix locales
66 lines
1.3 KiB
TypeScript
66 lines
1.3 KiB
TypeScript
import React from 'react';
|
|
import cn from 'classnames';
|
|
import SVG, { IconNames } from 'UI/SVG';
|
|
import styles from './icon.module.css';
|
|
|
|
interface IProps {
|
|
name: IconNames;
|
|
size?: number | string;
|
|
height?: number;
|
|
width?: number;
|
|
color?: string;
|
|
strokeColor?: string;
|
|
className?: string;
|
|
style?: object;
|
|
marginRight?: number;
|
|
inline?: boolean;
|
|
onClick?: () => void;
|
|
}
|
|
|
|
const Icon: React.FunctionComponent<IProps> = ({
|
|
name,
|
|
size = 12,
|
|
height = size,
|
|
width = size,
|
|
color = 'gray-medium',
|
|
strokeColor,
|
|
className = '',
|
|
style = {},
|
|
marginRight = 0,
|
|
inline = false,
|
|
...props
|
|
}) => {
|
|
const _style = {
|
|
width: `${width}px`,
|
|
height: `${height}px`,
|
|
...style,
|
|
};
|
|
if (marginRight) {
|
|
// @ts-ignore
|
|
_style.marginRight = `${marginRight}px`;
|
|
}
|
|
|
|
const additionalStyles = {
|
|
...(color === 'inherit' ? { fill: 'currentColor' } : {}),
|
|
...(strokeColor ? { stroke: strokeColor } : {}),
|
|
};
|
|
|
|
return (
|
|
<span
|
|
{...props}
|
|
style={{ ..._style, ...additionalStyles }}
|
|
className={cn(className, styles.wrapper, `fill-${color}`)}
|
|
data-inline={inline}
|
|
>
|
|
<SVG
|
|
name={name}
|
|
height={height}
|
|
width={width}
|
|
style={strokeColor ? { stroke: strokeColor } : undefined}
|
|
/>
|
|
</span>
|
|
);
|
|
};
|
|
|
|
Icon.displayName = 'Icon';
|
|
export default Icon;
|