@holokit/icons/src/components/Icon/Icon.js

Components, fonts, icons, and css files for creating and displaying icons.

import React from 'react'
import PropTypes from 'prop-types'

import {
  IconSvgPathsMajor,
  IconSvgPathsMicro,
  IconSvgPathsMinor,
} from '../../generated/iconSvgPaths'

import * as IconNames from '../../generated/iconNames'
import * as IconSizes from '../../iconSizes'

const SIZE_NAME_TO_SIZE = {
  major: 24,
  micro: 8,
  minor: 16,
}

const SIZE_NAME_TO_ICON_MAP = {
  major: IconSvgPathsMajor,
  minor: IconSvgPathsMinor,
  micro: IconSvgPathsMicro,
}

/**
 * Basic Icon component
 */
const Icon = props => {
  const { name, size, svgProps } = props

  const pxSize = SIZE_NAME_TO_SIZE[size]
  const pathMap = SIZE_NAME_TO_ICON_MAP[size]
  const iconPath = pathMap[name]

  return !iconPath ? null : (
    <div className={`hk-icon hk-icon-size-${size}`}>
      <svg height={pxSize} width={pxSize} {...svgProps}>
        {iconPath.map(path => (
          <path d={path} />
        ))}
      </svg>
    </div>
  )
}

Icon.names = IconNames
Icon.sizes = IconSizes

Icon.defaultProps = {
  size: 'minor',
  svgProps: {},
}

Icon.propTypes = {
  /**
   * Name of the icon the show.
   */
  name: PropTypes.oneOf(Object.keys(IconNames)),

  /**
   * The size of the icon.
   */
  size: PropTypes.oneOf(Object.keys(IconSizes)),

  /**
   * Props to be applied to the svg icon.
   */
  svgProps: PropTypes.object,
}

export default Icon