InlineSvg

helpers.js

// *************************************
//
//   Helpers
//   -> Utility functions
//
// *************************************

// -------------------------------------
//   Create Markup
// -------------------------------------

export function createMarkup(markup) {
  return { __html: markup }
}

// -------------------------------------
//   Parse SVG
// -------------------------------------

export function parseSvg(svg) {
  let parser = new DOMParser()

  let element = parser.parseFromString(svg, 'image/svg+xml')

  let markup = element.children[0].innerHTML
  let viewBox = element.children[0].getAttribute('viewBox')

  return { markup, viewBox }
}

hero.jsx

// *************************************
//
//   Hero
//   -> Page banner
//
// *************************************

// -------------------------------------
//   Dependencies
// -------------------------------------

import React from 'react'

// ----- Components ----- //

import InlineSvg from './inline-svg.jsx'

// -------------------------------------
//   Component
// -------------------------------------

export default class Hero extends React.Component {
  render() {
    return (
      <header className='hero'>
        <div className='row'>
          <div className='logo'>
            <h1 className='srt'>Type Specimens</h1>
            <InlineSvg className='logo-svg' src='/images/logo.svg' width={593} height={174}/>
            <p className='logo-tagline'>
              Curated from around the web by&nbsp;
              <a className='link link--underlined' href='https://johndjameson.com/'>John&nbsp;D.&nbsp;Jameson</a>
            </p>
          </div>
        </div>
      </header>
    )
  }
}

inline-svg.jsx

// *************************************
//
//   Inline SVG
//   -> Request and display SVG
//
// *************************************

// -------------------------------------
//   Dependencies
// -------------------------------------

import React from 'react'

// ----- Helpers ----- //

import { createMarkup, parseSvg } from '../helpers.jsx'

// -------------------------------------
//   Component
// -------------------------------------

export default class InlineSvg extends React.Component {

  // ----- Constructor ----- //

  constructor(props) {
    super(props)

    this.state = {
      markup: null,
      viewBox: null
    }
  }

  // ----- Lifecycle ----- //

  componentWillMount() {
    this._loadAsset()
  }

  render() {
    return (
      <svg
        dangerouslySetInnerHTML={createMarkup(this.state.markup)}
        viewBox={this.state.viewBox}
        {...this.props}
      />
    )
  }

  // ----- Load Asset ----- //

  _loadAsset() {
    let request = new XMLHttpRequest()
    let self = this

    request.open('GET', this.props.src, true)

    request.onload = function() {
      self.setState(parseSvg(this.response))
    }

    request.send()
  }
}

InlineSvg.propTypes = {
  src: React.PropTypes.string.isRequired,
  width: React.PropTypes.number
}