Svg精灵图标在我的应用程序上显示行或神器

时间:2018-01-12 03:36:58

标签: svg gulp sprite

任何人都可以帮助精灵图标,有线或神器在图标上显示,当我给精灵图标的形状和间距(填充1)时,图标完全消失,如果我给出形状和间距(填充0.5)我可以看到图标但线条不会消失。这个你能帮我吗。

   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']); 

以下gulp图标任务:

  

[14:16:13]开始'beginClean'...
  [14:16:13] 43 ms后完成'beginClean'   [14:16:13]开始'createSprite'......
       [14:16:14] 520毫秒后完成'createSprite'          [14:16:14]开始'createPngCopy'...
       [14:16:14]开始'copySpriteCSS'... [14:16:21]在6.83秒后完成'createPngCopy'       [14:16:21]开始'copySpriteGraphic'...
           [14:16:21] 15 ms后完成'copySpriteGraphic'。

0 个答案:

没有答案