2016-11-09 5 views
1

を使用して、symbolsでsvgスプライトを作成します。しかし、私は間違った出力を得ます:アイコンは生成されません(オブジェクトオブジェクト<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> 

などを含んでいます。 何かが見つからないことがあります。私はすでにノード-gypをインストールしましたが、私はそれを必要としませんが(私は問題を解決するために解決しようとしています)。 何ができますか?何が欠けている?たぶん、シンボルsvgスプライトを生成するいくつかの他の方法がありますか?

答えて

1

私も同じ問題があり、解決策を見つけることができませんでした。 しかし、他のglupプラグイン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))); 
    }; 
}; 
関連する問題