react-native-nano-icons 0.1.8 → 0.2.1

package/src/core/svg/svg_pathops.ts

@@ -457,7 +457,6 @@ function bestStartMinYMinX(
   return best;
 }
 
-
 // ---------------------------------------------------------------------------
 // Containment helpers (module-level for reuse by fixPathWinding)
 // ---------------------------------------------------------------------------
@@ -510,7 +509,10 @@ function contourToPolyline(
       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]);
+        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;
@@ -527,8 +529,14 @@ function contourToPolyline(
         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,
+          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;
@@ -550,10 +558,7 @@ function pointInPolygon(px: number, py: number, poly: Point[]): boolean {
   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
-    ) {
+    if (yi > py !== yj > py && px < ((xj - xi) * (py - yi)) / (yj - yi) + xi) {
       inside = !inside;
     }
   }
@@ -563,7 +568,10 @@ function pointInPolygon(px: number, py: number, poly: Point[]): boolean {
 /**
  * Get a representative point on the contour boundary (midpoint of first segment).
  */
-function getContourSamplePoint(contourCmds: readonly Cmd[], V: VerbMap): Point | null {
+function getContourSamplePoint(
+  contourCmds: readonly Cmd[],
+  V: VerbMap
+): Point | null {
   let cx = 0,
     cy = 0;
   for (const cmd of contourCmds) {
@@ -584,8 +592,14 @@ function getContourSamplePoint(contourCmds: readonly Cmd[], V: VerbMap): Point |
       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]!,
+        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]!,
       ];
     }
   }
