CloseIcon.js

import React, { Component } from 'react'
import Icon from './Icon'

export default function CloseIcon(props) {
  return (
    <Icon originalWidth={224} originalHeight={224} {...props}>
      <g>
        <polygon points="224.507,6.997 217.521,0 112.256,105.258 6.998,0 0.005,6.997 105.263,112.254
          0.005,217.512 6.998,224.512 112.256,119.24 217.521,224.512 224.507,217.512 119.249,112.254"/>
      </g>
    </Icon>
  )
}

Icon.js

import React, { Component, PropTypes } from 'react'
import { icon } from '../styles.js'

class Icon extends Component {
  getSize(originalWidth, originalHeight) {
    if (originalWidth > originalHeight) return { width: '1em', height: `${1 / (originalWidth / originalHeight)}em` }

    return { width: `${1 / (originalHeight / originalWidth)}em`, height: '1em' }
  }

  render() {
    const { originalWidth, originalHeight, ...otherProps } = this.props
    const size = this.getSize(originalWidth, originalHeight)

    return (
      <svg {...size} viewBox={`0 0 ${originalWidth} ${originalHeight}`} {...otherProps}>
        {this.props.children}
      </svg>
    )
  }
}

Icon.propTypes = {
  originalWidth: PropTypes.number.isRequired,
  originalHeight: PropTypes.number.isRequired,
}

export default Icon