title: How to import svg files and use them for src in image
body: <p>I'm running into an issue that I can't seem to solve. </p>
  
  <p>I have a svg file that I need to include in my project. Since I've build my own boilerplate I want to have the same functionality as <em>CRA</em> in that I can use the svg as the image src.</p>
  
  <p>i.e. </p>
  
  <pre><code>&lt;img src={svgfile} alt="some file" /&gt;
  </code></pre>
  
  <p>What would I need to do to have that functionality?<br>
  I tried to use file loader to get it to work but it throws an error.</p>
  
  <pre><code>{
      test: /\.(png|jpg|gif|svg)$/,
      use: [
        {
          loader: "file-loader",
          options: {}
        }
      ]
    },
  </code></pre>
  
  <p>Any help would be greatly appreciated.</p>
  
  <p>SA</p>
  
  <p><strong>webpack file</strong></p>
  
  <pre><code>{
    entry: "./src/browser/index.js",
    output: {
      path: path.resolve(__dirname, "public"),
      filename: "bundle.js",
      publicPath: "/"
    },
    module: {
      rules: [
        { test: /\.(js)$/, use: "babel-loader" },
        {
          test: /\.(png|jpg|gif|svg)$/,
          use: [
            {
              loader: "file-loader",
              options: {}
            }
          ]
        },
      ]
    },
    plugins: [
      new webpack.DefinePlugin({
        __isBrowser__: "true"
      })
    ]
  }
  </code></pre>