add options glyphTransformFn
chenyulun opened this issue · 10 comments
I have a project font and css is split, I need to rewrite the packaging according to the original unicode table to package, I hope to provide a glyphTransformFn
configuration, pass me the file name or other information, I return the unicode
glphMap.json
{
"toast-loading": 59538,
"no-voice": 59539,
"have-noice": 59540,
"warning": 59541
}
svgtofont.js
svgtofont({
src: path.resolve(process.cwd(), "src/svg-icons"), // svg path
dist: path.resolve(process.cwd(), "font"), // output path
// styleTemplates: path.resolve(rootPath, "styles"), // file templates path (optional)
fontName: "iconfont", // font name
classNamePrefix: 'poppy-icon',
css: true, // Create CSS files.
startUnicode: 0xea01, // unicode start number
getIconUnicode(name, startUnicode) {
let unicode,nextUniCode = startUnicode
if (glphMap[name]) {
unicode = String.fromCharCode(glphMap[name]);
} else {
unicode = String.fromCharCode(startUnicode++)
nextUniCode = startUnicode
}
return [unicode,nextUniCode]
},
svgicons2svgfont: {
fontHeight: 1000,
normalize: true
}
}).then(() => {
console.log('done!');
});;
// node_modules/svgtofont/src/utils.ts
function writeFontStream(svgPath: string) {
// file name
let _name = path.basename(svgPath, ".svg");
const glyph = fs.createReadStream(svgPath) as ReadStream & { metadata: { unicode: string[], name: string } };
let unicode: string[];
+ if(options.getIconUnicode) {
+ const [curUnicode, nextUnicode] = options.getIconUnicode(_name, startUnicode)
+ if(nextUnicode) {
+ startUnicode = nextUnicode
+ }
+ unicode = [curUnicode]
+ UnicodeObj[_name] = curUnicode
+ } else { + unicode = getIconUnicode(_name, options.useNameAsUnicode)
+ }
+ glyph.metadata = { unicode, name: _name };
- glyph.metadata = { unicode: getIconUnicode(_name, options.useNameAsUnicode), name: _name };
fontStream.write(glyph);
}
add patch-package
The following code is available
svgtofont.js
const svgtofont = require("svgtofont");
const pkg = require("./package.json");
const path = require("path");
const fs = require("fs-extra");
const glphMap = fs.readJSONSync("./glphMap.json");
svgtofont({
src: path.resolve(process.cwd(), "src/svg-icons"), // svg path
dist: path.resolve(process.cwd(), "font"), // output path
// styleTemplates: path.resolve(rootPath, "styles"), // file templates path (optional)
fontName: "iconfont", // font name
classNamePrefix: "poppy-icon",
css: true, // Create CSS files.
startUnicode: 0xe896, // unicode start number, latast glphMap.json "warning": 59541, 59541+1 === 0xe896
getIconUnicode(name, startUnicode) {
let unicode,
nextUniCode = startUnicode;
if (glphMap[name]) {
unicode = String.fromCharCode(glphMap[name]);
} else {
unicode = String.fromCharCode(startUnicode);
nextUniCode = startUnicode + 1;
glphMap[name] = startUnicode
}
return [unicode, nextUniCode];
},
svgicons2svgfont: {
fontHeight: 1000,
normalize: true,
},
// website = null, no demo html files
website: {
title: "iconfont",
// Must be a .svg format image.
logo: path.resolve(process.cwd(), "favicon.ico"),
version: pkg.version,
meta: {
description: "Converts SVG fonts to TTF/EOT/WOFF/WOFF2/SVG format.",
keywords: "svgtofont,TTF,EOT,WOFF,WOFF2,SVG",
},
description: ``,
// Add a Github corner to your website
// Like: https://github.com/uiwjs/react-github-corners
corners: {
url: "https://github.com/jaywcjlove/svgtofont",
width: 62, // default: 60
height: 62, // default: 60
bgColor: "#dc3545", // default: '#151513'
},
links: [
{
title: "GitHub",
url: "https://github.com/jaywcjlove/svgtofont",
},
{
title: "Feedback",
url: "https://github.com/jaywcjlove/svgtofont/issues",
},
{
title: "Font Class",
url: "index.html",
},
{
title: "Unicode",
url: "unicode.html",
},
],
footerInfo: `Licensed under MIT. (Yes it's free and <a href="https://github.com/jaywcjlove/svgtofont">open-sourced</a>`,
},
}).then(() => {
console.log("done!");
fs.writeJSONSync("./glphMap-new.json", glphMap);
});
getIconUnicode(name) {
if (glphMap[name]) return glphMap[name];
}
getIconUnicode(name, unicode) {
glphMap[name] = glphMap[name] || unicode;
return glphMap[name];
}
@chenyulun Is the api designed this way simpler?
有一部分是新增的图标,自然递增就行了,api能确保里面的计算的和配置传入的没冲突就行,Utils里面的函数又设置Unicodeobject,又做了对象值的返回,
也可以把这个配置函数往下传,在内部的getIconUnicode里面先获取配置的Unicode,没有的情况再递增算,这样最简单
就是判断useNameAsUnicode是否存在之前,先执行配置function,如果能获取用户传入的Unicode,就用用户配置的,没有在进行下面的文件名或者自增计算Unicode的逻辑
@chenyulun Upgrade v3.25.1
Lines 102 to 103 in e20b129
getIconUnicode(name, unicode, startUnicode) {
glphMap[name] = glphMap[name] || unicode;
return [glphMap[name], startUnicode];
}
nice