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

Sense UI components library

// @flow strict

import * as React from 'react';

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

import type {IconProps} from './Icon';
import {Icon} from './Icon';

import css from './SemanticIcon.module.css';


type ClassNames = $ReadOnly<{wrapper?: string, icon?: string}>;

export type SemanticIconProps = {
  ...IconProps,
  classNames?: ClassNames,
  semantic?: AlertSemanticType,
};

export const SemanticIcon = ({
  semantic = 'neutral',
  classNames,
  size = 'medium',
  ...iconProps
}: SemanticIconProps): React.Node => (
  <>
    {!!iconProps.name && (
      <div
        className={classify(
          css.iconContainer,
          css[semantic],
          css[size],
          classNames?.wrapper,
        )}
      >
        <Icon
          {...iconProps}
          className={classify(iconProps.className, classNames?.icon)}
          color={TEXT_COLORS[semantic]}
          size={size === 'large' ? 'medium' : size}
        />
      </div>
    )}
  </>
);