Injecting SVG sprite

[sensaetions]

Hello, I'm using fabricator to build my style guide toolkit and am loving it. I have configured the gulpfile.js file to create a svg sprite file (svg-sprite.svg), that I've placed into the 'images' folder.

I recently ran into a roadblock where I'm stuck trying to inject this svg sprite file into the body of the default.html file of the views/layouts directory. I would like to inject this svg-sprite into the body, so that I can reference the sprites via <svg><use xlink:href="#svg-id"></use>.

Can you help provide some direction on how to accomplish? Thank you in advance!

[LukeAskew]

Yes! Just saw this done on a project. You can use the gulp-inject plugin.

https://www.npmjs.com/package/gulp-inject

Here's the relevant part of the gulpfile:

gulp.task('svg', ['assemble'], function () {
    var svgs = gulp
        .src(config.src.icons)
        .pipe(svgmin())
        .pipe(svgstore({ inlineSvg: true }));

    var fileContents = function(filePath, file) {
        return file.contents.toString();
    };

    return gulp
        .src(config.dest + '/**/*.html')
        .pipe(inject(svgs, { transform: fileContents, removeTags: true }))
        .pipe(gulp.dest(config.dest));
});

And then the html inside one of the templates:

<div class="icon-sprite" style="height: 0; width: 0; position: absolute; visibility: hidden">
  <!-- inject:svg --><!-- endinject -->
</div>

[sensaetions]

Thank you for the response! Curious what are the required gulp plugins that I'll need to make this injection happen? I know I need gulp, gulp-svgstore, and gulp-inject. What else?

[LukeAskew]

I think the only one you're missing is gulp-svgmin