can't load svg file from html file using svg-inline-loader

[DawidMmM]

Is there anyone who knows how to load svg files from index.html?

This is how i try to load svg files in my html file:

<main class="content">
            <img class="img img_custom-size" src="img/close.svg">
            <img src={require("img/close.svg")} /> 
            <img src={require('!svg-inline!img/close.svg')} />
            <img class="img img_custom-size" src=<%=require("./img/close.svg") %>
</main>

and this is my webpack.common.js:

const {resolve} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');

module.exports = {
  entry: {
    // polyfills: 'babel-polyfill',
    bundle: './src/app.js'
  },
  output: {
    path: resolve(__dirname, 'dist'),
    filename: '[name].js'
  },
  resolve: {
    extensions: ['.js', '.css']    
  },
  module: {    
    rules: [
      {
        test: /\.scss$/,
        enforce: "pre",
        loader: 'import-glob-loader'
      },  
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['env']
          }
        }
      },
      { 
        test: /\.(ttf|eot|woff2?|svg)$/,
        loaders: [
          {
            loader: 'url-loader',
            options: { 
              limit: 50000,    
              name: "./fonts/[name].[ext]"
            }
          }
        ]
      },
      {
        test: /\.(ico|gif|png|jpe?g)$/,
        loaders: [
          {
            loader: 'file-loader',
            options: {
              name: '[path][name].[ext]',
              context: './src'     
            }
          }          
        ]
      },      
      {
        test: /\.svg$/,
        loaders: [
          {
            loader: 'svg-inline-loader'                      
          }          
        ]
      }
    ]
  },
  plugins: [       
    new HtmlWebpackPlugin({
      title: 'Sticky Notes',
      hash: true,    
      template: './src/index.html',
      // minify: {
      //   collapseWhitespace: true
      // },
    }) 
  ]
};

and any of my paths don't work. I really don't know how to make it works.

[bringmetheaugust]

maybe I am wrong. this loader takes svg file and returns pure <xml> code as a string. U can paste result (completed xml code) into html using innerHTML or using dangerouslySetInnerHTML={{__html: svg} via React, where svg will be your received code

[voletiswaroop]

following on the same issue.

@bringmetheaugust :- When I print the svg value I'm getting something like this: module.exports = webpack_public_path + "ce988d232617f71a03760e30d41171bd.svg";

[bringmetheaugust]

@voletiswaroop here solution without frameworks: https://stackoverflow.com/a/56049896/10442501 here solution for React: https://stackoverflow.com/a/34257985/10442501 if U still have the same issue, after checking these solutions, share Your webpack configuration and code

[dmtstr]

<main>
    <%= require("./img/close.svg") %>
</main>

and remove svg from url-loader regexp