2016-11-09 3 views
1

Ich möchte gulp-svg-sprites verwenden, um Svg Sprite mit symbols zu bauen. Aber ich bekomme falsche Ausgabe: Icons werden nicht erzeugt ([Object object] in <symbol>), Pfade sind falsch, scheint wie ein Compiler nicht funktioniert.gulp-svg-sprites Ausgänge [Objekt] anstelle von Symbolen

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 generiert enthält

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

erzeugt symbols.svg

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

     [object Object] [object Object] 

    </symbol> 

enthält, und das ist die endgültige Ausgabe, ohne Änderungen. Vielleicht fehlt etwas. Ich habe bereits node-gyp installiert, obwohl ich es nicht brauche (ich versuche immer, das Problem zu lösen). Was kann es sein? Was fehlt? Vielleicht gibt es andere Möglichkeiten, Symbol Svg Sprite zu generieren?

Antwort

1

Ich hatte das gleiche Problem und konnte keine Lösung finden. Aber andere Schluck Plugin gulp-svg-symbols gefunden und es funktioniert sehr gut.

example

meine config:

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))); 
    }; 
}; 
Verwandte Themen