2016-11-09 63 views
1

我想用gulp-svg-sprites建立与symbols svg精灵。但我得到了错误的输出:图标没有生成([Object Object]在<symbol>),路径是错误的,好像某些编译器不起作用。gulp-svg-sprites输出[对象对象]而不是图标

gulpfile.js

var gulp = require('gulp'), 
    svgSprite = require('gulp-svg-sprites'); 

gulp.task('sprites', function() { 
    return gulp.src('icons/*.svg') 
     .pipe(svgSprite({mode: "symbols"})) 
     .pipe(gulp.dest("images")); 
}); 

产生symbols.html包含

<h4>Files Generated:</h4> 
    <ol> 
     <li><a href="{config.svg.symbols}">{config.svg.symbols}</a></li> 
    </ol> 

产生symbols.svg包含

<symbol id="big_icon_1" viewBox="0 0 55 59"> 

     [object Object] [object Object] 

    </symbol> 

并且这样是最终输出,而没有任何变化。 也许丢失了一些东西。我已经安装了node-gyp虽然我不需要它(我尝试通过不断解决问题)。 它可能是什么?什么不见​​了?也许还有其他一些方法来生成符号SVG精灵?

回答

1

我也有同样的问题,找不到解决方案。 但发现其他的gulp插件gulp-svg-symbols,它工作得很好。

example

我的配置:

var $ = require('gulp-load-plugins')(); 
var gulp = require('gulp'); 

module.exports = function(options) { 
    return function() { 
     return gulp.src(options.src) 
      .pipe($.svgSymbols({ 
       id: "icon-%f" 
      })) 
      .pipe($.rename(function(file) { 
       file.basename = 'sprite'; 
       return file; 
      })) 
      .pipe($.if(/[.]svg$/, gulp.dest(options.dest))); 
    }; 
}; 
相关问题