Can anybody help with sprite icons, something wired line or artifact is showing on icons and when i give shape and spacing (padding 1) for sprite icons the icons totally disappears and if i give shape and spacing (padding 0.5) i can see icons but the line does not disappears. please help me out with this.
var gulp = require('gulp'),
svgSprite = require('gulp-svg-sprite'),
rename = require('gulp-rename'),
del = require('del'),
svg2png = require('gulp-svg2png');
var config = {
shape: {
spacing: {
padding: 1
}
},
mode:{
css: {
variables: {
replaceSvgWithPng: function() {
return function(sprite, render) {
return render(sprite).split('.svg').join('.png');
}
}
},
sprite: 'sprite.svg',
render: {
css: {
template: './gulp/templates/sprite.css'
}
}
}
} }
.
gulp.task('beginClean', function(){
return del(['./app/temp/sprite', './app/assets/images/sprites']);
});
gulp.task('createSprite', ['beginClean'], function() {
return gulp.src('./app/assets/images/icons/**/*.svg')
.pipe(svgSprite(config))
.pipe(gulp.dest('./app/temp/sprite/'));
});
gulp.task('createPngCopy', ['createSprite'], function(){
return gulp.src('./app/temp/sprite/css/*.svg')
.pipe(svg2png())
.pipe(gulp.dest('./app/temp/sprite/css'));
});
gulp.task('copySpriteGraphic', ['createPngCopy'], function(){
return gulp.src('./app/temp/sprite/css/**/*.{svg,png}')
.pipe(gulp.dest('./app/assets/images/sprites'));
});
gulp.task('copySpriteCSS', ['createSprite'] , function(){
return gulp.dest('./app/temp/sprite/css/*.css')
.pipe(rename('_sprite.css'))
.pipe(gulp.dest('./app/assets/styles/modules'));
});
gulp.task('endClean , ['copySpriteGraphic', 'copySpriteCSS'], function(){
return del('./app/temp/sprite');
});
gulp.task('icons', ['beginClean', 'createSprite', 'createPngCopy','copySpriteGraphic', 'copySpriteCSS', 'endClean']);
Below gulp icons task:
[14:16:13] Starting 'beginClean'...
[14:16:13] Finished 'beginClean' after 43 ms
[14:16:13] Starting 'createSprite'...
[14:16:14] Finished 'createSprite' after 520 ms
[14:16:14] Starting 'createPngCopy'...
[14:16:14] Starting 'copySpriteCSS'... [14:16:21] Finished 'createPngCopy' after 6.83 s
[14:16:21] Starting 'copySpriteGraphic'...
[14:16:21] Finished 'copySpriteGraphic' after 15 ms.