SVG Sprites Workflow

gulpfile.js

gulp.task("svg", function () {
    return gulp
        .src(config.src+"svg/*.svg")
        .pipe(svgmin())
        .pipe(svgstore({ 
            fileName: "sprite.svg", 
            prefix: "icon-" }))
        .pipe(cheerio({
            run: function ($) {
                $("[fill]").removeAttr("fill");
            },
            parserOptions: { xmlMode: true }
        }))
        .pipe(gulp.dest(config.dest+"img"));
});

main.js

import SvgSpriteEmbed from'./components/SvgSpriteEmbed';
const svgSpriteEmbed = new SvgSpriteEmbed('site/templates/img/svg.svg');

SpriteEmbed.js

export default class SvgSpriteEmbed {
    constructor(url) {
        var ajax = new XMLHttpRequest();
        ajax.open("GET", url, true);
        ajax.responseType = "document";
        ajax.onload = function(e) {
            var element = ajax.responseXML.documentElement;
            element.setAttribute("class", "u-hidden-visually");
            document.body.insertBefore(element, document.body.childNodes[0]);
        }
        ajax.send();
    }
}

style.css

.u-visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    white-space: nowrap;
}

.icon {
    width: 1em;
    height: 1em;
    fill: currentColor; 
}