w0rm / gulp-svgstore

Combine svg files into one with symbol elements
https://www.npmjs.com/package/gulp-svgstore
645 stars 33 forks source link

Documentation for transforms #7

Closed CrowdHailer closed 10 years ago

CrowdHailer commented 10 years ago

I want to create inline svg with the display property set to none. I cannot find how the transform functions should be incorporated into gulps pipe structure.

I tried the following but no luck

gulp.task('svg', function () {
    var svgs = gulp.src(['app/resources/*.svg', '!app/resources/lines.svg'])
        .pipe(svgmin())
        .pipe(svgstore({inlineSvg: true}))
        .pipe(function transformSvg (svg, cb) {
            svg.attr({ style: 'display:none' })
            cb(null)
        })

    return gulp.src('app/index.html')
        .pipe(inject(svgs, { transform: fileContents }))
        .pipe(gulp.dest('www/'));
}); 
st3phan commented 10 years ago

I think you should use it like this:

var svgs = gulp.src(['app/resources/*.svg', '!app/resources/lines.svg'])
    .pipe(svgmin())
    .pipe(svgstore({
        inlineSvg: true,
        transformSvg: function (svg, cb) {
            svg.attr({ style: 'display:none' });
            cb(null);
        })
}));
w0rm commented 10 years ago

@CrowdHailer hi, sorry for the late reply. Yes, @st3phan got it right. Feel free to open PR to correct documentation to make it more clear.

beefchimi commented 10 years ago

I just wanted to point out that an extra closing bracket got included in @st3phan 's comment. It should be:

transformSvg: function (svg, cb) {
    svg.attr({ style: 'display:none' });
    cb(null);
} // <-- offending " ) " was here

...just incase someone else gets stumped. Thanks @st3phan for the answer, I was struggling with this one myself.