react-native-nano-icons 0.1.2 → 0.1.4

package/lib/commonjs/src/core/pipeline/run.js

@@ -4,7 +4,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.runPipeline = runPipeline;
-const node_fs_1 = __importDefault(require("node:fs"));
 const promises_1 = __importDefault(require("node:fs/promises"));
 const node_path_1 = __importDefault(require("node:path"));
 const compile_js_1 = require("../font/compile.js");
@@ -12,6 +11,64 @@ const managers_js_1 = require("./managers.js");
 const config_js_1 = require("./config.js");
 const svg_dom_js_1 = require("../svg/svg_dom.js");
 const layers_js_1 = require("../svg/layers.js");
+const svg_pathops_js_1 = require("../svg/svg_pathops.js");
+/**
+ * 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) {
+    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, logger) {
+    if (paths.length <= 1)
+        return paths;
+    const result = [];
+    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).
@@ -20,19 +77,21 @@ async function runPipeline(config, paths, options) {
     const startTime = Date.now();
     const logger = options?.logger;
     logger?.update(`Building "${config.fontFamily}"…`);
-    (0, config_js_1.ensureEmptyDir)(paths.tempDir);
     (0, config_js_1.ensureDir)(paths.outputDir);
     const files = (await promises_1.default.readdir(paths.inputDir)).filter((f) => f.toLowerCase().endsWith('.svg'));
     const glyphMap = {
-        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();
+    const allGlyphs = [];
+    const PathKit = await managers_js_1.PathKitManager.getInstance();
     for (const file of files) {
         const iconName = node_path_1.default.parse(file).name;
         const filePath = node_path_1.default.join(paths.inputDir, file);
@@ -44,55 +103,85 @@ async function runPipeline(config, paths, options) {
             continue;
         }
         const preprocessed = (0, svg_dom_js_1.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 = (0, svg_dom_js_1.extractOriginalEvenoddDs)(preprocessed);
         const flattenedSvg = await (0, managers_js_1.picoFromFile)(filePath, preprocessed);
-        const parsed = (0, svg_dom_js_1.parseFlattenedSvg)(flattenedSvg);
+        const parsed = (0, svg_dom_js_1.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) {
+            (0, svg_dom_js_1.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 = (0, svg_pathops_js_1.convertEvenoddToWinding)(PathKit, p.d);
+                delete p.fillRule;
+                p.noMerge = true;
+            }
+        }
+        // Merge consecutive same-color paths into single compound glyphs
+        const mergedPaths = mergeSameColorPaths(parsed.paths, logger);
         const { vx, vy, scale, xOff, yOff, adv } = (0, layers_js_1.computePlacement)({
             upm: config.upm,
             safeZone: config.safeZone,
             viewBox: parsed.viewBox,
         });
-        const entry = { adv, layers: [] };
-        for (const p of parsed.paths) {
+        const layers = [];
+        for (const p of mergedPaths) {
             if ((0, svg_dom_js_1.shouldSkipPath)(p.d, p.fill))
                 continue;
             const cp = currentUnicode++;
-            await (0, layers_js_1.writeLayerSvg)({
-                tempDir: paths.tempDir,
-                upm: config.upm,
-                adv,
+            codepointToIcon.set(cp, iconName);
+            const fontD = (0, layers_js_1.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];
         }
     }
     const glyphmapPath = node_path_1.default.join(paths.outputDir, `${config.fontFamily}.glyphmap.json`);
     if (options?.inputHash) {
-        glyphMap.meta.hash = options.inputHash;
+        glyphMap.m.h = options.inputHash;
     }
-    await promises_1.default.writeFile(glyphmapPath, JSON.stringify(glyphMap, null, 2), 'utf8');
+    await promises_1.default.writeFile(glyphmapPath, JSON.stringify(glyphMap), 'utf8');
     logger?.info(`Compiling TTF…`);
     const ttfPath = node_path_1.default.join(paths.outputDir, `${config.fontFamily}.ttf`);
-    await (0, compile_js_1.compileTtfFromGlyphSVGs)({
-        glyphDir: paths.tempDir,
-        outTtfPath: ttfPath,
-        fontName: config.fontFamily,
-        upm: config.upm,
-        ascent: config.upm,
-        descent: 0,
-    });
-    if (node_fs_1.default.existsSync(paths.tempDir)) {
-        node_fs_1.default.rmSync(paths.tempDir, { recursive: true, force: true });
+    try {
+        await (0, compile_js_1.compileTtfFromGlyphs)({
+            glyphs: allGlyphs,
+            outTtfPath: ttfPath,
+            fontName: config.fontFamily,
+            upm: config.upm,
+            ascent: config.upm,
+            descent: 0,
+        });
+    }
+    catch (err) {
+        (0, compile_js_1.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${iconCount === 1 ? '' : 's'} in ${elapsed}ms]`);
     return { ttfPath, glyphmapPath };

package/lib/commonjs/src/core/svg/layers.d.ts

@@ -1,3 +1,4 @@
+import type { PathKitModule } from '../types.js';
 export declare function computePlacement(opts: {
     upm: number;
     safeZone: number;
@@ -22,3 +23,18 @@ export declare function writeLayerSvg(opts: {
     d: string;
     codepoint: number;
 }): Promise<void>;
+/**
+ * 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 declare function transformPathForFont(PathKit: PathKitModule, d: string, opts: {
+    vx: number;
+    vy: number;
+    scale: number;
+    xOff: number;
+    yOff: number;
+    upm: number;
+}): string;

package/lib/commonjs/src/core/svg/layers.js

@@ -5,6 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.computePlacement = computePlacement;
 exports.writeLayerSvg = writeLayerSvg;
+exports.transformPathForFont = transformPathForFont;
 const promises_1 = __importDefault(require("node:fs/promises"));
 const node_path_1 = __importDefault(require("node:path"));
 function roundInt(n) {
@@ -40,3 +41,29 @@ async function writeLayerSvg(opts) {
     </svg>`.trim();
     await promises_1.default.writeFile(node_path_1.default.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.
+ */
+function transformPathForFont(PathKit, d, opts) {
+    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;
+}

