title: Inline svg vs svg Sprite vs multiple external files
body: <p>OK so i am building a web app using Laravel &amp; Vue js mainly. I tried to use <a href="https://github.com/JetBrains/svg-sprite-loader#installation" rel="nofollow noreferrer">https://github.com/JetBrains/svg-sprite-loader#installation</a> but the exported svg shows up blank.</p>
  
  <p>In that context before proceeding, i started wondering if this is really worth it and tbh, i am not sure.</p>
  
  <p>So my question is, what is really the difference?</p>
  
  <p>Let's assume we can't use icon fonts, because we want to have multicoloured svgs.</p>
  
  <ul>
  <li><p>Is it even worth trying to use a package to merge the svgs into a sprite and then use it, or does it not really make a difference with http/2?</p></li>
  <li><p>Considering file size and data usage, is it worth trying to minimise this aspect using sprite instead of multiple external svg files?</p></li>
  <li><p>Inlining the svgs is also an option but this would dramatically increase the dom size.</p></li>
  </ul>
  
  <p>So i am left wondering... has anyone tried out all these techniques and figured out the best and most performant one and what are their true differences.</p>
  
  <p>Lastly if anyone would give me some input on why my svg sprite shows blank, it would be a huge bonus :P</p>
  
  <p>I have configured the above package in my webpack.mix like so:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const mix = require('laravel-mix');
  const SpriteLoaderPlugin = require('svg-sprite-loader/plugin');
  
  mix.js('resources/js/app.js', 'public/js')
      .sass('resources/sass/app.scss', 'public/css')
      .webpackConfig({
          module: {
              rules: [
                  {
                      test: /resources\/images\/.*\.svg$/,
                      loader: 'svg-sprite-loader',
                      exclude: /node_modules/,
                      options: {
                          extract: true,
                          spriteFilename: 'icons-sprite.svg',
                          publicPath: 'images/sprites/',
                      }
                  }
              ]
          },
          plugins: [
              new SpriteLoaderPlugin({ plainSprite: true}) // Sprites Plugin.
          ],
      })
      .version()</code></pre>
  </div>
  </div>
  </p>