SVG 图标在捆绑后不呈现（webpack）

Question

I'm using the file-loader plugin, to load my images, well, all images are displayed correctly after the webpack build, but my SVG's icons don't appear on the page. The folder structure is correct, being the same for all images. And no type of error is returned

 const HtmlWebpackPlugin = require('html-webpack-plugin'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const path = require('path'); module.exports = { entry: './src/js/controller.js', output: { filename: 'index.js', path: path.resolve(__dirname, 'dist'), clean: true, }, module: { rules: [ //Parsing Styles { test: /\.s[ac]ss$/i, use: [ // Creates `style` nodes from JS strings MiniCssExtractPlugin.loader, // Translates CSS into CommonJS "css-loader", // Compiles Sass to CSS "sass-loader", ], }, //Parsing Images { test: /\.(png|jpe?g|gif|svg)$/i, use: [ { loader: 'file-loader', options: { name: '[path][name].[ext]' }, }, ] }, ], }, plugins: [ new HtmlWebpackPlugin({ template: './index.html', filename: 'index.html' }), new MiniCssExtractPlugin({ filename: 'style.css' }) ] }

My icons are embedded in html directly.

 <button class="btn search__btn"> <svg class="search__icon"> <use href="src/img/icons.svg#icon-search"></use> </svg> <span>Search</span> </button>

The structure of my folders is as follows:

Develop

src/
├── img/
│   ├── ...
│   └──  icons.svg
├───js/
│    └──index.js
├───sass/
│   ├──...
│   └──main.scss
index.html

Build

dist/
├── src/
│   └── img/
│       ├──...
│       └──icons.svg
style.css
index.js
index.html

Answer 1

Try installing npm install @svgr/webpack and then add the following rule in webpack

{
        test: /\.svg$/,
        use: ['@svgr/webpack'],
      },