任何人都可以帮助精灵图标,有线或神器在图标上显示,当我给精灵图标的形状和间距(填充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'。