react-native-nano-icons 0.1.7 → 0.2.0

package/README.md

@@ -1,9 +1,9 @@
 <div align="center">
 
 <picture>
-  <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/software-mansion-labs/react-native-nano-icons/main/https://raw.githubusercontent.com/software-mansion-labs/react-native-nano-icons/main/packages/react-native-nano-icons/docs/img/logo-nanoicons-inverted.svg">
-  <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/software-mansion-labs/react-native-nano-icons/main/https://raw.githubusercontent.com/software-mansion-labs/react-native-nano-icons/main/packages/react-native-nano-icons/docs/img/logo-nanoicons-default.svg">
-  <img alt="Nano Icons" src="https://raw.githubusercontent.com/software-mansion-labs/react-native-nano-icons/main/https://raw.githubusercontent.com/software-mansion-labs/react-native-nano-icons/main/packages/react-native-nano-icons/docs/img/logo-nanoicons-default.svg">
+  <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/software-mansion-labs/react-native-nano-icons/main/packages/react-native-nano-icons/docs/img/logo-nanoicons-inverted.svg">
+  <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/software-mansion-labs/react-native-nano-icons/main/packages/react-native-nano-icons/docs/img/logo-nanoicons-default.svg">
+  <img alt="Nano Icons" src="https://raw.githubusercontent.com/software-mansion-labs/react-native-nano-icons/main/packages/react-native-nano-icons/docs/img/logo-nanoicons-default.svg">
 </picture>
 
 </div>
@@ -28,9 +28,9 @@ Drop your SVGs in a folder. Use them as a fully typed component by name.
 That’s it 🔬⚡️
 
 <picture>
-  <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/software-mansion-labs/react-native-nano-icons/main/https://raw.githubusercontent.com/software-mansion-labs/react-native-nano-icons/main/packages/react-native-nano-icons/docs/img/nano-icons-platforms-inverted.png">
-  <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/software-mansion-labs/react-native-nano-icons/main/https://raw.githubusercontent.com/software-mansion-labs/react-native-nano-icons/main/packages/react-native-nano-icons/docs/img/nano-icons-platforms-light.png">
-  <img alt="Nano Icons Platforms Showcase" src="https://raw.githubusercontent.com/software-mansion-labs/react-native-nano-icons/main/https://raw.githubusercontent.com/software-mansion-labs/react-native-nano-icons/main/packages/react-native-nano-icons/docs/img/nano-icons-platforms-light.png">
+  <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/software-mansion-labs/react-native-nano-icons/main/packages/react-native-nano-icons/docs/img/nano-icons-platforms-inverted.png">
+  <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/software-mansion-labs/react-native-nano-icons/main/packages/react-native-nano-icons/docs/img/nano-icons-platforms-light.png">
+  <img alt="Nano Icons Platforms Showcase" src="https://raw.githubusercontent.com/software-mansion-labs/react-native-nano-icons/main/packages/react-native-nano-icons/docs/img/nano-icons-platforms-light.png">
 </picture>
 
 ---
