Laravel Mix 4 and SVGSpritemapPlugin

If you, like me, use svgs in all your projects you will need to make some updates to your webpack.mix.js when updating to Laravel mix 4:

First, we need to install a newer version of the svg spritemap webpack plugin:

npm uninstall svg-spritemap-webpack-plugin
npm install svg-spritemap-webpack-plugin --save-dev

Just as before, we need to specify our path to our directory with all the svgs and where we want to place the final spritemap :

const svgSourcePath = "resources/assets/svgs/*.svg";
const svgSpriteDestination="resources/views/svgs.blade.php";

Finally we need to make some changes to in the configuration:

mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css')
   .webpackConfig({
      plugins: [
         new SVGSpritemapPlugin(
            svgSourcePath, {
               output: {
                  filename: svgSpriteDestination,
                  svgo: true
               },
            }
         )
      ]
   })
   .version([]).sourceMaps();
linkedinfacebook