package/lib/commonjs/src/core/svg/svg_dom.d.ts

@@ -3,14 +3,27 @@ export type ParsedFlatSvg = {
     paths: Array<{
         d: string;
         fill: string | null;
+        fillRule?: 'evenodd';
     }>;
 };
 export declare function calculateOpColor(fill: string | null, opacity: number, el: Element): `rgba(${number},${number},${number},${number})`;
+/**
+ * If a flattened path lost its initial moveto (e.g. picosvg dropped an empty
+ * `Mx y z` subpath), prepend `M` using the path's last coordinate pair.
+ * For closed icon shapes the endpoint equals the start point.
+ */
+export declare function sanitizePathData(d: string): {
+    d: string;
+    sanitized: boolean;
+};
 export declare const parsePath: (p: Element) => {
     d: string;
     fill: string | null;
+    fillRule?: "evenodd";
 };
-export declare function parseFlattenedSvg(flattenedSvg: string): ParsedFlatSvg;
+export declare function parseFlattenedSvg(flattenedSvg: string, options?: {
+    onSanitize?: (original: string) => void;
+}): ParsedFlatSvg;
 export declare function shouldSkipPath(d: string, fill: string | null): boolean;
 export type SvgValidation = {
     valid: true;
@@ -19,4 +32,19 @@ export type SvgValidation = {
     reason: string;
 };
 export declare function validateSvg(content: string): SvgValidation;
+/**
+ * Extract the original `d` strings of evenodd paths from the raw SVG
+ * BEFORE picosvg processes it. Picosvg's simplify (via our PathKit shim)
+ * can drop contours from multi-subpath evenodd paths, so we preserve
+ * the originals and apply our own winding conversion later.
+ *
+ * Returns one `d` string per evenodd path, in document order.
+ */
+export declare function extractOriginalEvenoddDs(svgContent: string): string[];
+/**
+ * Replace picosvg's (potentially damaged) evenodd path data with the
+ * preserved originals. Matches by position: the Nth evenodd path in
+ * the parsed output gets the Nth original `d` string.
+ */
+export declare function restoreOriginalEvenoddDs(paths: ParsedFlatSvg['paths'], originalDs: string[]): void;
 export declare function preprocessSvg(content: string): string;

package/lib/commonjs/src/core/svg/svg_dom.js

@@ -2,9 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.parsePath = void 0;
 exports.calculateOpColor = calculateOpColor;
+exports.sanitizePathData = sanitizePathData;
 exports.parseFlattenedSvg = parseFlattenedSvg;
 exports.shouldSkipPath = shouldSkipPath;
 exports.validateSvg = validateSvg;
+exports.extractOriginalEvenoddDs = extractOriginalEvenoddDs;
+exports.restoreOriginalEvenoddDs = restoreOriginalEvenoddDs;
 exports.preprocessSvg = preprocessSvg;
 const jsdom_1 = require("jsdom");
 const parse_1 = require("../../utils/parse");
@@ -26,11 +29,36 @@ function calculateOpColor(fill, opacity, el) {
     const finalAlpha = +(a * opacity).toFixed(4);
     return `rgba(${r},${g},${b},${finalAlpha})`;
 }
+/**
+ * If a flattened path lost its initial moveto (e.g. picosvg dropped an empty
+ * `Mx y z` subpath), prepend `M` using the path's last coordinate pair.
+ * For closed icon shapes the endpoint equals the start point.
+ */
+function sanitizePathData(d) {
+    const trimmed = d.trim();
+    if (!trimmed || /^[Mm]/.test(trimmed)) {
+        return { d: trimmed, sanitized: false };
+    }
+    // Strip trailing close commands, then grab the last two numbers as x,y
+    const withoutClose = trimmed.replace(/[Zz]\s*$/, '');
+    const nums = withoutClose.match(/-?\d+(?:\.\d+)?/g);
+    if (!nums || nums.length < 2) {
+        return { d: trimmed, sanitized: false };
+    }
+    const x = nums[nums.length - 2];
+    const y = nums[nums.length - 1];
+    return { d: `M${x},${y} ${trimmed}`, sanitized: true };
+}
 const parsePath = (p) => {
     const d = p.getAttribute('d') ?? '';
     const op = p.getAttribute('opacity');
     const fillOp = p.getAttribute('fill-opacity');
     const fill = p.getAttribute('fill');
+    // picosvg may drop fill-rule but preserve clip-rule; treat either as evenodd
+    const fillRule = p.getAttribute('fill-rule') === 'evenodd' ||
+        p.getAttribute('clip-rule') === 'evenodd'
+        ? 'evenodd'
+        : undefined;
     if (op !== null || fillOp !== null) {
         const opVal = op !== null ? parseFloat(op) : 1;
         const fillOpVal = fillOp !== null ? parseFloat(fillOp) : 1;
@@ -38,15 +66,17 @@ const parsePath = (p) => {
         return {
             d,
             fill: calculateOpColor(fill, combinedOpacity, p),
+            fillRule,
         };
     }
     return {
         d,
         fill,
+        fillRule,
     };
 };
 exports.parsePath = parsePath;
-function parseFlattenedSvg(flattenedSvg) {
+function parseFlattenedSvg(flattenedSvg, options) {
     const dom = new jsdom_1.JSDOM(flattenedSvg);
     const doc = dom.window.document;
     const svgEl = doc.querySelector('svg');
@@ -58,7 +88,16 @@ function parseFlattenedSvg(flattenedSvg) {
         ? [viewBoxRaw[0], viewBoxRaw[1], viewBoxRaw[2], viewBoxRaw[3]]
         : [0, 0, 100, 100];
     const pathEls = Array.from(doc.querySelectorAll('path'));
-    const paths = pathEls.map(exports.parsePath).filter((p) => p.d.trim() !== '');
+    const paths = pathEls
+        .map(exports.parsePath)
+        .filter((p) => p.d.trim() !== '')
+        .map((p) => {
+        const { d, sanitized } = sanitizePathData(p.d);
+        if (sanitized) {
+            options?.onSanitize?.(p.d);
+        }
+        return { ...p, d };
+    });
     return { viewBox, paths };
 }
 function shouldSkipPath(d, fill) {
@@ -76,6 +115,43 @@ function validateSvg(content) {
     }
     return { valid: true };
 }
+/**
+ * Extract the original `d` strings of evenodd paths from the raw SVG
+ * BEFORE picosvg processes it. Picosvg's simplify (via our PathKit shim)
+ * can drop contours from multi-subpath evenodd paths, so we preserve
+ * the originals and apply our own winding conversion later.
+ *
+ * Returns one `d` string per evenodd path, in document order.
+ */
+function extractOriginalEvenoddDs(svgContent) {
+    if (!/<[^>]*fill-rule\s*=\s*["']evenodd/i.test(svgContent)) {
+        return [];
+    }
+    const dom = new jsdom_1.JSDOM(svgContent, { contentType: 'image/svg+xml' });
+    const doc = dom.window.document;
+    const results = [];
+    const pathEls = doc.querySelectorAll('path[fill-rule="evenodd"], path[clip-rule="evenodd"]');
+    for (const el of pathEls) {
+        const d = el.getAttribute('d');
+        if (d)
+            results.push(d);
+    }
+    return results;
+}
+/**
+ * Replace picosvg's (potentially damaged) evenodd path data with the
+ * preserved originals. Matches by position: the Nth evenodd path in
+ * the parsed output gets the Nth original `d` string.
+ */
+function restoreOriginalEvenoddDs(paths, originalDs) {
+    let oi = 0;
+    for (const p of paths) {
+        if (p.fillRule === 'evenodd' && oi < originalDs.length) {
+            p.d = originalDs[oi];
+            oi++;
+        }
+    }
+}
 // ensure the svg has a xmlns attribute
 function preprocessSvg(content) {
     if (/xmlns\s*=/.test(content))

package/lib/commonjs/src/core/svg/svg_pathops.d.ts

@@ -1,4 +1,15 @@
 import type { PathKitModule, WrappedPath, Point } from '../types.js';
+/**
+ * Convert a path `d` string with evenodd fill semantics to an equivalent
+ * path that renders identically under nonzero winding.
+ *
+ * Steps:
+ * 1. Parse via PathKit, set fill type to EVENODD, simplify (resolve topology)
+ * 2. Split into contours, compute containment depths
+ * 3. Fix winding: even depth = CCW (outer), odd depth = CW (hole)
+ * 4. Reconstruct d string
+ */
+export declare function convertEvenoddToWinding(PathKit: PathKitModule, d: string): string;
 export declare function buildPathopsBackend(PathKit: PathKitModule): {
     create_path(fillTypeInt: number): WrappedPath;
     clone_path(h: WrappedPath): WrappedPath;