Skip to content

Instantly share code, notes, and snippets.

@brianfryer

brianfryer/_icons.scss Secret

Last active Jan 6, 2017
Embed
What would you like to do?
Creating icon fonts using node, gulp, and consolidate.js.
@font-face {
font-family: "evo";
src: url('../fonts/evo/evo.eot');
src: url('../fonts/evo/evo.eot?#iefix') format('eot'),
url('../fonts/evo/evo.woff') format('woff'),
url('../fonts/evo/evo.ttf') format('truetype'),
url('../fonts/evo/evo.svg#evo') format('svg');
font-weight: normal;
font-style: normal;
}
.evo:before {
display: inline-block;
font-family: "evo";
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.evo-book:before { content: "\E001" }
.evo-crosshair:before { content: "\E002" }
.evo-envelope:before { content: "\E003" }
.evo-fax:before { content: "\E004" }
.evo-industry-construction-square:before { content: "\E005" }
.evo-industry-construction:before { content: "\E006" }
.evo-industry-education-square:before { content: "\E007" }
.evo-industry-education:before { content: "\E008" }
.evo-industry-electric-square:before { content: "\E009" }
.evo-industry-electric:before { content: "\E00A" }
.evo-industry-finance-square:before { content: "\E00B" }
.evo-industry-finance:before { content: "\E00C" }
.evo-industry-food-square:before { content: "\E00D" }
.evo-industry-food:before { content: "\E00E" }
.evo-industry-forestry-square:before { content: "\E00F" }
.evo-industry-forestry:before { content: "\E010" }
.evo-industry-government-square:before { content: "\E011" }
.evo-industry-government:before { content: "\E012" }
.evo-industry-heart-square:before { content: "\E013" }
.evo-industry-heart:before { content: "\E014" }
.evo-industry-information-square:before { content: "\E015" }
.evo-industry-information:before { content: "\E016" }
.evo-industry-management-square:before { content: "\E017" }
.evo-industry-management:before { content: "\E018" }
.evo-industry-manufacturing-square:before { content: "\E019" }
.evo-industry-manufacturing:before { content: "\E01A" }
.evo-industry-mining-square:before { content: "\E01B" }
.evo-industry-mining:before { content: "\E01C" }
.evo-industry-music-square:before { content: "\E01D" }
.evo-industry-music:before { content: "\E01E" }
.evo-industry-other-square:before { content: "\E01F" }
.evo-industry-other:before { content: "\E020" }
.evo-industry-professional-square:before { content: "\E021" }
.evo-industry-professional:before { content: "\E022" }
.evo-industry-realestate-square:before { content: "\E023" }
.evo-industry-realestate:before { content: "\E024" }
.evo-industry-retail-square:before { content: "\E025" }
.evo-industry-retail:before { content: "\E026" }
.evo-industry-search-circle-square:before { content: "\E027" }
.evo-industry-selected-square:before { content: "\E028" }
.evo-industry-transportation-square:before { content: "\E029" }
.evo-industry-transportation:before { content: "\E02A" }
.evo-industry-waste-square:before { content: "\E02B" }
.evo-industry-waste:before { content: "\E02C" }
.evo-industry-wholesale-square:before { content: "\E02D" }
.evo-industry-wholesale:before { content: "\E02E" }
.evo-info:before { content: "\E02F" }
.evo-key:before { content: "\E030" }
.evo-lock:before { content: "\E031" }
.evo-map-marker-2:before { content: "\E032" }
.evo-map-marker:before { content: "\E033" }
.evo-member-biz:before { content: "\E034" }
.evo-member-card:before { content: "\E035" }
.evo-member-connected:before { content: "\E036" }
.evo-member-info:before { content: "\E037" }
.evo-member:before { content: "\E038" }
.evo-members-circle:before { content: "\E039" }
.evo-members:before { content: "\E03A" }
.evo-notifications-circle:before { content: "\E03B" }
.evo-pencil:before { content: "\E03C" }
.evo-phone:before { content: "\E03D" }
.evo-risk-industry:before { content: "\E03E" }
.evo-risk-product-circle:before { content: "\E03F" }
.evo-risk-product:before { content: "\E040" }
.evo-risk-size:before { content: "\E041" }
.evo-risk-state:before { content: "\E042" }
.evo-search-circle:before { content: "\E043" }
.evo-search:before { content: "\E044" }
// Load plugins
var gulp = require('gulp'), // magical task running goodness
rename = require('gulp-rename'), // renaming files
notify = require('gulp-notify'), // terminal notifications
plumber = require('gulp-plumber'), // error handling
consolidate = require('gulp-consolidate'), // icon templating
iconfont = require('gulp-iconfont'); // svg to iconfont
// set base path
var basePath = 'app/';
// do stuff for icons
var iconsPath = basePath + 'assets/icons/',
iconsFiles = iconsPath + '*.svg',
fontName = 'evo';
gulp.task('icons', function() {
gulp.src( iconsFiles )
.pipe( plumber() )
.pipe( iconfont({
fontName: fontName,
appendCodepoints: true
}))
.on('codepoints', function(codepoints, options) {
// generate scss file for use in prototype
gulp.src( iconsPath + 'templates/icons.template' )
.pipe( plumber() )
.pipe( consolidate('lodash', {
glyphs: codepoints,
fontName: fontName,
fontPath: '../fonts/' + fontName + '/',
className: fontName
}))
.pipe( plumber() )
.pipe(rename('_icons.scss'))
.pipe(gulp.dest( globalStylesPath + 'scss/' ))
})
.pipe( gulp.dest( basePath + 'assets/fonts/' + fontName + '/' ) )
.pipe( notify({ message: 'Icons task complete' }) );
});
// watch stuff
gulp.task('watch', function() {
// Watch icons
gulp.watch([ iconsPath + '*.*' ], ['icons']);
});
// default
gulp.task( 'default', ['watch'] );
/*
{
<% _.each(glyphs, function(glyph) { %>'<%= className %>-<%= glyph.name %>': '<%= glyph.codepoint.toString(16).toUpperCase() %>',
<% }); %>'ICONS': 'DONE'
}
*/
@font-face {
font-family: "<%= fontName %>";
src: url('<%= fontPath %><%= fontName %>.eot');
src: url('<%= fontPath %><%= fontName %>.eot?#iefix') format('eot'),
url('<%= fontPath %><%= fontName %>.woff') format('woff'),
url('<%= fontPath %><%= fontName %>.ttf') format('truetype'),
url('<%= fontPath %><%= fontName %>.svg#<%= fontName %>') format('svg');
font-weight: normal;
font-style: normal;
}
.<%= className %>:before {
display: inline-block;
font-family: "<%= fontName %>";
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
<% _.each(glyphs, function(glyph) { %>.<%= className %>-<%= glyph.name %>:before { content: "\<%= glyph.codepoint.toString(16).toUpperCase() %>" }
<% }); %>
{
"name": "prototypes",
"devDependencies": {
"gulp": "~3.8.10",
"gulp-plumber": "~0.6.6",
"gulp-iconfont": "~1.0.0",
"gulp-rename": "~1.2.0",
"gulp-consolidate": "~0.1.2",
"gulp-notify": "~2.1.0"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment