wrongIsExportedFlagExample.tsx

import React, { ReactElement } from 'react';
import classNames from 'classnames';
import style from './style.scss';

type IconName = 'check' | 'chevron-down' | 'minus';

interface IconProps {
  name: IconName;
  size?: 'small' | 'medium' | 'large';
  color?: 'negative-80' | 'neutral-50' | 'neutral-90' | 'neutral-150';
  weight?: 'thin' | 'bold';
}

function getIconSVGContents(name: IconName): ReactElement {
  switch (name) {
    case 'check':
      return <polyline points="20 6 9 17 4 12"></polyline>;
    case 'chevron-down':
      return <path d="M6 9l6 6 6-6" />;
    case 'minus':
      return <line x1="5" y1="12" x2="19" y2="12"></line>;
  }
}

export const Icon: React.FC<IconProps> = ({
  name,
  size = 'medium',
  color = 'neutral-150',
  weight = 'bold',
  ...rest
}) => {
  const className = classNames({
    [style.icon]: true,
    [style['icon--size-small']]: size === 'small',
    [style['icon--size-medium']]: size === 'medium',
    [style['icon--size-large']]: size === 'large',
    [style['icon--color-negative-80']]: color === 'negative-80',
    [style['icon--color-neutral-50']]: color === 'neutral-50',
    [style['icon--color-neutral-90']]: color === 'neutral-90',
    [style['icon--color-neutral-150']]: color === 'neutral-150',
    [style['icon--weight-thin']]: weight === 'thin',
    [style['icon--weight-bold']]: weight === 'bold'
  });

  return (
    <svg
      {...rest}
      className={className}
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
      fill="none"
      strokeLinecap="butt"
      strokeLinejoin="miter"
    >
      {getIconSVGContents(name)}
    </svg>
  );
};