SVG icons do not render after bundling (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

[How to setup an inline svg with webpack](https://stackoverflow.com/questions/34257800/how-to-set-up-an-inline-svg-with-webpack) — wahwahwah, May 18 '21 at 03:26

score 0 · Answer 1 · answered May 18 '21 at 09:59

0

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

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

answered May 18 '21 at 09:59

Rohit Singh

184
6

I'm not using react – Luis Matheus May 18 '21 at 21:22

SVG icons do not render after bundling (webpack)

1 Answers1