javascript - gulp-svg-sprites 输出 [Object object] 而不是图标

Question

我想使用 gulp-svg-sprites用 symbols 构建 svg sprite .但是我得到了错误的输出:未生成图标([Object object] in <symbol>)，路径错误，似乎某些编译器不起作用。

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 Sprite ？

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