svg-icon-component.js

svg-icon-component.js

import React, { Component } from 'react'
import cx from 'classnames'
import PropTypes from 'prop-types'
import Instagram from '../../../static/images/instagram.svg'
import Story from '../../../static/images/story.svg'
import Facebook from '../../../static/images/facebook.svg'
import Twitter from '../../../static/images/twitter.svg'
import Snapchat from '../../../static/images/snapchat.svg'
import Youtube from '../../../static/images/youtube.svg'
import Blog from '../../../static/images/blog.svg'
import Travel from '../../../static/images/travel.svg'
import Event from '../../../static/images/event.svg'

class Icon extends Component {
  getIcon = () => {
    const { name } = this.props
    const icons = {
      'instagram': <Instagram />,
      'story': <Story />,
      'facebook': <Facebook />,
      'snapchat': <Snapchat />,
      'twitter': <Twitter />,
      'youtube': <Youtube />,
      'blog': <Blog />,
      'travel': <Travel />,
      'event': <Event />
    }

    return icons[name]
  }

  render () {
    return (
      <div className={cx('icon')}>
        { this.getIcon() }
      </div>
    )
  }
}

Icon.propTypes = {
  name: PropTypes.string
}

export default Icon