malcolmyu / iconfont-builder Goto Github PK
View Code? Open in Web Editor NEWa tool to build fonts via svg
a tool to build fonts via svg
我使用 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 文件显示图标就有问题。
相同的 svg 文件,使用阿里 iconfont 平台转化后得到的字体文件显示正常,但使用该工具转化后得到的字体文件显示异常,更新 svg2ttf 版本到 4.1.0 后即可正常转化。
建议更新依赖版本。
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.