The plugin does not generate sprite

[KamilFo]

Description

I have a folder which contains svg-icons. I try to generate sprite but nothing happens, mix completes and no sprite has been generated in dist folder.

const mix = require('laravel-mix');
require('laravel-mix-svg-sprite');

mix.svgSprite(
    'resources/assets/svg', 
    'public/dist/front/sprite.svg',
    {
        extract: true
    },
    {
        plainSprite: true
    }
);

As I think the problem refers to this notice in plugin description

N.B. This component only adds a loader to the Webpack configuration, it doesn't glob your directory and include every file it finds. You need to require the icons from within your code (JS, CSS, etc.) just like other modules to have them added to the sprite!

But I dont know what I have to do with this.

[JaZo]

You have to import/require the SVG-files in your JS. For example:

const helpIconUrl = require('../svg/help.svg').default.url;

Or take a look at this example Vue-component.

[KamilFo]

@JaZo you example will not work natively

Cannot find module '../svg/help.svg'

[JaZo]

That was just an example. I don't know the exact path in your setup, so you should change it for your use case.

[KamilFo]

That was just an example. I don't know the exact path in your setup, so you should change it for your use case.

I mean you can not require files like modules if I not mistaken. That mistake happens not because of path.

[JaZo]

This plugin transforms your SVG files into modules you can use in JavaScript. The resulting module contains the URL to the sprite for example. The actual content of all SVG files will be combined into one sprite, which will be outputted in a separate file.

Example module of an imported SVG:

{
  "id": "help-usage",
  "viewBox": "0 0 20 20",
  "url": "/icons.svg#help"
}