@@ -597,14 +611,20 @@ function getContourSamplePoint(contourCmds: readonly Cmd[], V: VerbMap): Point |
  * Even nesting depth = CCW (outer), odd = CW (hole).
  */
 function applyContainmentWinding(
-  contourObjs: Array<{ cmds: Cmd[]; explicitCloseWanted: boolean; absA: number }>,
+  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 samplePts = contourObjs.map((obj) =>
+    getContourSamplePoint(obj.cmds, V)
+  );
   const depths = new Array<number>(n).fill(0);
 
   for (let i = 0; i < n; i++) {
@@ -625,7 +645,11 @@ function applyContainmentWinding(
     const a = approxSignedAreaFromContourCmds(obj.cmds, V);
     const isCCW = a > 0;
     if (wantCCW !== isCCW) {
-      obj.cmds = reverseClosedContourKeepStart(obj.cmds, obj.explicitCloseWanted, V);
+      obj.cmds = reverseClosedContourKeepStart(
+        obj.cmds,
+        obj.explicitCloseWanted,
+        V
+      );
     }
   };
 
@@ -692,7 +716,9 @@ export function convertEvenoddToWinding(
     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]!)}`);
+      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]!)}`
@@ -882,17 +908,17 @@ export function buildPathopsBackend(PathKit: PathKitModule) {
 
       const cap =
         capInt === 1
-          ? Caps.ROUND ?? 1
+          ? (Caps.ROUND ?? 1)
           : capInt === 2
-          ? Caps.SQUARE ?? 2
-          : Caps.BUTT ?? 0;
+            ? (Caps.SQUARE ?? 2)
+            : (Caps.BUTT ?? 0);
 
       const join =
         joinInt === 1
-          ? Joins.ROUND ?? 1
+          ? (Joins.ROUND ?? 1)
           : joinInt === 2
-          ? Joins.BEVEL ?? 2
-          : Joins.MITER ?? 0;
+            ? (Joins.BEVEL ?? 2)
+            : (Joins.MITER ?? 0);
 
       const work = PathKit.NewPath(h.p);
 
@@ -961,10 +987,10 @@ export function buildPathopsBackend(PathKit: PathKitModule) {
         const Ops = PathKit.PathOp ?? {};
         const op =
           opInt === 1
-            ? Ops.INTERSECT ?? 1
+            ? (Ops.INTERSECT ?? 1)
             : opInt === 2
-            ? Ops.DIFFERENCE ?? 2
-            : Ops.UNION ?? 0;
+              ? (Ops.DIFFERENCE ?? 2)
+              : (Ops.UNION ?? 0);
 
         const out = PathKit.MakeFromOp(aHandle.p, bHandle.p, op);
         if (!out) return null;

package/src/core/types.ts

@@ -134,16 +134,24 @@ export type IconsMap = Record<string, GlyphEntry>;
  *   z - safe zone,
  *   s - start unicode,
  *   h - hash,
+ *   l - linking mode: 's' (static, bundled — default when absent) or 'd' (dynamic, OTA-delivered),
  * i - icons,
  *   adv - advance width,
  */
 export type NanoGlyphMap = {
-  m: { f: string; u: number; z: number; s: number; h?: string };
+  m: { f: string; u: number; z: number; s: number; h?: string; l?: 's' | 'd' };
   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 };
+  m: {
+    f: string;
+    u: number;
+    z: number;
+    s: number;
+    h?: string;
+    l?: 's' | 'd' | (string & {});
+  };
   i: Record<string, readonly unknown[]>;
 };

package/src/createNanoIconsSet.native.tsx

@@ -1,16 +1,23 @@
 import { memo, useMemo } from 'react';
-import { PixelRatio, UIManager, processColor } from 'react-native';
+import { PixelRatio, UIManager, View, processColor } from 'react-native';
 import type { NanoGlyphMapInput, GlyphEntry } from './core/types';
 import type { IconComponent, IconProps } from './types';
 import { shallowEqualColor } from './utils/shallowEqualColor';
+import {
+  DEFAULT_ICON_SIZE,
+  resolveGlyphEntry,
+  createLayerColorResolver,
+} from './utils/glyphRuntime';
 import NanoIconViewNative from './specs/NanoIconViewNativeComponent';
-import { createJSIconSet } from './createNanoIconsSet.shared';
+import {
+  createJSIconSet,
+  warnIfLinkingMismatch,
+} from './createNanoIconsSet.shared';
+import { loadDynamicFont, useDynamicFontPending } from './loadDynamicFont';
 
 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
@@ -27,27 +34,44 @@ function cachedProcessColor(color: string): number {
 
 export function createIconSet<GM extends NanoGlyphMapInput>(
   glyphMap: GM
+): IconComponent<GM>;
+export function createIconSet<GM extends NanoGlyphMapInput>(
+  glyphMap: GM,
+  font: unknown
+): IconComponent<GM>;
+export function createIconSet<GM extends NanoGlyphMapInput>(
+  glyphMap: GM,
+  font?: unknown
 ): IconComponent<GM> {
   if (!HAS_NATIVE_IMPL) {
-    return createJSIconSet(glyphMap);
+    return createJSIconSet(glyphMap, font);
   }
 
   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;
-  };
+  warnIfLinkingMismatch(fontFamilyBasename, glyphMap.m.l, font);
+
+  // dynamically linked font - register and hide icons until ready
+  const managed = glyphMap.m.l === 'd' && font != null;
+  if (managed) {
+    void loadDynamicFont(fontFamilyBasename, font).catch((err) => {
+      if (__DEV__)
+        console.warn(
+          `[react-native-nano-icons] Failed to load dynamic font "${fontFamilyBasename}".`,
+          err
+        );
+    });
+  }
 
   // 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[] {
+  function getCodepoints(
+    name: string,
+    layers: GlyphEntry[1]
+  ): readonly number[] {
     let cp = codepointsCache.get(name);
     if (!cp) {
       cp = layers.map(([c]) => c);
@@ -56,10 +80,15 @@ export function createIconSet<GM extends NanoGlyphMapInput>(
     return cp;
   }
 
-  function getDefaultColors(name: string, layers: GlyphEntry[1]): readonly number[] {
+  function getDefaultColors(
+    name: string,
+    layers: GlyphEntry[1]
+  ): readonly number[] {
     let colors = defaultColorsCache.get(name);
     if (!colors) {
-      colors = layers.map(([, srcColor]) => cachedProcessColor(srcColor ?? 'black'));
+      colors = layers.map(([, srcColor]) =>
+        cachedProcessColor(srcColor ?? 'black')
+      );
       defaultColorsCache.set(name, colors);
     }
     return colors;
@@ -75,14 +104,18 @@ export function createIconSet<GM extends NanoGlyphMapInput>(
       accessible,
       accessibilityLabel,
       accessibilityRole = 'image',
+      accessibilityElementsHidden,
+      importantForAccessibility,
       testID,
       ref,
     }: IconProps<keyof GM['i']>) => {
       const fontScale = allowFontScaling ? PixelRatio.getFontScale() : 1;
-      const [adv, layers] = resolveEntry(name);
+      const [adv, layers] = resolveGlyphEntry(glyphMap, name);
       const scaledSize = size * fontScale;
       const width = (adv / unitsPerEm) * scaledSize;
 
+      const pending = useDynamicFontPending(managed, fontFamilyBasename);
+
       const nameStr = name as string;
       const codepoints = getCodepoints(nameStr, layers);
 
@@ -91,15 +124,10 @@ export function createIconSet<GM extends NanoGlyphMapInput>(
         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);
-        });
+        const resolveColor = createLayerColorResolver(color);
+        return layers.map(([, srcColor], i) =>
+          cachedProcessColor(resolveColor(i, srcColor) as string)
+        );
       }, [nameStr, color]);
 
       const nativeStyle = useMemo(
@@ -107,6 +135,23 @@ export function createIconSet<GM extends NanoGlyphMapInput>(
         [scaledSize, width, style]
       );
 
+      // Hide-until-ready: while the dynamic font is registering, render a
+      // placeholder. The native view mounts only once the font is registered.
+      if (pending) {
+        return (
+          <View
+            ref={ref}
+            style={nativeStyle}
+            accessible={accessible}
+            accessibilityRole={accessibilityRole}
+            accessibilityLabel={accessibilityLabel ?? (name as string)}
+            accessibilityElementsHidden={accessibilityElementsHidden}
+            importantForAccessibility={importantForAccessibility}
+            testID={testID}
+          />
+        );
+      }
+
       return (
         <NanoIconViewNative
           ref={ref}
@@ -122,6 +167,8 @@ export function createIconSet<GM extends NanoGlyphMapInput>(
           accessible={accessible}
           accessibilityRole={accessibilityRole}
           accessibilityLabel={accessibilityLabel ?? (name as string)}
+          accessibilityElementsHidden={accessibilityElementsHidden}
+          importantForAccessibility={importantForAccessibility}
           testID={testID}
         />
       );
@@ -136,5 +183,10 @@ export function createIconSet<GM extends NanoGlyphMapInput>(
 
   Icon.displayName = `NanoIcon(${fontFamilyBasename})`;
 
-  return Icon;
+  const IconComp = Icon as unknown as IconComponent<GM>;
+  IconComp.loadFont = (override) =>
+    glyphMap.m.l === 'd'
+      ? loadDynamicFont(fontFamilyBasename, override ?? font, { force: true })
+      : Promise.resolve();
+  return IconComp;
 }

package/src/createNanoIconsSet.shared.tsx

@@ -1,13 +1,52 @@
 import { memo, useMemo } from 'react';
 import { PixelRatio, Platform, Text, View, type TextProps } from 'react-native';
-import type { NanoGlyphMapInput, GlyphEntry } from './core/types';
+import type { NanoGlyphMapInput } from './core/types';
 import type { IconComponent, IconProps } from './types';
 import { shallowEqualColor } from './utils/shallowEqualColor';
+import {
+  DEFAULT_ICON_SIZE,
+  resolveGlyphEntry,
+  createCharCache,
+  createLayerColorResolver,
+} from './utils/glyphRuntime';
+import { loadDynamicFont, useDynamicFontPending } from './loadDynamicFont';
 
 export type { IconComponent, IconProps };
 export { shallowEqualColor };
 
-const DEFAULT_ICON_SIZE = 12;
+/**
+ * Warn when the `font` argument and the glyphmap's linking mode are inconsistent.
+ *
+ * - Dynamic glyphmap without a `font` arg: caller probably forgot to pass it; icons
+ *   will render as tofu until the host app loads a font under family `fontFamily`.
+ * - Static glyphmap with a `font` arg: argument is ignored, font is bundled natively.
+ *
+ * Fires once per `createIconSet` call (not per render).
+ */
+export function warnIfLinkingMismatch(
+  fontFamily: string,
+  linking: string | undefined,
+  font: unknown
+): void {
+  if (!__DEV__) return;
+
+  const isDynamic = linking === 'd';
+  if (isDynamic && font == null) {
+    console.warn(
+      `[react-native-nano-icons] "${fontFamily}" is built with dynamic linking ` +
+        `but no font was passed to createIconSet. Icons will render as tofu ` +
+        `until a font is loaded and registered under family "${fontFamily}".`
+    );
+    return;
+  }
+  if (!isDynamic && font != null) {
+    console.warn(
+      `[react-native-nano-icons] "${fontFamily}" is built with static linking; ` +
+        `the font argument passed to createIconSet is ignored. ` +
+        `Set linking: 'dynamic' in your config to opt into OTA delivery.`
+    );
+  }
+}
 
 /**
  * JS implementation using <View> + <Text> layers.
@@ -15,8 +54,29 @@ const DEFAULT_ICON_SIZE = 12;
  */
 export function createJSIconSet<GM extends NanoGlyphMapInput>(
   glyphMap: GM
+): IconComponent<GM>;
+export function createJSIconSet<GM extends NanoGlyphMapInput>(
+  glyphMap: GM,
+  font: unknown
+): IconComponent<GM>;
+export function createJSIconSet<GM extends NanoGlyphMapInput>(
+  glyphMap: GM,
+  font?: unknown
 ): IconComponent<GM> {
   const fontBasename = glyphMap.m.f;
+  warnIfLinkingMismatch(fontBasename, glyphMap.m.l, font);
+
+  // dynamically linked font - register and hide icons until ready
+  const managed = glyphMap.m.l === 'd' && font != null;
+  if (managed) {
+    void loadDynamicFont(fontBasename, font).catch((err) => {
+      if (__DEV__)
+        console.warn(
+          `[react-native-nano-icons] Failed to load dynamic font "${fontBasename}".`,
+          err
+        );
+    });
+  }
 
   const fontReference = Platform.select({
     windows: `/Assets/${fontBasename}`,
@@ -33,23 +93,7 @@ export function createJSIconSet<GM extends NanoGlyphMapInput>(
   };
 
   const unitsPerEm = glyphMap.m.u;
-
-  const resolveEntry = (name: keyof GM['i']): GlyphEntry => {
-    return (glyphMap.i[name as string] ?? [
-      unitsPerEm,
-      [[63, 'black']],
-    ]) as GlyphEntry;
-  };
-
-  const codepointCache = new Map<number, string>();
-  const getChar = (codepoint: number): string => {
-    let ch = codepointCache.get(codepoint);
-    if (ch === undefined) {
-      ch = String.fromCodePoint(codepoint);
-      codepointCache.set(codepoint, ch);
-    }
-    return ch;
-  };
+  const getChar = createCharCache();
 
   const Icon = memo(
     ({
@@ -61,18 +105,19 @@ export function createJSIconSet<GM extends NanoGlyphMapInput>(
       accessible,
       accessibilityLabel,
       accessibilityRole = 'image',
+      accessibilityElementsHidden,
+      importantForAccessibility,
       testID,
       ref,
     }: IconProps<keyof GM['i']>) => {
       const fontScale = allowFontScaling ? PixelRatio.getFontScale() : 1;
-      const [adv, layers] = resolveEntry(name);
+      const [adv, layers] = resolveGlyphEntry(glyphMap, name);
       const scaledSize = size * fontScale;
       const width = (adv / unitsPerEm) * scaledSize;
 
-      const colorArray = Array.isArray(color) ? color : [color];
-      const lastPaletteColor = colorArray?.length
-        ? colorArray[colorArray.length - 1]
-        : undefined;
+      const pending = useDynamicFontPending(managed, fontBasename);
+
+      const resolveColor = createLayerColorResolver(color);
 
       const containerStyle = useMemo(
         () => [{ height: scaledSize, width, bottom: 0 as const }, style],
@@ -88,22 +133,25 @@ export function createJSIconSet<GM extends NanoGlyphMapInput>(
           accessible={accessible}
           accessibilityRole={accessibilityRole}
           accessibilityLabel={accessibilityLabel ?? (name as string)}
+          accessibilityElementsHidden={accessibilityElementsHidden}
+          importantForAccessibility={importantForAccessibility}
           testID={testID}>
-          {layers.map(([codepoint, srcColor], i) => {
-            const layerColor =
-              colorArray?.[i] ?? lastPaletteColor ?? srcColor ?? 'black';
-
-            return (
-              <Text
-                key={i}
-                selectable={false}
-                accessible={false}
-                allowFontScaling={allowFontScaling}
-                style={[styleOverrides, sizeStyle, { color: layerColor }]}>
-                {getChar(codepoint)}
-              </Text>
-            );
-          })}
+          {pending
+            ? null
+            : layers.map(([codepoint, srcColor], i) => {
+                const layerColor = resolveColor(i, srcColor);
+
+                return (
+                  <Text
+                    key={i}
+                    selectable={false}
+                    accessible={false}
+                    allowFontScaling={allowFontScaling}
+                    style={[styleOverrides, sizeStyle, { color: layerColor }]}>
+                    {getChar(codepoint)}
+                  </Text>
+                );
+              })}
         </View>
       );
     },
@@ -117,5 +165,10 @@ export function createJSIconSet<GM extends NanoGlyphMapInput>(
 
   Icon.displayName = `NanoIcon(${fontBasename})`;
 
-  return Icon;
+  const IconComp = Icon as unknown as IconComponent<GM>;
+  IconComp.loadFont = (override) =>
+    glyphMap.m.l === 'd'
+      ? loadDynamicFont(fontBasename, override ?? font, { force: true })
+      : Promise.resolve();
+  return IconComp;
 }

package/src/createNanoIconsSet.tsx

@@ -7,6 +7,14 @@ export { shallowEqualColor } from './utils/shallowEqualColor';
 
 export function createIconSet<GM extends NanoGlyphMapInput>(
   glyphMap: GM
+): IconComponent<GM>;
+export function createIconSet<GM extends NanoGlyphMapInput>(
+  glyphMap: GM,
+  font: unknown
+): IconComponent<GM>;
+export function createIconSet<GM extends NanoGlyphMapInput>(
+  glyphMap: GM,
+  font?: unknown
 ): IconComponent<GM> {
-  return createJSIconSet(glyphMap);
+  return createJSIconSet(glyphMap, font);
 }

package/src/createNanoIconsSet.web.tsx

@@ -0,0 +1,109 @@
+import { memo, useMemo, type CSSProperties } from 'react';
+import type { NanoGlyphMapInput } from './core/types';
+import type { IconComponent, IconProps } from './types';
+import { shallowEqualColor } from './utils/shallowEqualColor';
+import {
+  DEFAULT_ICON_SIZE,
+  resolveGlyphEntry,
+  createCharCache,
+  createLayerColorResolver,
+} from './utils/glyphRuntime';
+
+export type { IconComponent, IconProps };
+export { shallowEqualColor };
+
+// Web renderer: uses inline <span> elements so icons flow out of the box (display: inline-block keeps width/height)
+export function createIconSet<GM extends NanoGlyphMapInput>(
+  glyphMap: GM
+): IconComponent<GM> {
+  const fontBasename = glyphMap.m.f;
+  const unitsPerEm = glyphMap.m.u;
+  const getChar = createCharCache();
+
+  const Icon = memo(
+    ({
+      name,
+      size = DEFAULT_ICON_SIZE,
+      color,
+      style,
+      accessible,
+      accessibilityLabel,
+      accessibilityRole = 'image',
+      accessibilityElementsHidden,
+      testID,
+      ref,
+    }: IconProps<keyof GM['i']>) => {
+      const [adv, layers] = resolveGlyphEntry(glyphMap, name);
+      const width = (adv / unitsPerEm) * size;
+
+      const resolveColor = createLayerColorResolver(color);
+
+      const containerStyle = useMemo<CSSProperties>(
+        () => ({
+          display: 'inline-block',
+          position: 'relative',
+          width,
+          height: size,
+          lineHeight: 0,
+          verticalAlign: 'middle',
+          ...(style as CSSProperties | undefined),
+        }),
+        [size, width, style]
+      );
+
+      const layerBaseStyle = useMemo<CSSProperties>(
+        () => ({
+          position: 'absolute',
+          left: 0,
+          bottom: 0,
+          fontFamily: fontBasename,
+          fontWeight: 'normal',
+          fontStyle: 'normal',
+          fontSize: size,
+          lineHeight: 1,
+          whiteSpace: 'pre',
+        }),
+        [size]
+      );
+
+      const isHidden = accessible === false || accessibilityElementsHidden;
+      const role = accessibilityRole === 'image' ? 'img' : accessibilityRole;
+
+      return (
+        <span
+          ref={ref as React.Ref<HTMLSpanElement>}
+          style={containerStyle}
+          role={isHidden ? undefined : role}
+          aria-label={
+            isHidden ? undefined : (accessibilityLabel ?? (name as string))
+          }
+          aria-hidden={isHidden || undefined}
+          data-testid={testID}>
+          {layers.map(([codepoint, srcColor], i) => {
+            const layerColor = resolveColor(i, srcColor);
+            return (
+              <span
+                key={i}
+                aria-hidden
+                style={{ ...layerBaseStyle, color: layerColor as string }}>
+                {getChar(codepoint)}
+              </span>
+            );
+          })}
+        </span>
+      );
+    },
+    (prev, next) =>
+      prev.name === next.name &&
+      prev.size === next.size &&
+      prev.style === next.style &&
+      shallowEqualColor(prev.color, next.color)
+  );
+
+  Icon.displayName = `NanoIcon(${fontBasename})`;
+
+  // No-op on web: fonts come from CSS @font-face, nothing to load at runtime.
+  const IconComp = Icon as unknown as IconComponent<GM>;
+  IconComp.loadFont = () => Promise.resolve();
+  return IconComp;
+}