gulp-iconfont任务未填充unicode值 [英] gulp-iconfont task not populating unicode value

问题描述

我正从咕unt咕over作一番，到 gulp-iconfont 遇到问题库来创建我的图标字体和样式表.

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

依赖项:

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

Gulpfile:

我具有以下gulfile设置来构建字体:

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));
});

问题:

当我在控制台上登录字形对象时，字形对象中的unicode值就是一个问号.

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

我尝试从头开始重新安装所有模块，以防万一运气不正常.

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

任何帮助将不胜感激.

推荐答案

背景故事:

好的-所以我钻进了svgicons2svgfont模块，找到了罪魁祸首.在第src/metadata.js行48 周围以下:

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++);

我注意到，在此正下方，模块正在对生成的字符串进行一些操作，以获取用于附加到文件名的unicode值.这是提取unicode值的操作:

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();

解决方案:

我对scss模板文件中的glyph变量进行了相同的操作，现在我的unicode值正在正确填充.

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() %>",<% }) %>
);

这对我来说似乎很荒谬和令人困惑.几乎没有任何文档可以帮助您使用svgicons2svgfont从这些库中创建CSS模板.

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.

这篇关于gulp-iconfont任务未填充unicode值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！