@@ -42,8 +42,9 @@ That’s it 🔬⚡️
 - [🎨 Multicolor Icons](#-multicolor-icons)
 - [📊 Performance](#-performance)
 - [⚠️ Known Limitations](#%EF%B8%8F-known-limitations)
-- [🔧 Font Generation Pipeline](#-how-it-works)
+- [🔧 Font Generation Pipeline](#-font-generation-pipeline)
 - [🤝 Contributing](#-contributing)
+- [License](#license)
 
 ---
 
@@ -54,6 +55,7 @@ That’s it 🔬⚡️
 - [x] Android API 24+
 - [x] Web
 - [x] Expo Go
+- [x] tvOS 15.1+
 
 ---
 
@@ -118,6 +120,7 @@ The plugin accepts an object with an `iconSets` array, allowing you to generate
 | `outputDir`    | `string` | No       | `../nanoicons` | Path where the `.ttf` and `.json` artifacts will be saved. Defaults to a sibling `nanoicons` folder relative to the input. |
 | `upm`          | `number` | No       | `1024`         | Units Per Em. Defines the resolution of the font grid.                                                                     |
 | `startUnicode` | `string` | No       | `0xe900`       | The starting Hex Unicode point for the first icon glyph.                                                                   |
+| `linking`      | `'static' \| 'dynamic'` | No | `'static'` | Delivery mode for the generated TTF. `'static'` bundles it into the native app. `'dynamic'` excludes it from native linking so the host app can deliver it at runtime (i.e. via OTA update). See [Dynamic linking](#dynamic-linking-expo-ota-updates-support). |
 
   <details>
   <summary>Default Dir Path Behavior</summary>
@@ -203,10 +206,68 @@ export default function App() {
 | `testID`             | `string`                     | —                 | Test identifier for e2e testing frameworks.                                                                                                  |
 | `ref`                | `Ref<View>`                  | —                 | Ref to the underlying native view.                                                                                                           |
 
+### Dynamic linking (Expo OTA updates support)
+TL;DR the default static linking is best for most use cases as it does not affect JS bundle size at all, but if you have an [OTA updates workflow](https://expo.dev/solutions/eas-ota-updates) and make changes to your icons frequently, you can opt out of native bundling and register a particular iconSet font at runtime explicitly.
+
+By default, generated TTFs are bundled into the native app at build/link time. Set `linking: 'dynamic'` to opt out: the build still produces the `.ttf` and `.glyphmap.json`, but then OTA workflows will ship icon outside the native binary - you deliver the file and the library will register it at runtime. 
+
+**Config**
+
+```JSON
+{
+  "iconSets": [
+    {
+      "inputDir": "./assets/icons/dynamic-ota-icons",
+      "linking": "dynamic"
+    }
+  ]
+}
+```
+
+> [!NOTE]
+> You can mix both linking modes in the same config — some icon sets can be statically bundled and others delivered dynamically. Each entry in `iconSets` is independent.
+
+**Runtime**
+
+Pass the font as the second argument to `createNanoIconSet`. The library registers it under the family name at runtime.
+
+```TypeScript
+import { createNanoIconSet } from "react-native-nano-icons";
+import glyphMap from "./dynamic-ota-icons.glyphmap.json";
+
+export const Icon = createNanoIconSet(glyphMap, require("./dynamic-ota-icons.ttf"));
+// or: createNanoIconSet(glyphMap, { uri: "https://cdn.example.com/remote-nano-icons.ttf" })
+```
+
+> [!NOTE]
+> In [Expo Go](https://expo.dev/go), the native font loader is unavailable, but you can still see real icons by loading the font manually via [`expo-font`](https://docs.expo.dev/versions/latest/sdk/font/) — use the value of `glyphMap.m.f` as the family name key. [Once you move to a development build](https://docs.expo.dev/develop/development-builds/expo-go-to-dev-build/), the library registers the font automatically and you can remove the `expo-font` setup.
+
+> If a dynamic glyphmap gets no font, icons render as tofu until one is registered (with a dev warning).
+
 ### 5. Font Regeneration
 
 **The build script detects changes in path and contents of the SVGs** in your input directory based on a fingerprint hash. If anything changes (file names, SVG attributes/nodes) or the output font/glyphmap files are deleted, the icon set is regenerated during `prebuild` or manual script run.
 
+### Regenerating dynamic fonts only (useful for an OTA update) ☁️
+
+When your `dynamic` icons change and you want to ship them via OTA update, you don't need to run a full `expo prebuild` and native rebuild. Use `--dynamic` to regenerate only the dynamic sets:
+
+```sh
+# run from your app root
+npx react-native-nano-icons --path path/to/.nanoicons.json --dynamic
+```
+
+
+> [!TIP]
+> Using Expo CNG with the app config and expo plugin instead of `.nanoicons.json` ? Just add `--app-config` flag to use your plugin input setup instead: 
+> ```sh
+> # run from your app root
+> npx react-native-nano-icons --dynamic --app-config
+> ```
+> This reads your config directly from `app.json` / `app.config.js` / `app.config.ts` (no separate `.nanoicons.json` needed).
+
+The CLI rebuilds only the sets defined with `linking: "dynamic"`, and skips all native linking. Commit the updated `.ttf` and `.glyphmap.json` and push your OTA update as usual ☁️ 🚀
+
 ---
 
 ## 🎨 Multicolor Icons
@@ -228,7 +289,7 @@ This makes the library well-suited for multicolor icons like country flags, bran
 ```
 
 <div align="center">
-  <img alt="Multicolor icon example showing per-layer color overrides" src="https://raw.githubusercontent.com/software-mansion-labs/react-native-nano-icons/main/https://raw.githubusercontent.com/software-mansion-labs/react-native-nano-icons/main/packages/react-native-nano-icons/docs/img/nano-icon-color-showcase.png" height="250">
+  <img alt="Multicolor icon example showing per-layer color overrides" src="https://raw.githubusercontent.com/software-mansion-labs/react-native-nano-icons/main/packages/react-native-nano-icons/docs/img/nano-icon-color-showcase.png" height="250">
 </div>
 <br>
 
@@ -264,7 +325,7 @@ We measured the average time to render a screen with identical set of 1,000 diff
 > These libraries serve different primary purposes. `expo-image` is the go-to image library for photos and remote assets. `@expo/vector-icons` ships with many popular icon sets built in. `react-native-svg` handles the full SVG specification with fine-grained attribute control. We compare them here specifically on the use case of rendering many small, static icons.
 
 <div align="center">
-  <img alt="Performance benchmark: time to render 1k icons" src="https://raw.githubusercontent.com/software-mansion-labs/react-native-nano-icons/main/https://raw.githubusercontent.com/software-mansion-labs/react-native-nano-icons/main/packages/react-native-nano-icons/docs/img/nano-icons-benchmarks.png" width="900">
+  <img alt="Performance benchmark: time to render 1k icons" src="https://raw.githubusercontent.com/software-mansion-labs/react-native-nano-icons/main/packages/react-native-nano-icons/docs/img/nano-icons-benchmarks.png" width="900">
 </div>
 <br>
 
@@ -278,6 +339,7 @@ The chart shows time in milliseconds across three phases: **JS Thread** (JavaScr
 ## ⚠️ Known Limitations
 
 - SVG `<filter>` and `<mask>` elements are not supported — font glyphs cannot represent these effects.
+- Embedded raster images (`<image>` elements, e.g. base64-encoded bitmaps inside an SVG) are not supported — only vector geometry can be converted to glyphs.
 - Only `*.svg` input files are supported.
 
 ---
@@ -285,9 +347,9 @@ The chart shows time in milliseconds across three phases: **JS Thread** (JavaScr
 ## 🔧 Font Generation Pipeline
 
 <picture>
-  <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/software-mansion-labs/react-native-nano-icons/main/https://raw.githubusercontent.com/software-mansion-labs/react-native-nano-icons/main/packages/react-native-nano-icons/docs/img/nano-icons-graph-inverted.png">
-  <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/software-mansion-labs/react-native-nano-icons/main/https://raw.githubusercontent.com/software-mansion-labs/react-native-nano-icons/main/packages/react-native-nano-icons/docs/img/nano-icons-graph-light.png">
-  <img alt="Nano Icons Pipeline" src="https://raw.githubusercontent.com/software-mansion-labs/react-native-nano-icons/main/https://raw.githubusercontent.com/software-mansion-labs/react-native-nano-icons/main/packages/react-native-nano-icons/docs/img/nano-icons-graph-light.png">
+  <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/software-mansion-labs/react-native-nano-icons/main/packages/react-native-nano-icons/docs/img/nano-icons-graph-inverted.png">
+  <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/software-mansion-labs/react-native-nano-icons/main/packages/react-native-nano-icons/docs/img/nano-icons-graph-light.png">
+  <img alt="Nano Icons Pipeline" src="https://raw.githubusercontent.com/software-mansion-labs/react-native-nano-icons/main/packages/react-native-nano-icons/docs/img/nano-icons-graph-light.png">
 </picture>
 
 At build time, the pipeline processes your SVG directory through four stages:
@@ -298,7 +360,7 @@ At build time, the pipeline processes your SVG directory through four stages:
 4. **Font compilation** — Layers are compiled into a standard `.ttf` font file, with each layer mapped to a private-use Unicode codepoint.
 5. **Glyphmap generation** — A compact `.glyphmap.json` is created, mapping icon names to their codepoints, default colors, and metrics.
 
-At runtime, the native component stacks glyph layers at the same position — one `drawGlyphs` call per layer via [CoreText](https://developer.apple.com/documentation/coretext/) (iOS) or `drawText` via [Canvas](<https://developer.android.com/reference/android/graphics/Canvas#drawText(java.lang.String,%20float,%20float,%20android.graphics.Paint)>) (Android). On web and Expo Go, a pure `react-native` fallback uses stacked `<Text>` elements.
+At runtime, the native component stacks glyph layers at the same position — one `drawGlyphs` call per layer via [CoreText](https://developer.apple.com/documentation/coretext/) (iOS) or `drawText` via [Canvas](<https://developer.android.com/reference/android/graphics/Canvas#drawText(java.lang.String,%20float,%20float,%20android.graphics.Paint)>) (Android). On the web, icons render as stacked inline `<span>` elements. In Expo Go, a pure `react-native` fallback uses stacked `<Text>` elements.
 
 ---
 

package/android/src/main/java/com/nanoicons/NanoIconsFontLoaderModule.kt

@@ -0,0 +1,58 @@
+package com.nanoicons
+
+import android.graphics.Typeface
+import android.net.Uri
+import com.facebook.react.bridge.Promise
+import com.facebook.react.bridge.ReactApplicationContext
+import com.facebook.react.common.assets.ReactFontManager
+import java.io.File
+import java.io.InputStream
+import java.net.URL
+
+/**
+ * Registers a dynamically-linked (OTA) font at runtime so the NanoIconView can
+ * resolve it by family name via ReactFontManager — the same registry RN fonts use.
+ *
+ * Reads the bytes at `uri` (file:// / http(s):// / content:// / plain path),
+ * writes them to a cache file, builds a Typeface, and registers it under `family`.
+ * Caching/versioning of remote fonts is intentionally out of scope.
+ */
+class NanoIconsFontLoaderModule(reactContext: ReactApplicationContext) :
+  NativeNanoIconsFontLoaderSpec(reactContext) {
+
+  override fun getName(): String = NAME
+
+  override fun registerFont(family: String, uri: String, promise: Promise) {
+    try {
+      val cacheFile = File.createTempFile("nanoicon_", ".ttf", reactApplicationContext.cacheDir)
+      openStream(uri).use { input ->
+        cacheFile.outputStream().use { output -> input.copyTo(output) }
+      }
+
+      val typeface = Typeface.createFromFile(cacheFile)
+      ReactFontManager.getInstance().setTypeface(family, Typeface.NORMAL, typeface)
+      promise.resolve(true)
+    } catch (e: Exception) {
+      promise.reject(
+        "E_NANOICONS_FONT_REGISTER",
+        "Failed to register font \"$family\" from $uri: ${e.message}",
+        e
+      )
+    }
+  }
+
+  private fun openStream(uri: String): InputStream =
+    when {
+      uri.startsWith("content://") ->
+        reactApplicationContext.contentResolver.openInputStream(Uri.parse(uri))
+          ?: throw IllegalStateException("Cannot open content uri: $uri")
+      uri.startsWith("file://") ||
+        uri.startsWith("http://") ||
+        uri.startsWith("https://") -> URL(uri).openStream()
+      else -> File(uri).inputStream()
+    }
+
+  companion object {
+    const val NAME = "NanoIconsFontLoader"
+  }
+}

package/android/src/main/java/com/nanoicons/NanoIconsPackage.kt

@@ -3,6 +3,7 @@ package com.nanoicons
 import com.facebook.react.BaseReactPackage
 import com.facebook.react.bridge.NativeModule
 import com.facebook.react.bridge.ReactApplicationContext
+import com.facebook.react.module.model.ReactModuleInfo
 import com.facebook.react.module.model.ReactModuleInfoProvider
 import com.facebook.react.uimanager.ViewManager
 
@@ -15,8 +16,24 @@ class NanoIconsPackage : BaseReactPackage() {
   override fun getModule(
     name: String,
     reactContext: ReactApplicationContext
-  ): NativeModule? = null
+  ): NativeModule? =
+    when (name) {
+      NanoIconsFontLoaderModule.NAME -> NanoIconsFontLoaderModule(reactContext)
+      else -> null
+    }
 
   override fun getReactModuleInfoProvider(): ReactModuleInfoProvider =
-    ReactModuleInfoProvider { emptyMap() }
+    ReactModuleInfoProvider {
+      mapOf(
+        NanoIconsFontLoaderModule.NAME to
+          ReactModuleInfo(
+            NanoIconsFontLoaderModule.NAME,
+            NanoIconsFontLoaderModule.NAME,
+            false, // canOverrideExistingModule
+            false, // needsEagerInit
+            false, // isCxxModule
+            true // isTurboModule
+          )
+      )
+    }
 }

package/ios/NanoIconView.h

@@ -1,4 +1,9 @@
 #import <React/RCTViewComponentView.h>
+#import <Foundation/Foundation.h>
 
 @interface NanoIconView : RCTViewComponentView
 @end
+
+// Clears cached CTFontRef entries for `family` so the next render fetches a
+// fresh reference after an OTA font re-registration within the same process.
+void NanoIconInvalidateFontCache(NSString *family);

package/ios/NanoIconView.mm

@@ -24,22 +24,38 @@ using namespace facebook::react;
 }
 @end
 
-// Process-wide CTFontRef cache keyed by (fontFamily, fontSize).
-// Avoids 1000× CTFontCreateWithName for identical (family, size) combos.
+// CTFontRef cache keyed by "family:size" — avoids CTFontCreateWithName per render.
+// File-scope so NanoIconInvalidateFontCache can clear it on OTA font swap.
+static NSMutableDictionary *sNanoIconFontCache;
+static dispatch_once_t sNanoIconFontCacheOnce;
+
 static CTFontRef NanoIconGetCachedFont(NSString *family, CGFloat size) {
-  static NSMutableDictionary *cache;
-  static dispatch_once_t onceToken;
-  dispatch_once(&onceToken, ^{ cache = [NSMutableDictionary new]; });
+  dispatch_once(&sNanoIconFontCacheOnce, ^{ sNanoIconFontCache = [NSMutableDictionary new]; });
 
   NSString *key = [NSString stringWithFormat:@"%@:%.1f", family, size];
-  id existing = cache[key];
-  if (existing) return (__bridge CTFontRef)existing;
+  id existing = sNanoIconFontCache[key];
+  if (existing) {
+    return (__bridge CTFontRef)existing;
+  }
 
   CTFontRef font = CTFontCreateWithName((__bridge CFStringRef)family, size, NULL);
-  if (font) cache[key] = (__bridge id)font;
+  if (font) sNanoIconFontCache[key] = (__bridge id)font;
   return font;
 }
 
+// Clears cached entries for `family` after OTA font re-registration.
+void NanoIconInvalidateFontCache(NSString *family) {
+  dispatch_async(dispatch_get_main_queue(), ^{
+    if (!sNanoIconFontCache) return;
+    NSString *prefix = [family stringByAppendingString:@":"];
+    NSArray<NSString *> *keys = [sNanoIconFontCache.allKeys
+        filteredArrayUsingPredicate:[NSPredicate predicateWithBlock:^BOOL(NSString *k, id _) {
+          return [k hasPrefix:prefix];
+        }]];
+    [sNanoIconFontCache removeObjectsForKeys:keys];
+  });
+}
+
 @implementation NanoIconView {
   CTFontRef _font;   // borrowed from static cache — do NOT CFRelease
   NSString *_fontFamily;
@@ -175,11 +191,17 @@ static CTFontRef NanoIconGetCachedFont(NSString *family, CGFloat size) {
   _drawingLayer = layer;
 }
 
-// Re-detect inline state when the view moves to a new parent.
+// Reset inline state when the view moves to a new parent.
 - (void)didMoveToSuperview {
   [super didMoveToSuperview];
   _inlineDetected = NO;
+  _isInlineInText = NO;
+  _paragraphView = nil;
   _baselineOffsetValid = NO;
+  if (_drawingLayer) {
+    [_drawingLayer removeFromSuperlayer];
+    _drawingLayer = nil;
+  }
 }
 
 // Invalidate cached offset when size changes (text relayout).
@@ -339,6 +361,10 @@ static CTFontRef NanoIconGetCachedFont(NSString *family, CGFloat size) {
 
   // Map Unicode codepoints to font glyph IDs, handling surrogate pairs for codepoints > 0xFFFF.
   if (fontChanged || oldViewProps.codepoints != newViewProps.codepoints) {
+    // Re-fetch on codepoint change — cache may have been cleared by OTA font swap.
+    if (!fontChanged && _fontFamily) {
+      _font = NanoIconGetCachedFont(_fontFamily, _fontSize);
+    }
     const auto &codepoints = newViewProps.codepoints;
     _glyphs.resize(codepoints.size());
     for (size_t i = 0; i < codepoints.size(); i++) {

package/ios/NanoIconsFontLoader.h

@@ -0,0 +1,11 @@
+#ifdef RCT_NEW_ARCH_ENABLED
+#import <RNNanoIconsSpec/RNNanoIconsSpec.h>
+
+@interface NanoIconsFontLoader : NSObject <NativeNanoIconsFontLoaderSpec>
+@end
+#else
+#import <React/RCTBridgeModule.h>
+
+@interface NanoIconsFontLoader : NSObject <RCTBridgeModule>
+@end
+#endif

package/ios/NanoIconsFontLoader.mm

@@ -0,0 +1,110 @@
+#import "NanoIconsFontLoader.h"
+#import "NanoIconView.h"
+#import <CoreText/CoreText.h>
+
+@implementation NanoIconsFontLoader
+
+RCT_EXPORT_MODULE()
+
+// `family` must match the TTF's PostScript/full name — CTFontManager ignores it otherwise.
+RCT_EXPORT_METHOD(registerFont:(NSString *)family
+                  uri:(NSString *)uri
+                  resolve:(RCTPromiseResolveBlock)resolve
+                  reject:(RCTPromiseRejectBlock)reject)
+{
+  NSURL *url = [uri hasPrefix:@"/"] ? [NSURL fileURLWithPath:uri]
+                                    : [NSURL URLWithString:uri];
+  if (!url) {
+    reject(@"E_NANOICONS_FONT_REGISTER",
+           [NSString stringWithFormat:@"Invalid font uri: %@", uri], nil);
+    return;
+  }
+
+  NSData *data = [NSData dataWithContentsOfURL:url];
+  if (!data) {
+    reject(@"E_NANOICONS_FONT_REGISTER",
+           [NSString stringWithFormat:@"Could not read font at %@", uri], nil);
+    return;
+  }
+
+  CGDataProviderRef provider = CGDataProviderCreateWithCFData((__bridge CFDataRef)data);
+  CGFontRef cgFont = CGFontCreateWithDataProvider(provider);
+  CGDataProviderRelease(provider);
+  if (!cgFont) {
+    reject(@"E_NANOICONS_FONT_REGISTER", @"Invalid font data", nil);
+    return;
+  }
+
+  NSString *postScriptName = (__bridge_transfer NSString *)CGFontCopyPostScriptName(cgFont);
+  NSString *fullName = (__bridge_transfer NSString *)CGFontCopyFullName(cgFont);
+
+  BOOL nameMatches =
+      [postScriptName isEqualToString:family] || [fullName isEqualToString:family];
+  if (!nameMatches) {
+    CGFontRelease(cgFont);
+    reject(
+        @"E_NANOICONS_FONT_REGISTER",
+        [NSString stringWithFormat:
+                      @"Font name \"%@\" does not match family \"%@\". "
+                      @"On iOS the TTF PostScript/full name must equal glyphMap.m.f.",
+                      postScriptName ?: fullName, family],
+        nil);
+    return;
+  }
+
+  CFErrorRef error = NULL;
+  bool ok = CTFontManagerRegisterGraphicsFont(cgFont, &error);
+  // defer cgFont release — needed for re-registration if name conflict.
+
+  if (!ok && error) {
+    NSError *err = (__bridge_transfer NSError *)error;
+
+    if (err.code == kCTFontManagerErrorAlreadyRegistered ||
+        err.code == kCTFontManagerErrorDuplicatedName) {
+      // OTA reload: process still holds the old font. Swap it out.
+      CTFontRef existingCT = CTFontCreateWithName((__bridge CFStringRef)postScriptName, 10.0, NULL);
+      if (existingCT) {
+        CGFontRef existingCG = CTFontCopyGraphicsFont(existingCT, NULL);
+        CFRelease(existingCT);
+        if (existingCG) {
+          CFErrorRef unregErr = NULL;
+          CTFontManagerUnregisterGraphicsFont(existingCG, &unregErr);
+          CFRelease(existingCG);
+          if (unregErr) CFRelease(unregErr);
+        }
+      }
+
+      CFErrorRef regErr = NULL;
+      bool reok = CTFontManagerRegisterGraphicsFont(cgFont, &regErr);
+      CGFontRelease(cgFont);
+
+      if (!reok && regErr) {
+        NSError *reErr = (__bridge_transfer NSError *)regErr;
+        reject(@"E_NANOICONS_FONT_REGISTER", reErr.localizedDescription, reErr);
+        return;
+      }
+      if (regErr) CFRelease(regErr);
+
+      NanoIconInvalidateFontCache(postScriptName);
+      resolve(@(YES));
+      return;
+    }
+
+    CGFontRelease(cgFont);
+    reject(@"E_NANOICONS_FONT_REGISTER", err.localizedDescription, err);
+    return;
+  }
+
+  CGFontRelease(cgFont);
+  resolve(@(YES));
+}
+
+#ifdef RCT_NEW_ARCH_ENABLED
+- (std::shared_ptr<facebook::react::TurboModule>)getTurboModule:
+    (const facebook::react::ObjCTurboModule::InitParams &)params
+{
+  return std::make_shared<facebook::react::NativeNanoIconsFontLoaderSpecJSI>(params);
+}
+#endif
+
+@end

package/lib/commonjs/cli/build.d.ts

@@ -12,11 +12,14 @@ export type IconSetConfig = {
     safeZone?: number;
     /** First Unicode codepoint for glyphs (default 0xe900). Hex string or number. */
     startUnicode?: number | string;
+    /** Linking type for the font (default 'static'). Static bundles the TTF, dynamic delivers it via OTA*/
+    linking?: 'static' | 'dynamic';
 };
 export type BuiltFont = {
     fontFamily: string;
     ttfPath: string;
     glyphmapPath: string;
+    linking: 'static' | 'dynamic';
 };
 /**
  * Build TTF + glyphmap for all icon sets using a single Pyodide/PathKit instance.

package/lib/commonjs/cli/build.js

@@ -11,7 +11,7 @@ const fingerPrint_js_1 = require("../src/utils/fingerPrint.js");
 const DEFAULT_SAFE_ZONE = 1020;
 const DEFAULT_UPM = 1024;
 const DEFAULT_START_UNICODE = 0xe900;
-function shouldSkipGeneration(inputHash, outputDir, fontFamily, logger) {
+function shouldSkipGeneration(inputHash, outputDir, fontFamily, linking, logger) {
     const ttfPath = path_1.default.join(outputDir, `${fontFamily}.ttf`);
     const glyphmapPath = path_1.default.join(outputDir, `${fontFamily}.glyphmap.json`);
     if (!fs_1.default.existsSync(outputDir) ||
@@ -21,7 +21,8 @@ function shouldSkipGeneration(inputHash, outputDir, fontFamily, logger) {
     }
     const glyphmap = JSON.parse(fs_1.default.readFileSync(glyphmapPath, 'utf8'));
     const storedHash = glyphmap?.m?.h;
-    if (storedHash && storedHash === inputHash) {
+    const storedLinking = glyphmap?.m?.l === 'd' ? 'dynamic' : 'static';
+    if (storedHash && storedHash === inputHash && storedLinking === linking) {
         logger?.info(`${fontFamily}: SVG fingerprint unchanged, skipping build.`);
         return true;
     }
@@ -40,6 +41,7 @@ async function buildAllFonts(iconSets, projectRoot, options) {
         const set = iconSets[i];
         const inputDir = path_1.default.resolve(projectRoot, set.inputDir);
         const fontFamily = set.fontFamily ?? path_1.default.basename(inputDir);
+        const linking = set.linking ?? 'static';
         if (!fs_1.default.existsSync(inputDir)) {
             throw new Error(`[react-native-nano-icons] Input directory does not exist: ${inputDir} (from "${set.inputDir}")`);
         }
@@ -49,8 +51,8 @@ async function buildAllFonts(iconSets, projectRoot, options) {
         const ttfPath = path_1.default.join(outputDir, `${fontFamily}.ttf`);
         const glyphmapPath = path_1.default.join(outputDir, `${fontFamily}.glyphmap.json`);
         const inputHash = (0, fingerPrint_js_1.getFingerprintSync)(inputDir);
-        if (shouldSkipGeneration(inputHash, outputDir, fontFamily, logger)) {
-            results.push({ fontFamily, ttfPath, glyphmapPath });
+        if (shouldSkipGeneration(inputHash, outputDir, fontFamily, linking, logger)) {
+            results.push({ fontFamily, ttfPath, glyphmapPath, linking });
             continue;
         }
         if (fs_1.default.existsSync(ttfPath))
@@ -68,6 +70,7 @@ async function buildAllFonts(iconSets, projectRoot, options) {
                     ? parseInt(set.startUnicode, 16)
                     : set.startUnicode
                 : DEFAULT_START_UNICODE,
+            linking,
         };
         logger?.start(`Building ${fontFamily} (${i + 1}/${iconSets.length})…`);
         const out = await (0, index_js_1.runPipeline)(config, { inputDir, outputDir, tempDir }, { logger, inputHash });
@@ -75,6 +78,7 @@ async function buildAllFonts(iconSets, projectRoot, options) {
             fontFamily,
             ttfPath: out.ttfPath,
             glyphmapPath: out.glyphmapPath,
+            linking,
         });
     }
     if (allSkipped && results.length > 0) {

package/lib/commonjs/cli/config.d.ts

@@ -7,3 +7,4 @@ export type NanoIconsConfig = {
  * Throws with a helpful message if the file is missing or malformed.
  */
 export declare function loadNanoIconsConfig(configRoot: string): NanoIconsConfig;
+export declare function loadDynamicIconSets(configRoot: string): IconSetConfig[];

package/lib/commonjs/cli/config.js

@@ -4,6 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.loadNanoIconsConfig = loadNanoIconsConfig;
+exports.loadDynamicIconSets = loadDynamicIconSets;
 const node_fs_1 = __importDefault(require("node:fs"));
 const node_path_1 = __importDefault(require("node:path"));
 /**
@@ -24,3 +25,12 @@ function loadNanoIconsConfig(configRoot) {
     }
     return config;
 }
+function loadDynamicIconSets(configRoot) {
+    const config = loadNanoIconsConfig(configRoot);
+    const dynamicSets = config.iconSets.filter((s) => s.linking === 'dynamic');
+    if (dynamicSets.length === 0) {
+        throw new Error(`[react-native-nano-icons] No icon sets with linking: "dynamic" found in .nanoicons.json.\n` +
+            `--dynamic only processes icon sets where linking is set to "dynamic".`);
+    }
+    return dynamicSets;
+}

package/lib/commonjs/cli/expoConfig.d.ts

@@ -0,0 +1,8 @@
+import type { IconSetConfig } from './build.js';
+/**
+ * Load icon sets configured with linking: 'dynamic' from the Expo app config
+ * (app.json, app.config.js, or app.config.ts).
+ *
+ * Requires @expo/config to be installed (present in all Expo projects).
+ */
+export declare function loadDynamicSetsFromAppConfig(projectRoot: string): IconSetConfig[];

package/lib/commonjs/cli/expoConfig.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.loadDynamicSetsFromAppConfig = loadDynamicSetsFromAppConfig;
+/**
+ * Load icon sets configured with linking: 'dynamic' from the Expo app config
+ * (app.json, app.config.js, or app.config.ts).
+ *
+ * Requires @expo/config to be installed (present in all Expo projects).
+ */
+function loadDynamicSetsFromAppConfig(projectRoot) {
+    let getConfig;
+    try {
+        // eslint-disable-next-line @typescript-eslint/no-require-imports
+        ({ getConfig } = require('@expo/config'));
+    }
+    catch {
+        throw new Error(`[react-native-nano-icons] @expo/config not found — required for --dynamic --app-config.\n` +
+            `It should already be present in Expo projects. If missing: yarn add @expo/config`);
+    }
+    const { exp } = getConfig(projectRoot, { skipSDKVersionRequirement: true });
+    const plugins = Array.isArray(exp.plugins) ? exp.plugins : [];
+    const entry = plugins.find((p) => Array.isArray(p) && p[0] === 'react-native-nano-icons');
+    if (!entry) {
+        throw new Error(`[react-native-nano-icons] Plugin "react-native-nano-icons" not found in app config.\n` +
+            `Add it to your app.json or app.config.js/ts under the "plugins" key.`);
+    }
+    const [, options] = entry;
+    const dynamicSets = (options.iconSets ?? []).filter((s) => s.linking === 'dynamic');
+    if (dynamicSets.length === 0) {
+        throw new Error(`[react-native-nano-icons] No icon sets with linking: "dynamic" found.\n` +
+            `--dynamic --app-config only processes icon sets where linking is set to "dynamic".`);
+    }
+    return dynamicSets;
+}

package/lib/commonjs/cli/index.d.ts

@@ -1,4 +1,5 @@
 export { buildAllFonts, type IconSetConfig, type BuiltFont } from './build.js';
 export { createOraLogger, createQuietLogger, detectExpoLogLevel, type NanoLogger, type LogLevel, } from './logger.js';
-export { loadNanoIconsConfig, type NanoIconsConfig } from './config.js';
+export { loadNanoIconsConfig, loadDynamicIconSets, type NanoIconsConfig, } from './config.js';
+export { loadDynamicSetsFromAppConfig } from './expoConfig.js';
 export { linkBare } from './link.js';

package/lib/commonjs/cli/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.linkBare = exports.loadNanoIconsConfig = exports.detectExpoLogLevel = exports.createQuietLogger = exports.createOraLogger = exports.buildAllFonts = void 0;
+exports.linkBare = exports.loadDynamicSetsFromAppConfig = exports.loadDynamicIconSets = exports.loadNanoIconsConfig = exports.detectExpoLogLevel = exports.createQuietLogger = exports.createOraLogger = exports.buildAllFonts = void 0;
 var build_js_1 = require("./build.js");
 Object.defineProperty(exports, "buildAllFonts", { enumerable: true, get: function () { return build_js_1.buildAllFonts; } });
 var logger_js_1 = require("./logger.js");
@@ -9,5 +9,8 @@ Object.defineProperty(exports, "createQuietLogger", { enumerable: true, get: fun
 Object.defineProperty(exports, "detectExpoLogLevel", { enumerable: true, get: function () { return logger_js_1.detectExpoLogLevel; } });
 var config_js_1 = require("./config.js");
 Object.defineProperty(exports, "loadNanoIconsConfig", { enumerable: true, get: function () { return config_js_1.loadNanoIconsConfig; } });
+Object.defineProperty(exports, "loadDynamicIconSets", { enumerable: true, get: function () { return config_js_1.loadDynamicIconSets; } });
+var expoConfig_js_1 = require("./expoConfig.js");
+Object.defineProperty(exports, "loadDynamicSetsFromAppConfig", { enumerable: true, get: function () { return expoConfig_js_1.loadDynamicSetsFromAppConfig; } });
 var link_js_1 = require("./link.js");
 Object.defineProperty(exports, "linkBare", { enumerable: true, get: function () { return link_js_1.linkBare; } });