SVG's não renderizam após o buldling com webpack

[LuisMatheus-dev]

Olá , no meu projeto tenho alguns icones em svg, estou usando o plugin file-loader, para carregar minhas imagens e os SVG's, bem, todas as imagens são exibidas corretamente após a buldling do webpack, mas os SVG's não aparecem na página.
O caminho para os arquivos esta correto, sendo a mesma para todas as imagens.
Nenhum tipo de erro é retornado.
As únicas soluções que encontro na internet é com o svgr , mas não estou usando react no meu projeto

Esta é minha configuração do webpack:

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'
    })
  ]
}

Um exemplo de icone que estou incorporando

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

Talvez seja útil mostrar como é a estrutura deste projeto:
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

[ninetails]

Se eu não me engano, posso estar falando besteira, mas o Webpack irá carregar no loader somente os assets que forem referenciados dentro da sua aplicação, apontado pelo entrypoint entry: './src/js/controller.js',.

Se teu svg está sendo referenciado no HTML que não é carregado pelo Webpack por não estar dentro de uma aplicação transpilada (ex: chamando direto pelo HTML, mesmo que sendo template pois se não me engano no template ele apenas troca variáveis por apontamentos do build), ele não aplicará a transformação, logo não processará o svg.

[LuisMatheus-dev]

Putz não entendi muito bem kk
Mas o svg junto com as imagens estão sendo importadas dentro do controller.js, e quando entro na pasta dist tanto no html quanto no diretório encontro os SVG's.
E mais uma coisa que aconteceu, quando fiz o build pelo webpack-server meus ícones apareceram..

Mas continuo com o problema porque preciso subir o dist para o deploy no netlify

[ninetails]

Então se está dentro do controller.js e carregando pelo webpack-server creio que estariam corretos...

Aí seria de debugar o webpack mesmo. Vê se ele tá criando o output:

https://webpack.js.org/api/stats/

[LuisMatheus-dev]

Finalmente consegui resolver, não especifiquei que meus ícones estão em um sprite chamado icons.svg, não sei exatamente o motivo do webpack não reconhecer esse tipo de método.
Para adicionar sprites é necessário o plugin sprite-svg-loader para o webpack, que ficará a cargo de fazer o devido carregamento.

A Solução não é minha, aqui tem um post com a resposta https://stackoverflow.com/a/56198354/13433225, porem deixo a forma que resolvi o problema seguindo a solução acima

Depois de instalar o loader ( yarn add sprite-svg-loader ) ,devemos fazer algumas configurações simples

...
  {
        test: /\.svg$/,
        include: /.*_icons\.svg/, //Include é necessário
        use: [
          { loader: 'svg-sprite-loader', options: { publicPath: "" }}
        ]
  }

Instanciando

 plugins: [
    new SVGSpriteLoader()
  ]

No meu arquivo principal apenas importei meu icons.svg

//Sprite base
import '../img/_icons.svg';

No html é um pouco diferente, é importante notar o "_" no final do nome do arquivo sprite

<button class="btn search__btn">
   <svg class="search__icon">
      <use  xlink:href="#_icons_icon-search"></use>
   </svg>
   <span>Search</span>
</button>

Vlww @ninetails pelo apoio