title: Unable to setup webpack svg-inline-loader correctly. Svg images don't appear
body: <p>I want to load svg images, So I downloaded svg-inline-loader. and configured using this example: <a href="https://webpack.js.org/loaders/svg-inline-loader/" rel="noreferrer">Webpack svg-inline-loader</a>. After trying to load svg file I get this. Without using webpack svg-inline-loader loading svg files would give me an error. Any ideas how can I fix it?</p>
  
  <p><a href="https://i.stack.imgur.com/XDUOs.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/XDUOs.jpg" alt="enter image description here"></a></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;img src="./svg/facebook-square-brands.svg" alt="Facebook"/&gt;
  </code></pre>
  
  <p>My Webpack config file.js </p>
  
  <pre><code>const HtmlWebPackPlugin = require("html-webpack-plugin");
  const MiniCssExtractPlugin = require("mini-css-extract-plugin");
  module.exports = {
    entry:{
      scripts: "./src/scripts/index.js",
    },
    module: {
      rules: [
        {
          test: /\.js$/,
          exclude: /node_modules/,
          use: {
            loader: "babel-loader",
          }
        },
        {
          test: /\.html$/,
          use: [{ loader: "html-loader", options: { minimize: true } }]
        },
        {
          test: /\.(png|jpe?g)/i,
          use: [
            {
              loader: "url-loader",
              options: {
                name: "./img/[name].[ext]",
                limit: 10000
              }
            },
            {
              loader: "img-loader",
            }
          ]
        },
        {
          test: /\.svg$/,
          use: [
            {
              loader: 'svg-inline-loader',
            }
          ] 
        },
        {
          test: /\.scss$/,
          use: [
            MiniCssExtractPlugin.loader,
            "css-loader",
            "postcss-loader",
            "sass-loader"
          ]
        }    
      ]
    },
    plugins: [
      new HtmlWebPackPlugin({
        template: "src/index.html",
        filename: "./index.html"
      }),
      new MiniCssExtractPlugin({
        filename: "[name].css",
        chunkFilename: "[id].css"
      })
    ]
  };
  </code></pre>
  
  <p>PackageJson dependacies:</p>
  
  <pre><code> "devDependencies": {
      "@babel/core": "^7.2.0",
      "@babel/preset-env": "^7.2.0",
      "@babel/preset-react": "^7.0.0",
      "autoprefixer": "^9.4.1",
      "babel-loader": "^8.0.4",
      "css-loader": "^1.0.1",
      "file-loader": "^2.0.0",
      "html-loader": "^0.5.5",
      "html-webpack-plugin": "^3.2.0",
      "img-loader": "^3.0.1",
      "mini-css-extract-plugin": "^0.4.5",
      "node-sass": "^4.10.0",
      "postcss-loader": "^3.0.0",
      "sass-loader": "^7.1.0",
      "svg-inline-loader": "^0.8.0",
      "url-loader": "^1.1.2",
      "webpack": "^4.26.1",
      "webpack-cli": "^3.1.2",
      "webpack-dev-server": "^3.1.14"
    },
  </code></pre>