jaywcjlove / svgtofont

Read a set of SVG icons and ouput a TTF/EOT/WOFF/WOFF2/SVG font.
https://jaywcjlove.github.io/svgtofont
MIT License
515 stars 81 forks source link

add options glyphTransformFn #204

Closed chenyulun closed 1 year ago

chenyulun commented 1 year ago

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!');
});;
chenyulun commented 1 year ago

// 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);
    }
chenyulun commented 1 year ago

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);
});
jaywcjlove commented 1 year ago

@chenyulun

getIconUnicode(name) {
  if (glphMap[name]) return glphMap[name];
}
jaywcjlove commented 1 year ago

@chenyulun

getIconUnicode(name, unicode) {
  glphMap[name] = glphMap[name] || unicode;
  return glphMap[name];
}
jaywcjlove commented 1 year ago

@chenyulun Is the api designed this way simpler?

chenyulun commented 1 year ago

有一部分是新增的图标,自然递增就行了,api能确保里面的计算的和配置传入的没冲突就行,Utils里面的函数又设置Unicodeobject,又做了对象值的返回, 也可以把这个配置函数往下传,在内部的getIconUnicode里面先获取配置的Unicode,没有的情况再递增算,这样最简单

chenyulun commented 1 year ago

就是判断useNameAsUnicode是否存在之前,先执行配置function,如果能获取用户传入的Unicode,就用用户配置的,没有在进行下面的文件名或者自增计算Unicode的逻辑

jaywcjlove commented 1 year ago

@chenyulun Upgrade v3.25.1

https://github.com/jaywcjlove/svgtofont/blob/e20b12953c58d67eff50da5a129694b2ee41f515/src/index.ts#L102-L103

jaywcjlove commented 1 year ago
getIconUnicode(name, unicode, startUnicode) {
  glphMap[name] = glphMap[name] || unicode;
  return [glphMap[name], startUnicode];
}
chenyulun commented 1 year ago

nice