iconfont-builder

Introduction

Iconfont-builder is a node.js package for providing a middleware that create some font files.

Installation (via npm)

$ npm i --save iconfont-builder

Usage

Simple Usage

var builder = require('iconfont-builder');
var path = require('path');

var options = {
    icons: [
        {
            name: 'www-font-o',
            file: 'abc.svg',
            codepoint: 61441
        }
    ],
    src: path.join(__dirname, 'src'),
    fontName: 'iconfont',
    descent: 0,
    dest: path.join(__dirname, 'dest')
};

builder(options)
    .then().catch();

List of options

icons

Type: Array<Object>

Example:

{
    name: 'www-font-o', // className of icon
    file: 'abc.svg',    // fileName of icon
    codepoint: 61441    // unicode of icon
}

writeFiles

Type: Boolean

Default: true

It is possible to not create font files but get the attribute d of each icon svg. The attribute d contains all paths' information of an icon, which can be use to draw a svg icon.

readFiles

Type: Boolean

Default: true

You can only use attribute d to create font files! If this param is false, the Object in param icons should have attribute d.

fontName

Type: String

Default: 'iconfont'

Name of font and font files.

startCodePoint

Type: Number

Default: 0xF000

Start of font's unicode in DEC(e.g. 61441) or HEX(e.g. 0xF001). When passing options without icons, builder will use startCodePoint as the first unicode of font icon, and the unicode of each remaining icons will increased by one in order.

src

Type: String

Default: '.'

Directory of source svg font files.

dest

Type: String

Directory for generated font files.

descent

Type: Number

Default: 0

The font descent. It's useful to fix the font baseline yourself.

Warning: The descent is a positive value!

Author

missmiss

malcolmyu

SVGO file and unicode codepoints.

我使用 iconfont-builder 处理 SVGO 压缩过的 SVG 文件，最终 TTF 文件中有些图标会出问题（使用未压缩的 SVG 不会出问题）。

我另外一种方式直接使用 svgicons2svgfont 和 svg2ttf 的，使用 SVGO 压缩过的 SVG 文件生成的 TTF，并没有问题。

代码如下：

var fs = require("fs");
var path = require("path");
var yaml = require("js-yaml");
var svgicons2svgfont = require('svgicons2svgfont');
var svg2ttf = require('svg2ttf');

var svgFolder = "./assets/svg";
var fontFolder = "./assets/font";
var codepoints = yaml.safeLoad(fs.readFileSync("codepoints.yaml"));

var fontStream = svgicons2svgfont({
    fontName: 'hello',
    fontHeight: 960,
    normalize: true
});

// Setting the font destination
fontStream.pipe(fs.createWriteStream('./assets/font/hello.svg'))
    .on('finish',function() {
        var ttf = svg2ttf(fs.readFileSync('./assets/font/hello.svg').toString());
        fs.writeFileSync('./assets/font/myfont.ttf', new Buffer(ttf.buffer));
        console.log('Font successfully created!');
    })
    .on('error',function(err) {
        console.log(err);
    });

fs.readdirSync(svgFolder).forEach(function (file) {
    var svgFile = path.join(svgFolder, file);
    if (fs.statSync(svgFile).isFile() && path.extname(svgFile) == ".svg") {
        var glyphName = path.basename(file, ".svg");
        var glyphCode = codepoints[glyphName];
        if (glyphCode) {
            var unicode = "0x" + glyphCode;
            var glyph = fs.createReadStream(svgFile);
            glyph.metadata = {
                unicode: [String.fromCodePoint(unicode)],
                name: glyphName
            };
            fontStream.write(glyph);
        }
    }
});

fontStream.end();

使用 iconfont-builder 的代码

var fs = require("fs");
var path = require("path");
var yaml = require("js-yaml");
var builder = require('iconfont-builder');
var codepoints = yaml.safeLoad(fs.readFileSync("codepoints.yaml"));
var svgFolder = "./assets/svg";
var fontFolder = "./assets/font";
var glyphs = [];

fs.readdirSync(svgFolder).forEach(function (file) {
    var svgFile = path.join(svgFolder, file);
    if (fs.statSync(svgFile).isFile() && path.extname(svgFile) == ".svg") {
        var glyphName = path.basename(file, ".svg");
        var glyphCode = codepoints[glyphName];
        if (glyphCode) {
            console.log(glyphCode);
            glyphs.push({
                name: glyphName,
                file: file,
                codepoint: "0x" + glyphCode 
            });
        }
    }
});

var options = {
    icons: glyphs,
    src: path.join(__dirname, svgFolder),
    fontName: 'iconfont',
    descent: 0,
    dest: path.join(__dirname, fontFolder)
};

builder(options).then().catch();

codepoints.yaml

house: 2302
check: f050
print: f036
hourglass: 231b
watch: 231a
play: 25b6
plus: 2795
cross: f04f
info: 2139

出错的图标是 svgo 压缩后的 info.svg

<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 22a10 10 0 1 1 0-20 10 10 0 0 1 0 20zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm-1-8.5h2V17h-2v-5.5zm1-1.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z"/></svg>

原始的 info.svg, 从 Sketch 导出的。

<?xml version="1.0" encoding="UTF-8"?>
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <rect id="#" fill="none" x="0" y="0" width="24" height="24"></rect>
    <path d="M12,22 C6.4771525,22 2,17.5228475 2,12 C2,6.4771525 6.4771525,2 12,2 C17.5228475,2 22,6.4771525 22,12 C22,17.5228475 17.5228475,22 12,22 Z M12,20 C16.418278,20 20,16.418278 20,12 C20,7.581722 16.418278,4 12,4 C7.581722,4 4,7.581722 4,12 C4,16.418278 7.581722,20 12,20 Z M11,11.5 L13,11.5 L13,17 L11,17 L11,11.5 Z M12,10 C11.1715729,10 10.5,9.32842712 10.5,8.5 C10.5,7.67157288 11.1715729,7 12,7 C12.8284271,7 13.5,7.67157288 13.5,8.5 C13.5,9.32842712 12.8284271,10 12,10 Z" id="Combined-Shape" fill="#000000" fill-rule="nonzero"></path>
</svg>

另外一个问题是，设计从 Unicode 网站查找到的或者 macOS Fontbook 是编码都是 16 进值的。我使用 16 进值码之后，HTML 文件显示图标就有问题。

malcolmyu / iconfont-builder Goto Github PK