Unable to setup webpack svg-inline-loader correctly. Svg images don't appear - svg

Question

I want to load svg images, So I downloaded svg-inline-loader. and configured using this example: Webpack svg-inline-loader. 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?
HTML
<img src="./svg/facebook-square-brands.svg" alt="Facebook"/>
My Webpack config file.js
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"
})
]
};
PackageJson dependacies:
"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"
},

Answer 1

I know it's over a year since the question is asked but i add an answer for future people landing here.
svg-inline-loader are suppose to be used to use svg inline as the file it self injected. What you want to accomplished is best to use either url-loader or svg-url-loader (https://www.npmjs.com/package/svg-url-loader) to convert svg to base64 so you can use it in src-attribute.
If you want to use both together you can combine it with following oneOf config:
{
test: /\.svg$/,
oneOf: [
{
include: path.resolve(__dirname, '../node_modules/package-name/'),
use: 'svg-inline-loader'
},
{
exclude: path.resolve(__dirname, '../node_modules/package-name/'),
use: 'url-loader'
}
]
}