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.svghas 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.
- How can I generate a Sprite file using Webpack ?
- How can I generate the "twin" CSS file ?
Thank you.