xchain-components/src/components/XIcon/index.js

Xchain Components

/* @flow */
/* eslint react/jsx-filename-extension: 0 */

import * as React from 'react';
import { Icon } from 'semantic-ui-react';

type Props = {
  width?: string,
  height?: string,
  name?: string,
  link?: boolean,
  disabled?: boolean,
  color?: string,
  iconHeight?: string,
  notification?: boolean,
  inverted?: boolean,
};

const IconStyle = {
  position: 'absolute',
  top: 5,
  right: 0,
  color: '#ff68a4',
  background: 'transparent',
  fontSize: '5px',
};

const XIcon = (props: Props) => {
  const {
    width, height, name, link, color, disabled, notification, iconHeight, inverted, ...rest,
  } = props;
  return (
    <Icon.Group
      {...rest}
      style={{
        width,
        height,
      }}
    >
      <Icon
        style={{
          color,
          fontSize: iconHeight,
        }}
        link={link}
        disabled={disabled}
        name={name}
        inverted={inverted}
      />
      {
        notification
          ? (
            <Icon
              style={IconStyle}
              name="circle"
            />
          ) : null
    }
    </Icon.Group>
  );
};

XIcon.defaultProps = {
  width: '25px',
  height: '23px',
  name: 'help',
  link: false,
  disabled: false,
  color: '#e6ebf2',
  notification: false,
  iconHeight: '20px',
  inverted: false,
};

export default XIcon;