title: how to set up an inline svg with webpack
body: <p>I am wondering how to set up an inline svg with webpack? </p>
  
  <p>I am following the <a href="https://github.com/christianalfoni/react-webpack-cookbook/wiki/Loading-SVG" rel="noreferrer">react-webpack-cookbook</a>. </p>
  
  <p>I have my <strong>webpack.config</strong> set up correctly with the <strong>file loader</strong>. </p>
  
  <p>However the example shows using a background image like this: </p>
  
  <pre><code>.icon {
     background-image: url(./logo.svg);
  }
  </code></pre>
  
  <p>which works fine, but I want to have an inline svg image how do I do this to include my <strong>logo.svg</strong> inline in my react component?</p>
  
  <pre><code>import React, { Component } from 'react'
  
  class Header extends Component {
  
    render() {
      return (
          &lt;div className='header'&gt;
              &lt;img src={'./logo.svg'} /&gt;
          &lt;/div&gt;
      );
    }
  };
  
  export default Header
  </code></pre>