2016-11-09 62 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))); 
    }; 
}; 
相關問題