title: React : Returning SVG contents as variable?
body: <p>I am currently doing this:</p>
  
  <pre><code>class Checked extends React.Component {
      render() {
          return (
              &lt;svg width="24" fill="#00ea00" height="24" viewBox="0 0 24 24"&gt;
                  &lt;path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/&gt;
              &lt;/svg&gt;
          );
      }
  }
  </code></pre>
  
  <p>But I would like to be doing something like this:</p>
  
  <pre><code>import imgTable from '../img/catering_table.svg'
  
  class Checked extends React.Component {
    render() {
        return imgTable;
    }
  }
  </code></pre>
  
  <p>Why does this not work? Am I returning the variable here and not the actual contents? I would have thought the two are equivalent.</p>
  
  <p>PS: Webpack is set up correctly, I am using imports somewhere else in that file, so it's not that. (I am using GatsbyJS here by the way)</p>