Skip to content

Instantly share code, notes, and snippets.

@dotZak
Last active January 23, 2016 04:39
Show Gist options
  • Save dotZak/ba535345c654f8eb7071 to your computer and use it in GitHub Desktop.
Save dotZak/ba535345c654f8eb7071 to your computer and use it in GitHub Desktop.
Create a dynamic icon font and associated stylesheet.
/**
* Custom icon font generation
*
* require gulp
* require gulp-consolidate
* require gulp-iconfont
* require gulp-newer
* require gulp-rename
* require browser-sync (optional)
*
* var fontName: The name of the generated font. Used for filenames and in the lodash template to output CSS.
* var assetPathSrc: The relative (to the gulpfile) path to the source directory for assets used to build font files.
* var assetPathBuild: The relative (to the gulpfile) path to the build directory for generated files.
*/
var browserSync = require('browser-sync').create();
var consolidate = require('gulp-consolidate');
var gulp = require('gulp');
var iconfont = require('gulp-iconfont');
var newer = require('gulp-newer');
var rename = require('gulp-rename');
gulp.task('theme-iconfont', function () {
var fontName = 'theme-icons';
var assetPathSrc = 'assets/fonts/' + fontName + '/src/';
var assetPathBuild = 'assets/fonts/' + fontName + '/build/';
return gulp.src(assetPathSrc + '**/*.svg')
.pipe(newer(assetPathBuild + 'theme-icons.css')) // This is not ideal.
.pipe(iconfont({
fontName: fontName,
appendUnicode: true,
formats: ['ttf', 'eot', 'woff', 'woff2'],
normalize: true, // Prevent rendering problem
fontHeight: 1001 // Prevent rendering problem
}))
.on('glyphs', function (glyphs, options) {
var options = {
glyphs: glyphs.map(function(glyph) {
// Map glyphs so they don't get renamed when adding or removing SVGs from src/.
return { name: glyph.name, codepoint: glyph.unicode[0].charCodeAt(0) }
}),
fontName: fontName,
fontPath: '',
className: 'theme-icon'
};
gulp.src(assetPathSrc + fontName + '-template.css')
// Build a stylesheet based on a lodash template.
.pipe(consolidate('lodash', options)) // Using lodash, create a stylesheet which contains a class for each glyph
.pipe(rename({ basename:fontName })) // Rename output stylesheet to match `fontName`
.pipe(gulp.dest(assetPathBuild)) // Output built stylesheet
})
.pipe(gulp.dest(assetPathBuild))
.pipe(browserSync.stream())
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment