WebPack loader generates SVG sprite file without CSS file

Viewed 3228

I used gulp-svg-sprites to convert multiple SVGs into a single large Sprites, and besides generating symbols and appropriate css selectors in a file.

For architecture change purpose, I am migrating all gulp processes on Webpack 3. The last thing I can't achieve to reproduce with Webpack is the SVG Sprite generation.

Using Gulp-svg-sprites, the script was:

var thisPipe = gulpSrc(svgSrc)
    .pipe(svgSprite(config.svgSprites.compilerOptions))
    .pipe(gulp.dest(svgDest));

where compilerOptions represents the options available with svgSprite.

I tried several approaches, but I hardly suspect I'm doing something wrong (or misusing the tools I tried).

I mainly looked at https://github.com/kisenka/svg-sprite-loader/, with a simple use case :

  • ./img/icons/icon-1.svg has to be moved to ./build/img/sprints.svg
  • A CSS file must be created in order to use icons in the sprite file.
  • The folder "./img/icons" can contains a lot of svgs.

About part 1 (SVG sprites generation) of my webpack.config.ts file about svg is :

 module: {
    rules: [
        {
            test: /\.svg$/,
            loader: 'svg-sprite-loader',
            options: {
                extract: true,
                spriteFilename: 'sprite.svg'
            }
        }, {...}] ...

I did not specify specific "entry" or "output" neither did I not use ExtractTextPlugin on svg files.

About part 2 (CSS file), I have no clue about how to generate the CSS file from that.


  1. How can I generate a Sprite file using Webpack ?
  2. How can I generate the "twin" CSS file ?

Thank you.

0 Answers
Related