CODEWITHSUNDEEP
javascripthtmlcsssvggulp
Maria Piaredryj
Maria Piaredryj

Reputation: 1662

gulp-svg-sprites outputs [Object object] instead of icons

I want to use gulp-svg-sprites to build svg sprite with symbols. But I get wrong output: icons aren't generated ([Object object] in <symbol>), paths are wrong, seems like some compiler doesn't work.

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"));
});

generated symbols.html contains 

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

generated symbols.svg contains

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

      [object Object] [object Object]

  </symbol>

and such is the final output, without any changes. Maybe something is missing. I've already have installed node-gyp although I don't need it (I try everithing to solve the problem). What it can be? What is missing? Maybe there are some other ways to generate symbol svg sprite?

Upvotes: 1

Views: 1023

Answers (1)

djaga
djaga

Reputation: 11

I had same problem too and could not find solution. But found other gulp plugin gulp-svg-symbols and it work very well.

example

my 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)));
    };
};

Upvotes: 1

Related Questions