react-native-nano-icons 0.1.2 → 0.1.4

package/scripts/cli.ts

@@ -2,14 +2,16 @@
 /**
  * Bare React Native workflow: build icon fonts and link them into the native project.
  *
- * Run from your app root: npx react-native-nano-icons [--verbose]
+ * Run from your app root: npx react-native-nano-icons [--verbose] [--path <dir>]
  *
  * Reads .nanoicons.json (same shape as Expo plugin options) so Expo and bare apps
  * share one config format.
  *
  * Flags:
- *   --verbose   Show per-SVG processing details and pipeline timing
+ *   --verbose        Show per-SVG processing details and pipeline timing
+ *   --path <dir>     Directory containing .nanoicons.json (default: cwd)
  */
+import path from 'node:path';
 import {
   createOraLogger,
   loadNanoIconsConfig,
@@ -21,10 +23,17 @@ async function main(): Promise<void> {
   const verbose = process.argv.includes('--verbose');
   const level = verbose ? 'verbose' : 'normal';
 
+  const pathIdx = process.argv.indexOf('--path');
+  const projectRoot = process.cwd();
+  const configRoot =
+    pathIdx !== -1 && process.argv[pathIdx + 1]
+      ? path.resolve(projectRoot, process.argv[pathIdx + 1]!)
+      : projectRoot;
+
   const logger = await createOraLogger(level);
-  const config = loadNanoIconsConfig(process.cwd());
-  const built = await buildAllFonts(config.iconSets, process.cwd(), { logger });
-  await linkBare(process.cwd(), built, logger);
+  const config = loadNanoIconsConfig(configRoot);
+  const built = await buildAllFonts(config.iconSets, projectRoot, { logger });
+  await linkBare(projectRoot, built, logger);
 }
 
 main().catch((err: unknown) => {

package/src/core/font/compile.ts

@@ -1,38 +1,74 @@
 import fs from 'node:fs';
 import path from 'node:path';
-import { once } from 'node:events';
-import { type Transform } from 'node:stream';
 
 import { forceTtfMetrics } from './metrics.js';
 import svg2ttf from 'svg2ttf';
-import { parseCodepointFromFilename } from '../../utils/parse.js';
 
-async function writeGlyphStreamToFont(
-  fontStream: Transform,
-  svgPath: string,
-  filename: string
-): Promise<void> {
-  const codepoint = parseCodepointFromFilename(filename);
-  const name = path.basename(filename, '.svg');
+export type FontGlyph = {
+  codepoint: number;
+  advanceWidth: number;
+  /** Path data already in font coordinates (Y-up, placement applied). */
+  d: string;
+};
 
-  return new Promise((resolve, reject) => {
-    const glyphStream = fs.createReadStream(svgPath);
+function escapeXml(s: string): string {
+  return s.replace(/&/g, '&amp;').replace(/"/g, '&quot;');
+}
 
-    (glyphStream as any).metadata = {
-      name,
-      unicode: [String.fromCodePoint(codepoint)],
-    };
+/**
+ * Build an SVG font XML string from pre-transformed glyph data.
+ */
+function buildSvgFontXml(opts: {
+  fontName: string;
+  glyphs: FontGlyph[];
+  upm: number;
+  ascent: number;
+  descent: number;
+}): string {
+  const { fontName, glyphs, upm, ascent, descent } = opts;
 
-    glyphStream.on('error', reject);
-    // Do not add fontStream.on("error", reject) here — one per glyph would exceed
-    // Node's default MaxListeners (10). Font stream errors are handled once below.
-    fontStream.write(glyphStream);
-    glyphStream.on('end', resolve);
+  const glyphLines = glyphs.map((g) => {
+    const hex = g.codepoint.toString(16);
+    const name = `u${hex.padStart(4, '0')}`;
+    return `<glyph glyph-name="${name}" unicode="&#x${hex};" horiz-adv-x="${g.advanceWidth}" d="${escapeXml(g.d)}"/>`;
   });
+
+  return `<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg">
+<defs>
+<font id="${escapeXml(fontName)}" horiz-adv-x="${upm}">
+<font-face font-family="${escapeXml(fontName)}" units-per-em="${upm}" ascent="${ascent}" descent="${-Math.abs(descent)}"/>
+<missing-glyph horiz-adv-x="0"/>
+${glyphLines.join('\n')}
+</font>
+</defs>
+</svg>`;
+}
+
+export function parseCompileTtfFromGlyphsError(
+  err: unknown,
+  codepointToIcon: Map<number, string>
+) {
+  const msg = err instanceof Error ? err.message : String(err);
+  const cpMatch = msg.match(/glyph\s+"u([0-9a-fA-F]+)"/);
+  if (cpMatch) {
+    const cp = parseInt(cpMatch[1]!, 16);
+    const iconName = codepointToIcon.get(cp);
+    const detail = iconName
+      ? `icon "${iconName}" (codepoint u${cpMatch[1]})`
+      : `codepoint u${cpMatch[1]}`;
+    throw new Error(`Font compilation failed for ${detail}: ${msg}`);
+  }
+  throw err;
 }
 
-export async function compileTtfFromGlyphSVGs(opts: {
-  glyphDir: string;
+/**
+ * Compile a TTF font from pre-transformed glyph data.
+ * Builds SVG font XML directly (no intermediate files), then converts via svg2ttf.
+ */
+export async function compileTtfFromGlyphs(opts: {
+  glyphs: FontGlyph[];
   outTtfPath: string;
   fontName: string;
   upm: number;
@@ -40,52 +76,20 @@ export async function compileTtfFromGlyphSVGs(opts: {
   descent: number;
   lineGap?: number;
 }): Promise<void> {
-  const { SVGIcons2SVGFontStream } = await import('svgicons2svgfont');
-
-  const { glyphDir, outTtfPath, fontName, upm, ascent, descent } = opts;
+  const { glyphs, outTtfPath, fontName, upm, ascent, descent } = opts;
   const lineGap = opts.lineGap ?? 0;
 
-  const files = fs
-    .readdirSync(glyphDir)
-    .filter((f) => /^u[0-9a-fA-F]+\.svg$/.test(f))
-    .sort(
-      (a, b) => parseCodepointFromFilename(a) - parseCodepointFromFilename(b)
-    );
-
-  if (files.length === 0)
-    throw new Error(`No glyph SVGs found in: ${glyphDir}`);
+  if (glyphs.length === 0)
+    throw new Error('No glyphs to compile');
 
-  const fontStream = new SVGIcons2SVGFontStream({
+  const svgFontString = buildSvgFontXml({
     fontName,
-    fontHeight: upm,
-    normalize: false,
+    glyphs,
+    upm,
     ascent,
     descent,
   });
 
-  const svgFontChunks: Buffer[] = [];
-  fontStream.on('data', (c: Buffer | string) =>
-    svgFontChunks.push(Buffer.isBuffer(c) ? c : Buffer.from(c))
-  );
-
-  // Single error listener for the font stream; per-glyph errors are handled in writeGlyphStreamToFont.
-  let fontStreamReject: (err: Error) => void;
-  const fontStreamErrorPromise = new Promise<never>((_, rej) => {
-    fontStreamReject = rej;
-  });
-  fontStream.on('error', (err: Error) => fontStreamReject(err));
-
-  for (const f of files) {
-    await Promise.race([
-      writeGlyphStreamToFont(fontStream, path.join(glyphDir, f), f),
-      fontStreamErrorPromise,
-    ]);
-  }
-
-  fontStream.end();
-  await once(fontStream, 'end');
-
-  const svgFontString = Buffer.concat(svgFontChunks).toString('utf8');
   const ttfRaw = svg2ttf(svgFontString);
   const rawBuf = Buffer.from(ttfRaw.buffer);
 

package/src/core/pipeline/managers.ts

@@ -73,14 +73,37 @@ export class PyodideManager {
 
     await py.loadPackage(['micropip', 'lxml'], { messageCallback: () => {} });
 
+    // Resolve local picosvg wheel path for offline-first installation.
+    const picosvgWhlDir = path.join(
+      getPackageRoot(),
+      'src',
+      'core',
+      'shims'
+    );
+    const picosvgWhl = (await fs.readdir(picosvgWhlDir))
+      .find((f) => f.startsWith('picosvg-') && f.endsWith('.whl'));
+    const localWhlUrl = picosvgWhl
+      ? `file://${path.join(picosvgWhlDir, picosvgWhl)}`
+      : null;
+
+    py.globals.set('_picosvg_local_whl', localWhlUrl);
+
     await py.runPythonAsync(`
       import sys
       if "/" not in sys.path:
           sys.path.insert(0, "/")
-          
+
       import micropip
-      await micropip.install("picosvg", deps=False)
-          
+
+      _whl = _picosvg_local_whl
+      if _whl:
+          try:
+              await micropip.install(_whl, deps=False)
+          except Exception:
+              await micropip.install("picosvg", deps=False)
+      else:
+          await micropip.install("picosvg", deps=False)
+
       import pathops
       import picosvg
     `);

package/src/core/pipeline/run.ts

@@ -1,13 +1,15 @@
-import fs from 'node:fs';
 import fsp from 'node:fs/promises';
 import path from 'node:path';
 
-import { compileTtfFromGlyphSVGs } from '../font/compile.js';
-import { picoFromFile } from './managers.js';
+import {
+  compileTtfFromGlyphs,
+  parseCompileTtfFromGlyphsError,
+  type FontGlyph,
+} from '../font/compile.js';
+import { picoFromFile, PathKitManager } from './managers.js';
 
 import {
   ensureDir,
-  ensureEmptyDir,
   type PipelineConfig,
   type PipelinePaths,
 } from './config.js';
@@ -16,9 +18,15 @@ import {
   preprocessSvg,
   shouldSkipPath,
   validateSvg,
+  extractOriginalEvenoddDs,
+  restoreOriginalEvenoddDs,
 } from '../svg/svg_dom.js';
-import { computePlacement, writeLayerSvg } from '../svg/layers.js';
-import type { GlyphEntry, NanoGlyphMap } from '../types.js';
+import { computePlacement, transformPathForFont } from '../svg/layers.js';
+import { convertEvenoddToWinding } from '../svg/svg_pathops.js';
+import type {
+  GlyphLayer,
+  NanoGlyphMap,
+} from '../types.js';
 import type { NanoLogger } from '../types.js';
 
 export type PipelineResult = {
@@ -26,6 +34,78 @@ export type PipelineResult = {
   glyphmapPath: string;
 };
 
+// ---------------------------------------------------------------------------
+// Same-color path merging
+// ---------------------------------------------------------------------------
+
+type ParsedPath = { d: string; fill: string | null; fillRule?: 'evenodd'; noMerge?: boolean };
+
+/**
+ * Concatenate multiple SVG path `d` strings into a single compound path.
+ * This preserves the exact geometry of each path (no boolean operations)
+ * while combining them into one glyph. Under nonzero winding, this renders
+ * identically to drawing each path separately with the same color.
+ */
+function concatPathDs(ds: string[]): string | null {
+  if (ds.length === 0) return null;
+  if (ds.length === 1) return ds[0]!;
+  return ds.join(' ');
+}
+
+/**
+ * Merge consecutive same-color paths into single compound paths via boolean UNION.
+ * Preserves z-order: only merges runs of adjacent paths with identical fill color.
+ */
+function mergeSameColorPaths(
+  paths: ParsedPath[],
+  logger?: NanoLogger
+): ParsedPath[] {
+  if (paths.length <= 1) return paths;
+
+  const result: ParsedPath[] = [];
+  let i = 0;
+
+  while (i < paths.length) {
+    const fill = paths[i]!.fill;
+
+    // Find consecutive run of same fill that are all mergeable.
+    // Paths converted from evenodd have compound hole structure and must not
+    // be merged — their CW hole contours would cancel CCW contours from
+    // adjacent paths, producing incorrect fill.
+    let j = i + 1;
+    if (!paths[i]!.noMerge) {
+      while (
+        j < paths.length &&
+        paths[j]!.fill === fill &&
+        !paths[j]!.noMerge
+      ) {
+        j++;
+      }
+    }
+
+    if (j - i === 1) {
+      result.push(paths[i]!);
+    } else {
+      const group = paths.slice(i, j);
+      const merged = concatPathDs(group.map((p) => p.d));
+      if (merged) {
+        logger?.info(
+          `    ⊕ Merged ${group.length} same-color paths (fill=${fill})`
+        );
+        result.push({ d: merged, fill });
+      } else {
+        result.push(...group);
+      }
+    }
+    i = j;
+  }
+  return result;
+}
+
+// ---------------------------------------------------------------------------
+// Pipeline
+// ---------------------------------------------------------------------------
+
 /**
  * Run the font pipeline with given config and paths.
  * Uses the singleton Pyodide/PathKit instance (initialized on first call).
@@ -40,7 +120,6 @@ export async function runPipeline(
 
   logger?.update(`Building "${config.fontFamily}"…`);
 
-  ensureEmptyDir(paths.tempDir);
   ensureDir(paths.outputDir);
 
   const files = (await fsp.readdir(paths.inputDir)).filter((f) =>
@@ -48,16 +127,20 @@ export async function runPipeline(
   );
 
   const glyphMap: NanoGlyphMap = {
-    meta: {
-      fontFamily: config.fontFamily,
-      upm: config.upm,
-      safeZone: config.safeZone,
-      startUnicode: config.startUnicode,
+    m: {
+      f: config.fontFamily,
+      u: config.upm,
+      z: config.safeZone,
+      s: config.startUnicode,
     },
-    icons: {},
+    i: {},
   };
 
   let currentUnicode = config.startUnicode;
+  const codepointToIcon = new Map<number, string>();
+  const allGlyphs: FontGlyph[] = [];
+
+  const PathKit = await PathKitManager.getInstance();
 
   for (const file of files) {
     const iconName = path.parse(file).name;
@@ -76,8 +159,40 @@ export async function runPipeline(
     }
 
     const preprocessed = preprocessSvg(rawContent);
+
+    // Preserve original evenodd `d` strings BEFORE picosvg processes them.
+    // Picosvg's simplify (via our PathKit shim) can drop contours from
+    // multi-subpath evenodd paths — we restore the originals after.
+    const originalEvenoddDs = extractOriginalEvenoddDs(preprocessed);
+
     const flattenedSvg = await picoFromFile(filePath, preprocessed);
-    const parsed = parseFlattenedSvg(flattenedSvg);
+    const parsed = parseFlattenedSvg(flattenedSvg, {
+      onSanitize: (original) => {
+        logger?.info(
+          `  ⚠ Sanitized path in "${file}": path was missing initial moveto (prepended M from endpoint)`
+        );
+        logger?.info(`    Original: ${original.slice(0, 80)}…`);
+      },
+    });
+
+    // Restore original evenodd path data (undamaged by picosvg's simplify),
+    // then convert to nonzero winding with our containment-based algorithm.
+    // Mark as noMerge — compound paths with holes must stay separate so their
+    // CW hole contours don't cancel adjacent paths' CCW contours.
+    if (originalEvenoddDs.length > 0) {
+      restoreOriginalEvenoddDs(parsed.paths, originalEvenoddDs);
+    }
+    for (const p of parsed.paths) {
+      if (p.fillRule === 'evenodd') {
+        logger?.info(`  ↻ Converting evenodd path to nonzero winding in "${file}"`);
+        p.d = convertEvenoddToWinding(PathKit, p.d);
+        delete p.fillRule;
+        (p as ParsedPath).noMerge = true;
+      }
+    }
+
+    // Merge consecutive same-color paths into single compound glyphs
+    const mergedPaths = mergeSameColorPaths(parsed.paths, logger);
 
     const { vx, vy, scale, xOff, yOff, adv } = computePlacement({
       upm: config.upm,
@@ -85,31 +200,34 @@ export async function runPipeline(
       viewBox: parsed.viewBox,
     });
 
-    const entry: GlyphEntry = { adv, layers: [] };
+    const layers: GlyphLayer[] = [];
 
-    for (const p of parsed.paths) {
+    for (const p of mergedPaths) {
       if (shouldSkipPath(p.d, p.fill)) continue;
 
       const cp = currentUnicode++;
+      codepointToIcon.set(cp, iconName);
 
-      await writeLayerSvg({
-        tempDir: paths.tempDir,
-        upm: config.upm,
-        adv,
+      const fontD = transformPathForFont(PathKit, p.d, {
         vx,
         vy,
         scale,
         xOff,
         yOff,
-        d: p.d,
+        upm: config.upm,
+      });
+
+      allGlyphs.push({
         codepoint: cp,
+        advanceWidth: adv,
+        d: fontD,
       });
 
-      entry.layers.push({ codepoint: cp, color: p.fill || 'black' });
+      layers.push([cp, p.fill || 'black']);
     }
 
-    if (entry.layers.length > 0) {
-      glyphMap.icons[iconName] = entry;
+    if (layers.length > 0) {
+      glyphMap.i[iconName] = [adv, layers];
     }
   }
 
@@ -119,27 +237,27 @@ export async function runPipeline(
   );
 
   if (options?.inputHash) {
-    glyphMap.meta.hash = options.inputHash;
+    glyphMap.m.h = options.inputHash;
   }
-  await fsp.writeFile(glyphmapPath, JSON.stringify(glyphMap, null, 2), 'utf8');
+  await fsp.writeFile(glyphmapPath, JSON.stringify(glyphMap), 'utf8');
 
   logger?.info(`Compiling TTF…`);
   const ttfPath = path.join(paths.outputDir, `${config.fontFamily}.ttf`);
 
-  await compileTtfFromGlyphSVGs({
-    glyphDir: paths.tempDir,
-    outTtfPath: ttfPath,
-    fontName: config.fontFamily,
-    upm: config.upm,
-    ascent: config.upm,
-    descent: 0,
-  });
-
-  if (fs.existsSync(paths.tempDir)) {
-    fs.rmSync(paths.tempDir, { recursive: true, force: true });
+  try {
+    await compileTtfFromGlyphs({
+      glyphs: allGlyphs,
+      outTtfPath: ttfPath,
+      fontName: config.fontFamily,
+      upm: config.upm,
+      ascent: config.upm,
+      descent: 0,
+    });
+  } catch (err: unknown) {
+    parseCompileTtfFromGlyphsError(err, codepointToIcon);
   }
 
-  const iconCount = Object.keys(glyphMap.icons).length;
+  const iconCount = Object.keys(glyphMap.i).length;
   const elapsed = Date.now() - startTime;
   logger?.succeed(
     `Built ${config.fontFamily}.ttf [${iconCount} icon${

package/src/core/svg/layers.ts

@@ -1,6 +1,8 @@
 import fsp from 'node:fs/promises';
 import path from 'node:path';
 
+import type { PathKitModule } from '../types.js';
+
 function roundInt(n: number): number {
   return Math.round(n);
 }
@@ -64,3 +66,45 @@ export async function writeLayerSvg(opts: {
 
   await fsp.writeFile(path.join(opts.tempDir, `u${hex}.svg`), layerSvg, 'utf8');
 }
+
+/**
+ * Transform an SVG path `d` string from source SVG coordinates into font
+ * glyph coordinates (Y-up, with placement scaling and centering applied).
+ *
+ * Combines placement transform (translate + scale + translate) with the
+ * SVG→font Y-axis flip into a single affine transform applied via PathKit.
+ */
+export function transformPathForFont(
+  PathKit: PathKitModule,
+  d: string,
+  opts: {
+    vx: number;
+    vy: number;
+    scale: number;
+    xOff: number;
+    yOff: number;
+    upm: number;
+  }
+): string {
+  const { vx, vy, scale, xOff, yOff, upm } = opts;
+
+  const p = PathKit.FromSVGString(d);
+  if (!p) return d;
+
+  // Combined affine: placement + Y-flip for font coordinates.
+  //   x' =  scale * (x - vx) + xOff
+  //   y' =  upm - (scale * (y - vy) + yOff)
+  //
+  // SkMatrix row-major: [scaleX, skewX, transX, skewY, scaleY, transY, 0,0,1]
+  const scaleX = scale;
+  const scaleY = -scale;
+  const transX = xOff - vx * scale;
+  const transY = upm - yOff + vy * scale;
+
+  p.transform(scaleX, 0, transX, 0, scaleY, transY, 0, 0, 1);
+
+  const result = p.toSVGString();
+  p.delete?.();
+
+  return result;
+}