Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

add options glyphTransformFn #204

Closed
chenyulun opened this issue Jun 8, 2023 · 10 comments
Closed

add options glyphTransformFn #204

chenyulun opened this issue Jun 8, 2023 · 10 comments

Comments

@chenyulun
Copy link
Contributor

chenyulun commented Jun 8, 2023

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
Copy link
Contributor Author

// 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
Copy link
Contributor Author

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
Copy link
Owner

@chenyulun

getIconUnicode(name) {
  if (glphMap[name]) return glphMap[name];
}

@jaywcjlove
Copy link
Owner

@chenyulun

getIconUnicode(name, unicode) {
  glphMap[name] = glphMap[name] || unicode;
  return glphMap[name];
}

@jaywcjlove
Copy link
Owner

@chenyulun Is the api designed this way simpler?

@chenyulun
Copy link
Contributor Author

chenyulun commented Jun 8, 2023

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

@chenyulun
Copy link
Contributor Author

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

@jaywcjlove
Copy link
Owner

@chenyulun Upgrade v3.25.1

svgtofont/src/index.ts

Lines 102 to 103 in e20b129

/** Get Icon Unicode */
getIconUnicode?: (name: string, unicode: string, startUnicode: number) => [string, number];

@jaywcjlove
Copy link
Owner

getIconUnicode(name, unicode, startUnicode) {
  glphMap[name] = glphMap[name] || unicode;
  return [glphMap[name], startUnicode];
}

@chenyulun
Copy link
Contributor Author

nice

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants