# All files / react/Icon index.jsx

84.62% Statements 22/26
76.92% Branches 20/26
100% Functions 2/2
84.62% Lines 22/26

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86

    2x

    73x
    73x

    73x

    73x

    73x
    73x

    73x

    73x
    73x
    46x

    73x
    1x

    73x
    73x

    73x

    2x
    77x
    77x
    77x

    2x

    2x

     import React from 'react'
    import PropTypes from 'prop-types'
    import styles from './styles.styl'
    import icons from '../../src/icons'
    import cx from 'classnames'

    const DEFAULT_SIZE = '16'

    function Icon(props) {
      const {
        icon,
        width,
        height,
        color,
        className,
        preserveColor,
        rotate,
        size,
        spin,
        ...restProps
      } = props
      let style = props.style
      let anchor
      Iif (icon.id) {
        anchor = `#${icon.id}`
      } else Iif (icon[0] === '#') {
        anchor = icon
      } else Eif (icons[icon]) {
        anchor = icons[icon].id ? `#${icons[icon].id}` : icons[icon]
      }

      Iif (!anchor) {
        console.warn(`Icon not found ${icon}.`)
        return null
      }

      style = Object.assign({}, style)
      if (color) {
        style['fill'] = color
      }
      if (rotate) {
        style['transform'] = `rotate(${rotate}deg)`
      }

      const iconClassName = preserveColor ? 'icon--preserveColor' : 'icon'
      const iconClass = cx(className, styles[iconClassName], {
        [styles['icon--spin']]: spin
      })

      return (
        <svg
          className={iconClass}
          style={style}
          width={width || size || DEFAULT_SIZE}
          height={height || size || DEFAULT_SIZE}
          {...restProps}
        >
          <use xlinkHref={anchor} />
        </svg>
      )
    }

    Icon.isProperIcon = icon => {
      const isSvgSymbol = icon && !!icon.id
      const isIconIdentifier = typeof icon === 'string'
      return isSvgSymbol || isIconIdentifier
    }

    Icon.propTypes = {
      icon: PropTypes.oneOfType([PropTypes.string, PropTypes.object]).isRequired,
      width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
      height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
      color: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
      className: PropTypes.string,
      preserveColor: PropTypes.bool,
      /** Shorthand for both width and height */
      size: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
      spin: PropTypes.bool
    }

    Icon.defaultProps = {
      spin: false
    }

    export default Icon