Svg-sprite-loader: Question: How can I set the input dir of my svg files

[Chris2011]

I tried the native svg-sprite package for npm and I created this script inside my package.json:

"gen-sprite": "svg-sprite --css --css-render-css --css-example --dest=dist app/icons/*.svg",

so everything is fine with it, it goes into my app/icons/ dir and creates a sprite out of all my svg icons.

Now I wanted to use it with webpack and my config looks like this: https://pastebin.com/nwGtGEiv

The problem is that nothing happens when I call my webserver. In all of your examples I see a js file with this inside:

import twitterLogo from './logos/twitter.svg';

but I don't have such file and I don't need it. So my question is, what is the option to set a path to the input folder of my svg icons. I tried include, but same result, no sprite.svg at the end.

Regards

Chris

[kisenka]

Hi Chris. This is not possible in webpack to use prebuilt sources generated by other tools. Webpack is a module bundler, so you should import each of sprite image by yourself in JS/CSS.

[Chris2011]

Hm this is what I wanted to prevent but ok, thx for the info.

[kisenka]

If you need just to create a sprite from set of images put following code somewhere in your app sources:

var files = require.context('./icons', false, /\.svg$/);
files.keys().forEach(files);

This will scan icons dir and import every SVG file. In combination with extract mode it will create a separate sprite file.

[Chris2011]

Yes, I saw that code, I wanted to try. Thx for the hint again :)

[Chris2011]

I use TS and maybe the @types/webpack-env module is outdated. When I add @types/webpack-env via npm i, I got this error: error TS2306: File 'MyProject/node_modules/@types/webpack-env/index.d.ts' is not a module. But anyway, this is not the problem of this ticket.

[m1neral]

@kisenka Thank you. I created separate sprite file. How can I get name of sprite, then I use option

spriteFilename: 'sprite-[hash].svg'

?

[m1neral]

I think only by the possibilities of webpack require-context

[kisenka]

@m1neral only via StatsPlugin