Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Fixing icon font generation for Sketch 3.5
var gulp = require("gulp");
var del = require("del");
var rename = require("gulp-rename");
var sketch = require("gulp-sketch");
var iconfont = require("gulp-iconfont");
var consolidate = require("gulp-consolidate");
gulp.task("icons", function () {
del("./dist/", { force: true });
var svg = gulp.src("./icons.sketch")
.pipe(sketch({
export: "artboards",
formats: "svg"
}))
.pipe(iconfont({
fontName: "icons",
formats: ["svg"]
}))
.on("glyphs", function (glyphs) {
for (var i in glyphs) {
glyphs[i].hex = glyphs[i].unicode.toString().charCodeAt(0).toString(16);
}
var options = {
glyphs: glyphs,
fontName: "icons",
fontPath: "./",
className: "i"
};
gulp.src("./template.css")
.pipe(consolidate("lodash", options))
.pipe(rename({ basename: "icons" }))
.pipe(gulp.dest("./dist/"));
})
.pipe(gulp.dest("./dist/"));
});
{
"name": "test-iconfont",
"version": "1.0.0",
"dependencies": {
"del": "^2.2.0",
"gulp": "^3.9.0",
"gulp-consolidate": "^0.1.2",
"gulp-iconfont": "^5.0.1",
"gulp-rename": "^1.2.2",
"gulp-sketch": "^0.1.0"
}
}
@font-face {
font-family: "<%= fontName %>";
src: url('<%= fontPath %><%= fontName %>.svg#<%= fontName %>') format('svg');
font-weight: normal;
font-style: normal;
}
<%= glyphs.map(function(glyph){ return '.' + className + '-' + glyph.name + ':before' }).join(',\n') %> {
font-family: "<%= fontName %>";
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
vertical-align: -0.25em;
-webkit-font-smoothing: antialiased;
display: inline-block;
text-decoration: inherit;
}
<% _.each(glyphs, function(glyph) { %>.<%= className %>-<%= glyph.name %>:before { content: "\<%= glyph.hex %>" }
<% }); %>
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="dist/icons.css" />
</head>
<body>
<p>
There should be a circle that follows this statement:
<i class="i-it-works"></i>
</p>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.