c229125055
* Various improvements Cards, OmniSearch and Cards Listing * Improved cards listing page * Various improvements in product analytics * Charts UI improvements * ui crash * Chart improvements and layout toggling * Various improvements * Tooltips * Improved icons in cards listing page * Update WidgetFormNew.tsx * Sankey improvements * Icon and text updates Text alignment and color changes in x-ray Icon Mapping with appropriate names and shapes * Colors and Trend Chart Interaction updates * ui --------- Co-authored-by: nick-delirium <nikita@openreplay.com>
61 lines
1.3 KiB
TypeScript
61 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;
|