1

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.

phd
  • 82,685
  • 13
  • 120
  • 165

0 Answers0