Icon.tsx

import * as React from 'react'

import { colors } from '../../utils/theme'
import { paths } from './paths'

import { IDefaultProps } from '../../utils/types'
import { StyledSvg } from './styles'

type TIconStyles = 'sm' | 'lg' | string | number
interface IIconStyles {
  /** The size of the icon */
  iconSize?: TIconStyles
}
export interface IIconProps extends IIconStyles, IDefaultProps {
  /** The name of the icon to use */
  iconName: string
  /** The color of the icon */
  iconColor?: string
}

/* tslint:disable */
export const iconSizes = {
  sm: '24',
  lg: '32',
  viewBox: '24'
}
/* tslint:enable */

export const ApIcon: React.SFC<IIconProps> = ({
  className,
  iconName,
  iconSize,
  iconColor,
  ...props
}) => {
  const getIconSize = (value: TIconStyles) => {
    return iconSizes[value] ? iconSizes[value] : value
  }

  const pathTags = paths[iconName].map((item: any, index: number) => {
    return (
      <path
        fill={item.fill ? item.fill : null}
        key={index}
        data-name={`${iconName}`}
        d={`${item.path}`}
      />
    )
  })

  return (
    <StyledSvg
      {...props as any}
      role="img"
      className={`ap-icon ${className ? className : ''}`}
      width={getIconSize(iconSize!)}
      height="100%"
      fill={iconColor}
      viewBox={`0 0 ${iconSizes.viewBox} ${iconSizes.viewBox}`}
      preserveAspectRatio="xMidYMid meet"
      x="0"
      y="0"
      id={iconName}
      ariaLabel={iconName}
    >
      <path id="background" fill="none" d="M0 0L24 0 24 24 0 24z" />
      {pathTags}
    </StyledSvg>
  )
}

ApIcon.defaultProps = {
  iconColor: colors.grey4,
  iconSize: 'sm'
}