Giter VIP home page Giter VIP logo

iconfont-builder's Issues

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 文件显示图标就有问题。

字体图标显示异常,建议更新 svg2ttf 依赖

相同的 svg 文件,使用阿里 iconfont 平台转化后得到的字体文件显示正常,但使用该工具转化后得到的字体文件显示异常,更新 svg2ttf 版本到 4.1.0 后即可正常转化。

建议更新依赖版本。

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.