title: Having an issue rendering an SVG icon, using Webpack 4
body: <p><strong>What I'm trying to do:</strong>
   Render an svg icon.</p>
  
  <p><strong>My results:</strong> Although svg and img property append to DOM, HTML does not render icon and I get no webpack or browser error.</p>
  
  <p><strong>My component file structure/ approach</strong> 
  <a href="https://i.stack.imgur.com/BF2XS.png" rel="nofollow noreferrer">I import SVG into sidebar.js</a></p>
  
  <p><em>sidebar.js</em></p>
  
  <pre><code>import './sidebar.scss';
  import photo from './usrPic.jpg';
  import '../base/SVG/twitter.svg';
  import  '../base/sprite.svg';
  
  
  
  export default class Sidebar {
  
  
      render() {
  
          const img = document.createElement('img');
          img.alt = 'image';
          img.width = 200;
          img.src = photo;
          img.classList = 'sidebar__user-photo';
  
          // const svg = document.createElement('svg');
  
  
          const use = document.createElement('use');
          use.setAttribute('href', `../base/SVG/twitter.svg#icon-twitter.svg`);
  
          const html = `&lt;div class="sidebar-box"&gt;
                          &lt;div class="sidebar-header"&gt;
                              &lt;span class="sidebar-title__main"&gt;Something&lt;/span&gt;
                              &lt;span class="sidebar-title__sub"&gt;Sub&lt;/span&gt;
                              &lt;div class="Icon-box"&gt;
                                  &lt;svg class="twitter__icon"&gt;
  
  
                                  &lt;/svg&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;`;
          const contentBox = document.querySelector('.content');
          contentBox.insertAdjacentHTML('beforeend', html);
  
          const sidebarHeader = document.querySelector('.sidebar-header');
          sidebarHeader.insertAdjacentElement("afterbegin", img);
  
          const twitterIcon = document.querySelector('.twitter__icon');
          twitterIcon.insertAdjacentElement("afterbegin", use);
      }
  }
  </code></pre>
  
  <p><em>webpack.dev.config</em></p>
  
  <pre><code>...
      {
         test: /\.svg$/,
         use: 'svg-sprite-loader'
  
       },
       {
         test: /\.(png|svg|jpg|gif)$/,
         use:  'file-loader',
       },
  </code></pre>
  
  <p><em>html</em></p>
  
  <p><a href="https://i.stack.imgur.com/KhfGT.png" rel="nofollow noreferrer">HTML code</a></p>
  
  <p><strong>What I have tried thus far:</strong></p>
  
  <ol>
  <li><p>swapping sprite.svg with direct icon.svg in <code>&lt;use href="..." /&gt;</code></p></li>
  <li><p>I swapped <code>&lt;use href="..." /&gt;</code> . with <code>&lt;use xlink:href="..." /&gt;</code></p></li>
  <li><p>I swapped the  element with "img" property.</p></li>
  <li><p>Applied a 40px to width &amp; height on svg element </p>
  
  <p>Given all this, I do not get an error yet the element is appended to
  the DOM, but no icon.</p>
  
  <p>Any assistance is greatly appreciated.</p></li>
  </ol>
  
  <p><strong>1st UPDATE:</strong></p>
  
  <p><em>sidebar.js</em></p>
  
  <p>Was modified to this:</p>
  
  <pre><code>...
  
  var SVG_NS = 'http://www.w3.org/2000/svg';
          var XLink_NS = 'http://www.w3.org/1999/xlink';
          const use = document.createElementNS(SVG_NS, 'image');
          use.setAttributeNS(null, 'width', '100');
          use.setAttributeNS(null, 'height', '100');
          use.setAttributeNS(XLink_NS, 'xlink:href', '../base/sprite.svg#icon-twitter' );
  
  const twitterIcon = document.querySelector('.twitter__icon');
          twitterIcon.insertAdjacentElement("afterbegin", use);
  </code></pre>
  
  <p><strong><em>This produced a Webpack error</em></strong></p>
  
  <pre><code>ERROR in ./src/components/sidebar/sidebar.js
  Module not found: Error: Can't resolve 'svg-sprite-loader' in '/Users/dev/Developer/projects/dcbio'
   @ ./src/components/sidebar/sidebar.js 10:0-28
   @ ./src/index.js
  </code></pre>
  
  <p>Commenting out <code>../sprite.svg</code> file took care of the said error. Yet, the browser now produces a 404 error that's driving me crazy.</p>
  
  <p><a href="https://i.stack.imgur.com/0KQ7v.png" rel="nofollow noreferrer">Browser Error</a></p>
  
  <p><strong>Elements Rendered</strong>
  <a href="https://i.stack.imgur.com/6dWvh.png" rel="nofollow noreferrer">HLTM Elements</a></p>
  
  <p>Recommendations is appreciated.</p>
  
  <p>Thanks</p>
  
  <p><strong>2nd UPDATE</strong></p>
  
  <p>After reading through webpack's doc and its git, I made changes to my webpack.config to this:</p>
  
  <pre><code>const path = require('path');
  const { CleanWebpackPlugin } = require('clean-webpack-plugin');
  const HtmlWebpackPlugin = require('html-webpack-plugin');
  const SpriteLoaderPlugin = require('svg-sprite-loader/plugin');
  
  module.exports = {
      entry: './src/index.js',
      output: {
          filename: 'bundle.js',
          path: path.resolve(__dirname, './dist'),
          publicPath: '',
      },
      mode: 'development',
      devServer: {
          contentBase: path.resolve(__dirname, './dist'),
          index: 'index.html',
          port: 9000
      },
      module: {
          rules: [
              {
                  test: /\.css$/,
                  use: [
                      'style-loader', 'css-loader'
                  ]
              },
              {
                  test: /\.scss$/i,
                  use: [
                      'style-loader', 'css-loader', 'sass-loader'
  
                  ],
              },
              {
                  test: /\.(png|jpg|gif)$/,
                  use:  [ 'file-loader'],
  
              },
  
              {
                  test: /\.svg$/,
                  use: [
                      {
                      loader: 'svg-sprite-loader',
                      options: {
                          extract: true,
                          publicPath: '/src'
  
                      }
                  },
                      'svg-inline-loader',
                      'svgo-loader'
                  ] 
              },
  
              {
                  test: /\.js$/,
                  exclude: /node_modules/,
                  use: {
                      loader: 'babel-loader',
                      options: {
                          presets: [ '@babel/env' ],
                          plugins: [ 'transform-class-properties' ]
                      }
                  }
              },
              {
                  test: /\.hbs$/,
                  use: [
                      'handlebars-loader'
                  ]
              }
          ],
      },
      plugins: [
          new CleanWebpackPlugin(),
          new HtmlWebpackPlugin({
              template: 'src/index.hbs',
              title: 'Hello world',
              description: 'Some description'
  
          }),
          new SpriteLoaderPlugin({
              plainSprite: true,
              spriteAttrs: {
                  id: 'icon-twitter'
              }
          })
      ],
  };
  </code></pre>
  
  <p>I still get a browser error - see pic</p>
  
  <p><a href="https://i.stack.imgur.com/iWOgS.png" rel="nofollow noreferrer">Browser Error</a></p>
  
  <p>DOM returns this:
  <a href="https://i.stack.imgur.com/FJOYj.png" rel="nofollow noreferrer">enter image description here</a></p>