svg.jsx

svg.jsx

// option for inlining (for index)
// option for caching (for SVGs used more than once)

export default React.createClass({
  getInitialState() {
    return {
      svg: ''
    }
  },

  componentDidMount() {
    const request = new XMLHttpRequest()
    request.open('GET', require(`../../../svg/${ this.props.file }`), true)
    request.onreadystatechange = () => {
      if (request.readyState === 4 && request.status==200) {
        this.setState({svg: request.response})
      }
    }
    request.send()
  },

  render() {
    return <span className={this.props.className}
                 dangerouslySetInnerHTML={{__html: this.state.svg }} />
  }
})