CODEWITHSUNDEEP
gulp
nickspiel
nickspiel

Reputation: 5670

gulp-iconfont task not populating unicode value

I am moving over from grunt to gulp and am having problems with the gulp-iconfont library to create my icon font and stylesheet.

Dependencies:

"devDependencies": {
  "gulp": "^3.9.0",
  "gulp-iconfont": "^5.0.1"
}

Gulpfile:

I have the following gulfile setup to build the font:

var gulp     = require('gulp'),
    iconfont = require('gulp-iconfont');

var paths = {
    fonts:   'site/fonts/',
    icons:   'site/fonts/icons/src/',
    styles:  'site/styles/',
    scripts: 'site/scripts/'
};

gulp.task('icons', function(){
    return gulp.src([paths.icons + '*.svg'])
    .pipe(iconfont({
        fontName: 'icons',
        appendUnicode: true,
        formats: ['woff']
    }))
    .on('glyphs', function(glyphs, options) {
         console.log(glyphs, options);
         // the value for unicode in the glyphs object is a question mark in a box
     })
    .pipe(gulp.dest(paths.styles));
});

The issue:

When I console log the glyphs object the value for unicode in the glyphs object is a question mark in a box.

enter image description here

I have tried reinstalling all modules from scratch just in case something was out of the ordinary with no luck.

Any help would be appreciated.

Upvotes: 3

Views: 911

Answers (1)

nickspiel
nickspiel

Reputation: 5670

Back story:

Okay - so I dug into the svgicons2svgfont module and found the culprit. Around line 48 of src/metadata.js there is the following:

metadata.unicode[0] = String.fromCodePoint(options.startUnicode++);

I noticed just below this the module was doing some manipulation on the string this was producing to get the unicode value for appending to the file name. Here is what it was doing to extract the unicode value:

metadata.unicode[0].codePointAt(0).toString(16).toUpperCase();

Solution:

I did the same to the glyph variable in my scss template file and now my unicode values are populating correctly.

$icons: (<% _.each(glyphs, function(glyph) { %>
    <%= glyph.name %>: "\<%= glyph.unicode[0].codePointAt(0).toString(16).toUpperCase() %>",<% }) %>
);

Which seems utterly ridiculous and confusing to me. Made even more frustrating by the fact that there is next to no documentation on creating css templates from these libraries that use svgicons2svgfont.

I hope this helps someone else in a similarly frustrating

I will attempt to make this into a pull request to make things a little clearer for people using these modules in future.

Upvotes: 4

Related Questions