Why doesn't background url work with svg files in webpack?

Question

webpack

My config:

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const path = require('path');

const resolve = dir => path.join(__dirname, '..', dir);

module.exports = {
  entry: {
    app: './src/index.js',
  },
  output: {
    path: resolve('dist'),
    filename: 'js/[name].[hash].js',
    publicPath: process.env.NODE_ENV === 'production' ? '/' : '/',
  },
  optimization: {
    splitChunks: {
      cacheGroups: {
        vendor: {
          chunks:'initial',
          name: 'vendor',
          test: 'vendor',
          enforce: true,
        },
      },
    },
  },
  resolve: {
    extensions: ['.js', '.json'],
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        enforce: 'pre',
        use: {
          loader: 'eslint-loader',
        },
      },
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        },
      },
      {
        test: /\.html$/,
        exclude: /node_modules/,
        use: {
          loader: 'html-loader',
        },
      },
      {
        test: /\.(sa|sc|c)ss$/,
        exclude: /node_modules/,
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader',
            options: {
              sourceMap: true,
            },
          },
          {
            loader: 'postcss-loader',
            options: {
              sourceMap: true,
            },
          },
          {
            loader: 'sass-loader',
            options: {
              sourceMap: true,
            },
          },
        ],
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        exclude: /node_modules/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: '[hash]-[name].[ext]',
        },
      },
      {
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
        exclude: /node_modules/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: '[hash]-[name].[ext]'
        },
      },
      {
        test: /\.(woff2?|eot|ttf|otf|svg)(\?.*)?$/,
        exclude: /node_modules/,
        loader: 'file-loader',
        options: {
          limit: 10000,
          name: '[name]-[hash].[ext]',
        },
      },
    ],
  },
};

Question: with this config, import inside jsx works fine, both in dev mode and in prod. But the background url does not work, that is, the SVG image is not visible, everything is fine with PNG.
In css I write like this:

.icon {
  width: 4.2rem;
  height: 5.3rem;
  background: url('../img/icon.svg') left top no-repeat;
  background-size: contain;
}

And instead of an icon, this is what happens:

background: url(data:image/svg+xml;base64,bW9kdWxlLmV4cG9ydHMgPSBfX3dlYnBhY2tfcHVibGljX3BhdGhfXyArICJpY29uLWRvYy1hNjk0NTdkY2IzZWQ1OWVhZmZhZjE4MDA3MTkwNWI1Yi5zdmciOw==) left top no-repeat

The project structure is as follows:

project
--public
----index.html
--src
----assets
------img
--------icon.svg
------scss
--------icons.scss (тут и пишу)
----components
----views
----...

Answer 1

Я не знаю как починить вашу проблему, но на вашем месте я бы воспользовался copy-webpack-plugin и копировал бы папку с отдельными изображениями, в результате у вас в build появится папка с файлами

Answer 2

Если не устареет то вот
https://www.npmjs.com/package/image-webpack-loader
Мне помогло