@spaced-out/ui-design-system/lib/components/Icon/Icon.js.flow

Sense UI components library

// @flow strict

import * as React from 'react';

import type {ColorTypes} from '../../types/typography';
import {TEXT_COLORS} from '../../types/typography';
import classify from '../../utils/classify';

import typographyStyle from '../../styles/typography.module.css';


export const ICON_TYPE = Object.freeze({
  regular: 'regular',
  solid: 'solid',
  duotone: 'duotone',
  brands: 'brands',
});

export const ICON_SIZE = Object.freeze({
  small: 'small',
  medium: 'medium',
  large: 'large',
});

export type IconSize = $Keys<typeof ICON_SIZE>;
export type IconType = $Keys<typeof ICON_TYPE>;

export type IconProps = {
  type?: IconType,
  name: string,
  size?: IconSize,
  color?: ColorTypes,
  className?: string,
  onClick?: ?(SyntheticEvent<HTMLElement>) => mixed,
  ariaLabel?: string,
  swapOpacity?: boolean,
  style?: {[string]: string},
};

export const Icon: React$AbstractComponent<IconProps, HTMLDivElement> =
  React.forwardRef<IconProps, HTMLDivElement>(
    (
      {
        type = 'regular',
        name = '',
        size = 'medium',
        color = TEXT_COLORS.primary,
        className,
        style,
        onClick,
        swapOpacity,
      }: IconProps,
      forwardRef,
    ) => (
      <>
        {!!name && (
          <div
            className={classify(
              typographyStyle.centerAlignFlex,
              typographyStyle[`${size}Icon`],
              typographyStyle[color],
              className,
            )}
            onClick={onClick}
            ref={forwardRef}
          >
            <i
              className={classify(`fa-${type} fa-${name} `, {
                ['fa-swap-opacity']: swapOpacity,
              })}
              style={style}
            />
          </div>
        )}
      </>
    ),
  );