Skip to content

Instantly share code, notes, and snippets.

@christophengelmayer
Last active November 9, 2016 13:56
Show Gist options
  • Save christophengelmayer/a46457a8e92e003ff64cfc79e220acb3 to your computer and use it in GitHub Desktop.
Save christophengelmayer/a46457a8e92e003ff64cfc79e220acb3 to your computer and use it in GitHub Desktop.
SVG Sprites Workflow
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"));
});
import SvgSpriteEmbed from'./components/SvgSpriteEmbed';
const svgSpriteEmbed = new SvgSpriteEmbed('site/templates/img/svg.svg');
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();
}
}
.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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment