react-native-nano-icons 0.1.2 → 0.1.4

package/src/core/svg/svg_dom.ts

@@ -3,7 +3,7 @@ import { parseColor } from '../../utils/parse';
 
 export type ParsedFlatSvg = {
   viewBox: [number, number, number, number];
-  paths: Array<{ d: string; fill: string | null }>;
+  paths: Array<{ d: string; fill: string | null; fillRule?: 'evenodd' }>;
 };
 
 // if the fill is implicit, walk ancestors for the first explicit fill value
@@ -29,12 +29,43 @@ export function calculateOpColor(
   return `rgba(${r},${g},${b},${finalAlpha})`;
 }
 
-export const parsePath = (p: Element): { d: string; fill: string | null } => {
+/**
+ * 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 function sanitizePathData(d: string): { d: string; sanitized: boolean } {
+  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 };
+}
+
+export const parsePath = (
+  p: Element
+): { d: string; fill: string | null; fillRule?: 'evenodd' } => {
   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' as const)
+      : undefined;
 
   if (op !== null || fillOp !== null) {
     const opVal = op !== null ? parseFloat(op) : 1;
@@ -43,16 +74,21 @@ export const parsePath = (p: Element): { d: string; fill: string | null } => {
     return {
       d,
       fill: calculateOpColor(fill, combinedOpacity, p),
+      fillRule,
     };
   }
 
   return {
     d,
     fill,
+    fillRule,
   };
 };
 
-export function parseFlattenedSvg(flattenedSvg: string): ParsedFlatSvg {
+export function parseFlattenedSvg(
+  flattenedSvg: string,
+  options?: { onSanitize?: (original: string) => void }
+): ParsedFlatSvg {
   const dom = new JSDOM(flattenedSvg);
   const doc = dom.window.document;
 
@@ -69,7 +105,16 @@ export function parseFlattenedSvg(flattenedSvg: string): ParsedFlatSvg {
 
   const pathEls = Array.from(doc.querySelectorAll('path'));
 
-  const paths = pathEls.map(parsePath).filter((p) => p.d.trim() !== '');
+  const paths = pathEls
+    .map(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 };
 }
@@ -92,8 +137,55 @@ export function validateSvg(content: string): SvgValidation {
   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.
+ */
+export function extractOriginalEvenoddDs(svgContent: string): string[] {
+  if (!/<[^>]*fill-rule\s*=\s*["']evenodd/i.test(svgContent)) {
+    return [];
+  }
+
+  const dom = new JSDOM(svgContent, { contentType: 'image/svg+xml' });
+  const doc = dom.window.document;
+  const results: string[] = [];
+
+  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.
+ */
+export function restoreOriginalEvenoddDs(
+  paths: ParsedFlatSvg['paths'],
+  originalDs: string[]
+): void {
+  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
 export function preprocessSvg(content: string): string {
   if (/xmlns\s*=/.test(content)) return content;
   return content.replace(/<svg\b/, '<svg xmlns="http://www.w3.org/2000/svg"');
 }
+
+

package/src/core/svg/svg_pathops.ts

@@ -457,9 +457,13 @@ function bestStartMinYMinX(
   return best;
 }
 
-// proxy to for picosvg to interatc with pathkit
-export function buildPathopsBackend(PathKit: PathKitModule) {
-  const VERB: VerbMap = {
+
+// ---------------------------------------------------------------------------
+// Containment helpers (module-level for reuse by fixPathWinding)
+// ---------------------------------------------------------------------------
+
+function buildVerbMap(PathKit: PathKitModule): VerbMap {
+  return {
     MOVE: PathKit.MOVE_VERB ?? 0,
     LINE: PathKit.LINE_VERB ?? 1,
     QUAD: PathKit.QUAD_VERB ?? 2,
@@ -467,6 +471,241 @@ export function buildPathopsBackend(PathKit: PathKitModule) {
     CUBIC: PathKit.CUBIC_VERB ?? 4,
     CLOSE: PathKit.CLOSE_VERB ?? 5,
   };
+}
+
+/**
+ * Convert contour commands to a polyline by sampling curves.
+ * Used for ray-casting containment tests.
+ */
+function contourToPolyline(
+  contourCmds: readonly Cmd[],
+  V: VerbMap,
+  steps = 8
+): Point[] {
+  let cx = 0,
+    cy = 0;
+  let sx = 0,
+    sy = 0;
+  const pts: Point[] = [];
+
+  for (const cmd of contourCmds) {
+    const v = cmd[0]!;
+    if (v === V.MOVE) {
+      cx = cmd[1]!;
+      cy = cmd[2]!;
+      sx = cx;
+      sy = cy;
+      pts.push([cx, cy]);
+    } else if (v === V.LINE) {
+      cx = cmd[1]!;
+      cy = cmd[2]!;
+      pts.push([cx, cy]);
+    } else if (v === V.QUAD) {
+      const x0 = cx,
+        y0 = cy;
+      const x1 = cmd[1]!,
+        y1 = cmd[2]!;
+      const x2 = cmd[3]!,
+        y2 = cmd[4]!;
+      for (let i = 1; i <= steps; i++) {
+        const t = i / steps;
+        const mt = 1 - t;
+        pts.push([mt * mt * x0 + 2 * mt * t * x1 + t * t * x2, mt * mt * y0 + 2 * mt * t * y1 + t * t * y2]);
+      }
+      cx = x2;
+      cy = y2;
+    } else if (v === V.CUBIC) {
+      const x0 = cx,
+        y0 = cy;
+      const x1 = cmd[1]!,
+        y1 = cmd[2]!;
+      const x2 = cmd[3]!,
+        y2 = cmd[4]!;
+      const x3 = cmd[5]!,
+        y3 = cmd[6]!;
+      for (let i = 1; i <= steps; i++) {
+        const t = i / steps;
+        const mt = 1 - t;
+        pts.push([
+          mt * mt * mt * x0 + 3 * mt * mt * t * x1 + 3 * mt * t * t * x2 + t * t * t * x3,
+          mt * mt * mt * y0 + 3 * mt * mt * t * y1 + 3 * mt * t * t * y2 + t * t * t * y3,
+        ]);
+      }
+      cx = x3;
+      cy = y3;
+    } else if (v === V.CLOSE) {
+      if (cx !== sx || cy !== sy) pts.push([sx, sy]);
+      cx = sx;
+      cy = sy;
+    }
+  }
+  return pts;
+}
+
+/**
+ * Ray-casting point-in-polygon test.
+ */
+function pointInPolygon(px: number, py: number, poly: Point[]): boolean {
+  let inside = false;
+  for (let i = 0, j = poly.length - 1; i < poly.length; j = i++) {
+    const [xi, yi] = poly[i]!;
+    const [xj, yj] = poly[j]!;
+    if (
+      yi > py !== yj > py &&
+      px < ((xj - xi) * (py - yi)) / (yj - yi) + xi
+    ) {
+      inside = !inside;
+    }
+  }
+  return inside;
+}
+
+/**
+ * Get a representative point on the contour boundary (midpoint of first segment).
+ */
+function getContourSamplePoint(contourCmds: readonly Cmd[], V: VerbMap): Point | null {
+  let cx = 0,
+    cy = 0;
+  for (const cmd of contourCmds) {
+    const v = cmd[0]!;
+    if (v === V.MOVE) {
+      cx = cmd[1]!;
+      cy = cmd[2]!;
+    } else if (v === V.LINE) {
+      return [(cx + cmd[1]!) / 2, (cy + cmd[2]!) / 2];
+    } else if (v === V.QUAD) {
+      const t = 0.5,
+        mt = 0.5;
+      return [
+        mt * mt * cx + 2 * mt * t * cmd[1]! + t * t * cmd[3]!,
+        mt * mt * cy + 2 * mt * t * cmd[2]! + t * t * cmd[4]!,
+      ];
+    } else if (v === V.CUBIC) {
+      const t = 0.5,
+        mt = 0.5;
+      return [
+        mt ** 3 * cx + 3 * mt ** 2 * t * cmd[1]! + 3 * mt * t ** 2 * cmd[3]! + t ** 3 * cmd[5]!,
+        mt ** 3 * cy + 3 * mt ** 2 * t * cmd[2]! + 3 * mt * t ** 2 * cmd[4]! + t ** 3 * cmd[6]!,
+      ];
+    }
+  }
+  return null;
+}
+
+/**
+ * Apply containment-based winding fix to contour objects.
+ * Even nesting depth = CCW (outer), odd = CW (hole).
+ */
+function applyContainmentWinding(
+  contourObjs: Array<{ cmds: Cmd[]; explicitCloseWanted: boolean; absA: number }>,
+  V: VerbMap
+): void {
+  const n = contourObjs.length;
+  if (n === 0) return;
+
+  const polylines = contourObjs.map((obj) => contourToPolyline(obj.cmds, V));
+  const samplePts = contourObjs.map((obj) => getContourSamplePoint(obj.cmds, V));
+  const depths = new Array<number>(n).fill(0);
+
+  for (let i = 0; i < n; i++) {
+    const pt = samplePts[i];
+    if (!pt) continue;
+    for (let j = 0; j < n; j++) {
+      if (i === j) continue;
+      if (pointInPolygon(pt[0], pt[1], polylines[j]!)) {
+        depths[i] = (depths[i] ?? 0) + 1;
+      }
+    }
+  }
+
+  const ensureOrient = (
+    obj: { cmds: Cmd[]; explicitCloseWanted: boolean },
+    wantCCW: boolean
+  ) => {
+    const a = approxSignedAreaFromContourCmds(obj.cmds, V);
+    const isCCW = a > 0;
+    if (wantCCW !== isCCW) {
+      obj.cmds = reverseClosedContourKeepStart(obj.cmds, obj.explicitCloseWanted, V);
+    }
+  };
+
+  for (let i = 0; i < n; i++) {
+    ensureOrient(contourObjs[i]!, depths[i]! % 2 === 0);
+  }
+}
+
+/**
+ * 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 function convertEvenoddToWinding(
+  PathKit: PathKitModule,
+  d: string
+): string {
+  const V = buildVerbMap(PathKit);
+
+  // 1. Parse and simplify with EVENODD fill type
+  const p = PathKit.FromSVGString(d);
+  if (!p) return d;
+
+  const FILL_EVENODD =
+    PathKit?.FillType?.EVENODD ?? PathKit?.FillType?.EVEN_ODD ?? 1;
+  p.setFillType(FILL_EVENODD);
+  p.simplify();
+
+  // Get the simplified SVG string and re-parse for command access
+  const simplified = p.toSVGString();
+  p.delete?.();
+
+  const p2 = PathKit.FromSVGString(simplified);
+  if (!p2) return simplified;
+
+  const cmds: Cmd[] = p2.toCmds();
+  p2.delete?.();
+
+  if (cmds.length === 0) return simplified;
+
+  // 2. Split into contours
+  const contourObjs = splitContours(cmds, V).map((c) => {
+    const explicitCloseWanted = explicitCloseWantedFromCmds(c, V);
+    const cc = ensureClosed(c, V);
+    const a = approxSignedAreaFromContourCmds(cc, V);
+    return { cmds: cc, absA: Math.abs(a), explicitCloseWanted };
+  });
+
+  contourObjs.sort((x, y) => y.absA - x.absA);
+
+  // 3. Fix winding via containment analysis
+  applyContainmentWinding(contourObjs, V);
+
+  // 4. Reconstruct d string from fixed commands
+  const allCmds = contourObjs.flatMap((x) => x.cmds);
+  const parts: string[] = [];
+  for (const cmd of allCmds) {
+    const v = cmd[0]!;
+    if (v === V.MOVE) parts.push(`M${roundN(cmd[1]!)} ${roundN(cmd[2]!)}`);
+    else if (v === V.LINE) parts.push(`L${roundN(cmd[1]!)} ${roundN(cmd[2]!)}`);
+    else if (v === V.QUAD)
+      parts.push(`Q${roundN(cmd[1]!)} ${roundN(cmd[2]!)} ${roundN(cmd[3]!)} ${roundN(cmd[4]!)}`);
+    else if (v === V.CUBIC)
+      parts.push(
+        `C${roundN(cmd[1]!)} ${roundN(cmd[2]!)} ${roundN(cmd[3]!)} ${roundN(cmd[4]!)} ${roundN(cmd[5]!)} ${roundN(cmd[6]!)}`
+      );
+    else if (v === V.CLOSE) parts.push('Z');
+  }
+
+  return parts.join(' ');
+}
+
+// proxy to for picosvg to interatc with pathkit
+export function buildPathopsBackend(PathKit: PathKitModule) {
+  const VERB: VerbMap = buildVerbMap(PathKit);
 
   const FILL_EVENODD =
     PathKit?.FillType?.EVENODD ?? PathKit?.FillType?.EVEN_ODD ?? 1;
@@ -500,30 +739,9 @@ export function buildPathopsBackend(PathKit: PathKitModule) {
     // Big-to-small ordering gives deterministic outer→inner ordering.
     contourObjs.sort((x, y) => y.absA - x.absA);
 
-    // Enforce winding convention:
-    // - largest contour CCW (positive area)
-    // - all subsequent contours CW (negative area)
-    const ensureOrient = (
-      obj: { cmds: Cmd[]; explicitCloseWanted: boolean },
-      wantCCW: boolean
-    ) => {
-      const a = approxSignedAreaFromContourCmds(obj.cmds, VERB);
-      const isCCW = a > 0;
-      if (wantCCW !== isCCW) {
-        obj.cmds = reverseClosedContourKeepStart(
-          obj.cmds,
-          obj.explicitCloseWanted,
-          VERB
-        );
-      }
-    };
-
-    if (contourObjs.length) {
-      ensureOrient(contourObjs[0]!, true);
-      for (let i = 1; i < contourObjs.length; i++) {
-        ensureOrient(contourObjs[i]!, false);
-      }
-    }
+    // Containment-based winding: compute nesting depth per contour via
+    // ray-casting point-in-polygon. Even depth = outer (CCW), odd = hole (CW).
+    applyContainmentWinding(contourObjs, VERB);
 
     // Rotate starts deterministically:
     // 1) If we have recorded MOVE points, try to rotate contour to a move point that lies on it.

package/src/core/types.ts

@@ -123,16 +123,27 @@ export type PyodideModule = {
   };
 };
 
-export type GlyphLayer = { codepoint: number; color: string };
-export type GlyphEntry = { adv: number; layers: GlyphLayer[] };
+export type GlyphLayer = [codepoint: number, color: string];
+export type GlyphEntry = [adv: number, layers: GlyphLayer[]];
 export type IconsMap = Record<string, GlyphEntry>;
+
+/**
+ * m - metadata,
+ *   f - font family,
+ *   u - units per em,
+ *   z - safe zone,
+ *   s - start unicode,
+ *   h - hash,
+ * i - icons,
+ *   adv - advance width,
+ */
 export type NanoGlyphMap = {
-  meta: {
-    fontFamily: string;
-    upm: number;
-    safeZone: number;
-    startUnicode: number;
-    hash?: string;
-  };
-  icons: IconsMap;
+  m: { f: string; u: number; z: number; s: number; h?: string };
+  i: IconsMap;
+};
+
+/** Accepts JSON-inferred types where arrays aren't tuples. */
+export type NanoGlyphMapInput = {
+  m: { f: string; u: number; z: number; s: number; h?: string };
+  i: Record<string, readonly unknown[]>;
 };

package/src/createNanoIconsSet.native.tsx

@@ -0,0 +1,140 @@
+import { memo, useMemo } from 'react';
+import { PixelRatio, UIManager, processColor } from 'react-native';
+import type { NanoGlyphMapInput, GlyphEntry } from './core/types';
+import type { IconComponent, IconProps } from './types';
+import { shallowEqualColor } from './utils/shallowEqualColor';
+import NanoIconViewNative from './specs/NanoIconViewNativeComponent';
+import { createJSIconSet } from './createNanoIconsSet.shared';
+
+export type { IconComponent, IconProps };
+export { shallowEqualColor };
+
+const DEFAULT_ICON_SIZE = 12;
+
+const HAS_NATIVE_IMPL = UIManager.hasViewManagerConfig('NanoIconView');
+
+// Shared processColor cache — avoids redundant color parsing for repeated
+// color strings like "black", "rgba(0,0,0,0.3)" across thousands of icons
+const processedColorCache = new Map<string, number>();
+function cachedProcessColor(color: string): number {
+  let result = processedColorCache.get(color);
+  if (result === undefined) {
+    result = (processColor(color) ?? 0xff000000) as number;
+    processedColorCache.set(color, result);
+  }
+  return result;
+}
+
+export function createIconSet<GM extends NanoGlyphMapInput>(
+  glyphMap: GM
+): IconComponent<GM> {
+  if (!HAS_NATIVE_IMPL) {
+    return createJSIconSet(glyphMap);
+  }
+
+  const fontFamilyBasename = glyphMap.m.f;
+  const unitsPerEm = glyphMap.m.u;
+
+  const resolveEntry = (name: keyof GM['i']): GlyphEntry => {
+    return (glyphMap.i[name as string] ?? [
+      unitsPerEm,
+      [[63, 'black']],
+    ]) as GlyphEntry;
+  };
+
+  // Pre-compute per-icon static data (codepoints, default colors) once at set creation
+  // Avoids layers.map() + processColor per icon mount
+  const codepointsCache = new Map<string, readonly number[]>();
+  const defaultColorsCache = new Map<string, readonly number[]>();
+
+  function getCodepoints(name: string, layers: GlyphEntry[1]): readonly number[] {
+    let cp = codepointsCache.get(name);
+    if (!cp) {
+      cp = layers.map(([c]) => c);
+      codepointsCache.set(name, cp);
+    }
+    return cp;
+  }
+
+  function getDefaultColors(name: string, layers: GlyphEntry[1]): readonly number[] {
+    let colors = defaultColorsCache.get(name);
+    if (!colors) {
+      colors = layers.map(([, srcColor]) => cachedProcessColor(srcColor ?? 'black'));
+      defaultColorsCache.set(name, colors);
+    }
+    return colors;
+  }
+
+  const Icon = memo(
+    ({
+      name,
+      size = DEFAULT_ICON_SIZE,
+      color,
+      style,
+      allowFontScaling = true,
+      accessible,
+      accessibilityLabel,
+      accessibilityRole = 'image',
+      testID,
+      ref,
+    }: IconProps<keyof GM['i']>) => {
+      const fontScale = allowFontScaling ? PixelRatio.getFontScale() : 1;
+      const [adv, layers] = resolveEntry(name);
+      const scaledSize = size * fontScale;
+      const width = (adv / unitsPerEm) * scaledSize;
+
+      const nameStr = name as string;
+      const codepoints = getCodepoints(nameStr, layers);
+
+      const processedColors = useMemo(() => {
+        // Fast path: no custom color — use pre-computed defaults
+        if (color === undefined || color === null) {
+          return getDefaultColors(nameStr, layers);
+        }
+        const colorArray = Array.isArray(color) ? color : [color];
+        const lastPaletteColor = colorArray.length
+          ? colorArray[colorArray.length - 1]
+          : undefined;
+        return layers.map(([, srcColor], i) => {
+          const layerColor =
+            colorArray[i] ?? lastPaletteColor ?? srcColor ?? 'black';
+          return cachedProcessColor(layerColor as string);
+        });
+      }, [nameStr, color]);
+
+      const nativeStyle = useMemo(
+        () => [{ width, height: scaledSize }, style],
+        [scaledSize, width, style]
+      );
+
+      return (
+        <NanoIconViewNative
+          ref={ref}
+          fontFamily={fontFamilyBasename}
+          codepoints={codepoints}
+          colors={processedColors}
+          fontSize={size}
+          advanceWidth={adv}
+          unitsPerEm={unitsPerEm}
+          iconWidth={width}
+          iconHeight={scaledSize}
+          style={nativeStyle}
+          accessible={accessible}
+          accessibilityRole={accessibilityRole}
+          accessibilityLabel={accessibilityLabel ?? (name as string)}
+          testID={testID}
+        />
+      );
+    },
+    (prev, next) =>
+      prev.name === next.name &&
+      prev.size === next.size &&
+      prev.allowFontScaling === next.allowFontScaling &&
+      prev.style === next.style &&
+      shallowEqualColor(prev.color, next.color)
+  );
+
+  Icon.displayName = `NanoIcon(${fontFamilyBasename})`;
+
+  return Icon;
+}