diff --git a/README.md b/README.md index 1b36167..eb5e4ef 100644 --- a/README.md +++ b/README.md @@ -15,16 +15,18 @@ Then, add it to your `gulpfile.js`: var iconfont = require('gulp-iconfont'); var iconfontCss = require('gulp-iconfont-css'); +var fontName = 'Icons'; + gulp.task('iconfont', function(){ gulp.src(['app/assets/icons/*.svg']) .pipe(iconfontCss({ - fontFamily: 'Icons', // has to be identical to iconfont's "fontName" option + fontName: fontName, path: 'app/assets/css/templates/_icons.scss', - targetPath: '../../css/_icons.scss', // relative to gulp.dest below - fontPath: '../../fonts/icons/', // relative to targetPath (yes, slightly redundant but necessary for CSS template) - }) + targetPath: '../../css/_icons.scss', + fontPath: '../../fonts/icons/' + })) .pipe(iconfont({ - fontName: 'Icons' + fontName: fontName })) .pipe(gulp.dest('app/assets/fonts/icons/')); }); @@ -36,10 +38,10 @@ gulp.task('iconfont', function(){ ### iconfontCSS(options) -#### options.fontFamily +#### options.fontName Type: `String` -The name of the generated font family (optional, defaults to "Icons"). **Important**: Has to be identical to iconfont's ```fontName``` option. +The name of the generated font family (required). **Important**: Has to be identical to iconfont's ```fontName``` option. #### options.path Type: `String` diff --git a/_icons.scss b/_icons.scss index 49185fe..356c5cc 100644 --- a/_icons.scss +++ b/_icons.scss @@ -1,9 +1,9 @@ @font-face { - font-family: "<%= fontFamily %>"; - src: url('<%= fontPath %><%= fontFamily %>.eot?') format('eot'); - src: url('<%= fontPath %><%= fontFamily %>.eot?iefix') format('eot'), - url('<%= fontPath %><%= fontFamily %>.woff') format('woff'), - url('<%= fontPath %><%= fontFamily %>.ttf') format('truetype'); + font-family: "<%= fontName %>"; + src: url('<%= fontPath %><%= fontName %>.eot?') format('eot'); + src: url('<%= fontPath %><%= fontName %>.eot?iefix') format('eot'), + url('<%= fontPath %><%= fontName %>.woff') format('woff'), + url('<%= fontPath %><%= fontName %>.ttf') format('truetype'); } @mixin icon($filename) { @@ -15,7 +15,7 @@ &:before { content: $char; - font-family: "<%= fontFamily %>"; + font-family: "<%= fontName %>"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-style: normal; diff --git a/index.js b/index.js index 6b52db6..7a193c3 100644 --- a/index.js +++ b/index.js @@ -23,11 +23,13 @@ function iconfontCSS(config) { targetPath: '_icons.scss', fontPath: './', engine: 'lodash', - firstGlyph: 0xE001, - fontFamily: 'Icons' + firstGlyph: 0xE001 }, config); // Validate config + if (!config.fontName) { + throw new gutil.PluginError(PLUGIN_NAME, 'Missing option "fontName"'); + } if (!consolidate[config.engine]) { throw new gutil.PluginError(PLUGIN_NAME, 'Consolidate missing template engine "' + config.engine + '"'); } @@ -87,7 +89,7 @@ function iconfontCSS(config) { if (glyphMap.length) { consolidate[config.engine](config.path, { glyphs: glyphMap, - fontFamily: config.fontFamily, + fontName: config.fontName, fontPath: config.fontPath }, function(error, html) { if (error) { diff --git a/test/fixtures/_icons.scss b/test/fixtures/_icons.scss index 49185fe..356c5cc 100644 --- a/test/fixtures/_icons.scss +++ b/test/fixtures/_icons.scss @@ -1,9 +1,9 @@ @font-face { - font-family: "<%= fontFamily %>"; - src: url('<%= fontPath %><%= fontFamily %>.eot?') format('eot'); - src: url('<%= fontPath %><%= fontFamily %>.eot?iefix') format('eot'), - url('<%= fontPath %><%= fontFamily %>.woff') format('woff'), - url('<%= fontPath %><%= fontFamily %>.ttf') format('truetype'); + font-family: "<%= fontName %>"; + src: url('<%= fontPath %><%= fontName %>.eot?') format('eot'); + src: url('<%= fontPath %><%= fontName %>.eot?iefix') format('eot'), + url('<%= fontPath %><%= fontName %>.woff') format('woff'), + url('<%= fontPath %><%= fontName %>.ttf') format('truetype'); } @mixin icon($filename) { @@ -15,7 +15,7 @@ &:before { content: $char; - font-family: "<%= fontFamily %>"; + font-family: "<%= fontName %>"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-style: normal; diff --git a/test/main.js b/test/main.js index 63fcff8..48c7bbe 100755 --- a/test/main.js +++ b/test/main.js @@ -8,6 +8,7 @@ describe('gulp-iconfont-css', function() { it('should generate SCSS file', function(done) { gulp.src(__dirname + '/fixtures/icons/*.svg') .pipe(iconfontCss({ + fontName: 'Icons', path: __dirname + '/fixtures/_icons.scss', targetPath: '../_icons.scss' }))