fix(icon): broken fonticon

Author: adenvt

packages/persona-icon/font/persona-icon.css

@@ -46,9 +46,15 @@
   },
   "devDependencies": {
     "@nuxt/module-builder": "1.0.1",
+    "@tsconfig/node22": "^22.0.1",
     "@types/fs-extra": "11.0.4",
     "@types/minimist": "1.2.5",
+    "@types/svg2ttf": "^5.0.3",
+    "@types/ttf2eot": "^2.0.2",
+    "@types/ttf2woff": "^2.0.4",
+    "@types/ttf2woff2": "^6.0.0",
     "dotenv": "16.5.0",
+    "fast-glob": "^3.3.3",
     "figma-api": "1.12.0",
     "fs-extra": "11.3.0",
     "jiti": "2.4.2",
@@ -58,8 +64,12 @@
     "ora": "8.2.0",
     "p-all": "5.0.0",
     "svg-path-commander": "2.1.10",
+    "svg2ttf": "^6.0.3",
+    "svgicons2svgfont": "^15.0.1",
     "svgo": "3.3.2",
-    "webfont": "11.2.26"
+    "ttf2eot": "^3.1.0",
+    "ttf2woff": "^3.0.0",
+    "ttf2woff2": "^6.0.1"
   },
   "dependencies": {
     "@nuxt/kit": "3.16.2"

packages/persona-icon/font/persona-icon.eot

@@ -5,9 +5,9 @@
 import { resolve } from 'node:path'
 import { readJSON } from 'fs-extra'
 import { name } from '../package.json'
-import type { MetaData } from './types'
+import type { MetaData } from './types.js'
 import { ofetch } from 'ofetch'
-import * as ohash from 'ohash'
+import { diff } from 'ohash/utils'
 import minimist from 'minimist'
 import {
   groupBy,
@@ -42,7 +42,7 @@ async function getMeta (version: string): Promise<MetaData[]> {
 async function main () {
   const sourceMeta = getFilesData(await getMeta(argv.from ?? 'latest'))
   const targetMeta = getFilesData(await getMeta(argv.to ?? 'local'))
-  const diffs      = ohash.diff(sourceMeta, targetMeta)
+  const diffs      = diff(sourceMeta, targetMeta)
   const changelogs = groupBy(sortBy(diffs, ['type', 'key']), 'type')
 
   if (Object.keys(changelogs).length > 0) {
@@ -56,7 +56,7 @@ async function main () {
           console.log(`- ${group}`)
         else {
           for (const item of items)
-            console.log(`- ${item.key.replace('.hash', '')}`)
+            console.log(`- ${(item.key as string).replace('.hash', '')}`)
         }
       }
     }

packages/persona-icon/font/persona-icon.json

@@ -1,8 +1,9 @@
-/* eslint-disable unicorn/prefer-module */
-import { webfont } from 'webfont'
 import {
   writeFile,
   ensureFile,
+  createWriteStream,
+  createReadStream,
+  readFile,
 } from 'fs-extra'
 import {
   resolve,
@@ -11,74 +12,157 @@ import {
   basename,
 } from 'node:path'
 import { createHash } from 'node:crypto'
-import type { Result } from 'webfont/dist/src/types/Result'
 import { EOL } from 'node:os'
+import { fileURLToPath } from 'node:url'
+import glob from 'fast-glob'
+import type { Glyph, SVGIconStream } from 'svgicons2svgfont'
+import { SVGIcons2SVGFontStream } from 'svgicons2svgfont'
+import svg2ttf from 'svg2ttf'
+import ttf2woff from 'ttf2woff'
+import ttf2woff2 from 'ttf2woff2'
+import ttf2eot from 'ttf2eot'
+
+const SVG_DIR  = fileURLToPath(new URL('../svg/', import.meta.url))
+const FONT_DIR = fileURLToPath(new URL('../font/', import.meta.url))
+
+function withDirname (a: string, b: string) {
+  const dirA = basename(dirname(a))
+  const dirB = basename(dirname(b))
+
+  return dirA.localeCompare(dirB)
+}
 
-const SVG_DIR  = resolve(__dirname, '../svg/')
-const FONT_DIR = resolve(__dirname, '../font/')
-
-export async function createFont () {
-  const result = await webfont({
-    files            : join(SVG_DIR, '**', '16.svg'),
-    fontName         : 'Persona Icon',
-    templateClassName: 'pi',
-    fixedWidth       : true,
-    normalize        : true,
-    fontHeight       : 1000,
-    round            : 10e12,
-    sort             : true,
-    glyphTransformFn (obj) {
-      return Object.assign(obj, { name: basename(dirname((obj as any).path)) })
-    },
+async function createSVG () {
+  await ensureFile(join(FONT_DIR, 'persona-icon.svg'))
+
+  const icons  = await glob('./**/16.svg', { cwd: SVG_DIR })
+  const glyphs = await new Promise<Glyph[]>((resolve, reject) => {
+    const fontStream = new SVGIcons2SVGFontStream({
+      fontName  : 'Persona Icon',
+      fixedWidth: true,
+      normalize : true,
+      fontHeight: 1000,
+      round     : 10e12,
+    })
+
+    fontStream.pipe(createWriteStream(join(FONT_DIR, 'persona-icon.svg')))
+      .on('finish', () => {
+        resolve(fontStream.glyphs)
+      })
+      .on('error', (error) => {
+        reject(error)
+      })
+
+    let unicode = 0xEA_00
+
+    for (const icon of icons.toSorted(withDirname)) {
+      const glyph: SVGIconStream = createReadStream(join(SVG_DIR, icon)) as any
+
+      glyph.metadata = {
+        name   : basename(dirname(icon)),
+        unicode: [String.fromCodePoint(++unicode)],
+      }
+
+      fontStream.write(glyph)
+    }
+
+    fontStream.end()
   })
 
-  if (result.ttf) {
-    await ensureFile(resolve(FONT_DIR, 'persona-icon.ttf'))
-    await writeFile(resolve(FONT_DIR, 'persona-icon.ttf'), result.ttf.toString())
-  }
+  await ensureFile(join(FONT_DIR, 'persona-icon.json'))
+  await writeFile(join(FONT_DIR, 'persona-icon.json'), JSON.stringify(glyphs, undefined, 2))
 
-  if (result.woff) {
-    await ensureFile(resolve(FONT_DIR, 'persona-icon.woff'))
-    await writeFile(resolve(FONT_DIR, 'persona-icon.woff'), result.woff.toString())
-  }
+  const buffer = await readFile(join(FONT_DIR, 'persona-icon.svg'))
 
-  if (result.woff2) {
-    await ensureFile(resolve(FONT_DIR, 'persona-icon.woff2'))
-    await writeFile(resolve(FONT_DIR, 'persona-icon.woff2'), result.woff2.toString())
-  }
+  return { glyphs, buffer }
+}
 
-  if (result.eot) {
-    await ensureFile(resolve(FONT_DIR, 'persona-icon.eot'))
-    await writeFile(resolve(FONT_DIR, 'persona-icon.eot'), result.eot.toString())
-  }
+async function createTtf (svg: Buffer) {
+  const result = svg2ttf(svg.toString('utf8'))
+  const output = Buffer.from(result.buffer)
 
-  if (result.svg) {
-    await ensureFile(resolve(FONT_DIR, 'persona-icon.svg'))
-    await writeFile(resolve(FONT_DIR, 'persona-icon.svg'), result.svg.toString())
-  }
+  await ensureFile(resolve(FONT_DIR, 'persona-icon.ttf'))
+  await writeFile(resolve(FONT_DIR, 'persona-icon.ttf'), output)
 
-  await createCss(result)
+  return output
+}
+
+async function createWoff (ttf: Buffer) {
+  const result = ttf2woff(ttf)
+
+  await ensureFile(resolve(FONT_DIR, 'persona-icon.woff'))
+  await writeFile(resolve(FONT_DIR, 'persona-icon.woff'), result)
+
+  return result
+}
+
+async function createWoff2 (ttf: Buffer) {
+  const result = ttf2woff2(ttf)
+
+  await ensureFile(resolve(FONT_DIR, 'persona-icon.woff2'))
+  await writeFile(resolve(FONT_DIR, 'persona-icon.woff2'), result)
+
+  return result
+}
+
+async function createEot (ttf: Buffer) {
+  const result = ttf2eot(ttf)
+
+  await ensureFile(resolve(FONT_DIR, 'persona-icon.eot'))
+  await writeFile(resolve(FONT_DIR, 'persona-icon.eot'), result)
+
+  return result
+}
+
+export async function createFont () {
+  const {
+    glyphs,
+    buffer: svg,
+  } = await createSVG()
+
+  const ttf   = await createTtf(svg)
+  const woff  = await createWoff(ttf)
+  const woff2 = await createWoff2(ttf)
+  const eot   = await createEot(ttf)
+
+  await createCss({
+    glyphs,
+    svg,
+    ttf,
+    eot,
+    woff,
+    woff2,
+  })
 }
 
 function hash (buffer: Buffer | string, length = 4) {
   return createHash('shake256', { outputLength: length })
-    .update(buffer.toString())
+    .update(buffer)
     .digest('hex')
 }
 
 function toCode (unicode: string) {
   return unicode.codePointAt(0)?.toString(16).padStart(4, '0') ?? ''
 }
 
-async function createCss (result: Result) {
+interface CreateCSS {
+  glyphs: Glyph[],
+  svg: Buffer,
+  ttf: Buffer,
+  eot: Buffer,
+  woff: Buffer,
+  woff2: Buffer,
+}
+
+async function createCss (input: CreateCSS) {
   let css = `@font-face {
   font-family: 'Persona Icon';
-  src: url('../font/persona-icon.eot?${hash(result.eot ?? '')}');
-  src: url('../font/persona-icon.eot?${hash(result.eot ?? '')}#iefix') format('embedded-opentype'),
-       url('../font/persona-icon.woff2?${hash(result.woff2 ?? '')}') format('woff2'),
-       url('../font/persona-icon.woff?${hash(result.woff ?? '')}') format('woff'),
-       url('../font/persona-icon.ttf?${hash(result.ttf ?? '')}') format('truetype'),
-       url('../font/persona-icon.svg?${hash(result.svg ?? '')}#${encodeURIComponent('Persona Icon')}') format('svg');
+  src: url('../font/persona-icon.eot?${hash(input.eot)}');
+  src: url('../font/persona-icon.eot?${hash(input.eot)}#iefix') format('embedded-opentype'),
+       url('../font/persona-icon.woff2?${hash(input.woff2)}') format('woff2'),
+       url('../font/persona-icon.woff?${hash(input.woff)}') format('woff'),
+       url('../font/persona-icon.ttf?${hash(input.ttf)}') format('truetype'),
+       url('../font/persona-icon.svg?${hash(input.svg ?? '')}#${encodeURIComponent('Persona Icon')}') format('svg');
   font-weight: normal;
   font-style: normal;
 }
@@ -99,9 +183,9 @@ async function createCss (result: Result) {
   -moz-osx-font-smoothing: grayscale;
 }${EOL}${EOL}`
 
-  for (const glyph of (result.glyphsData ?? [])) {
-    const name    = glyph.metadata?.name
-    const content = glyph.metadata?.unicode?.at(0)
+  for (const glyph of (input.glyphs ?? [])) {
+    const name    = glyph.name
+    const content = glyph.unicode?.at(0)
 
     if (name && content)
       css += `.pi-${name}::before { content: '\\${toCode(content)}' }${EOL}`