title: Rendering a scraped SVG in react component
body: <p>I have a function that scrapes my profile calendar from github. I am getting the SVG just fine. Then i set it to state (possibly the problem?). I realize that it's set as a string. This is probably wrong. What are some methods to accomplish this? Here is my component code.</p>
  
  <p>I'm also getting a</p>
  
  <pre><code>Public-Key-Pins: The site specified a header that did not include a matching pin.
  </code></pre>
  
  <p>error... This isn't related. Just thought i'd throw it in there.</p>
  
  <pre><code>import React from 'react'
  import cheerio from 'cheerio'
  import axios from 'axios'
  
  const baseURL = 'https://crossorigin.me/https://github.com/'
  
  function getSVG(user) {
      return new Promise((resolve, reject) =&gt; {
          const url = baseURL + user
          axios.get(url).then(res =&gt; {
              const load = cheerio.load(res.data)
              const parsed = load(".js-calendar-graph").html()
              const svg = '&lt;svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 720 120"&gt; ' + parsed + ' &lt;/svg&gt;';
              resolve(svg)
          }).catch(err =&gt; reject(err));
      })
  }
  
  export default class extends React.Component {
      constructor() {
          super()
          this.state = {
              svg: ''
          };
      }
      componentWillMount() {
          getSVG('archae0pteryx').then(svg =&gt; {
              // console.log("SVG ", svg)
              this.setState({ svg: svg });
          });
      }
      render() {
          const { svg } = this.state;
          console.log(this.state.svg)
          return (
              &lt;div&gt;
                  &lt;img src={svg} alt="github contrib cal"/&gt;
              &lt;/div&gt;
          )
      }
  }
  </code></pre>