rn-iconify 2.2.0 → 3.0.0

package/lib/commonjs/alias/createIconAliases.js

@@ -9,14 +9,12 @@ exports.defineAliases = defineAliases;
 var _react = _interopRequireDefault(require("react"));
 var _IconRenderer = require("../IconRenderer");
 var _theme = require("../theme");
-var _types = require("../theme/types");
 var _IconAliasContext = require("./IconAliasContext");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-/**
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); } /**
  * createIconAliases - Factory function for creating type-safe icon aliases
  * Provides full TypeScript autocomplete for alias names
  */
-
 /**
  * Validate that all alias values are valid icon names
  */
@@ -114,63 +112,24 @@ function createIconAliases(config) {
 
   /**
    * Type-safe Icon component with alias support
+   * Uses rest spread to forward ALL props (press, animation, className, etc.)
    */
-  function TypedIcon({
+  const TypedIcon = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.forwardRef(function TypedIcon({
     name,
-    size,
-    color,
-    width,
-    height,
-    style,
-    rotate,
-    flip,
-    fallback,
-    fallbackDelay,
-    placeholder,
-    placeholderColor,
-    placeholderDuration,
-    onLoad,
-    onError,
     accessibilityLabel,
-    testID
-  }) {
-    // Get theme defaults
-    const {
-      theme
-    } = (0, _theme.useIconTheme)();
-
+    ...restProps
+  }, ref) {
     // Resolve the icon name
     const resolvedName = resolve(name);
 
-    // Merge props with theme defaults
-    const mergedSize = size ?? theme.size ?? _types.DEFAULT_ICON_THEME.size;
-    const mergedColor = color ?? theme.color ?? _types.DEFAULT_ICON_THEME.color;
-    const mergedRotate = rotate ?? theme.rotate ?? _types.DEFAULT_ICON_THEME.rotate;
-    const mergedFlip = flip ?? theme.flip;
-    const mergedFallbackDelay = fallbackDelay ?? theme.fallbackDelay ?? _types.DEFAULT_ICON_THEME.fallbackDelay;
-    const mergedPlaceholder = placeholder ?? theme.placeholder;
-    const mergedPlaceholderColor = placeholderColor ?? theme.placeholderColor ?? _types.DEFAULT_ICON_THEME.placeholderColor;
-    const mergedPlaceholderDuration = placeholderDuration ?? theme.placeholderDuration ?? _types.DEFAULT_ICON_THEME.placeholderDuration;
-    return /*#__PURE__*/_react.default.createElement(_IconRenderer.IconRenderer, {
+    // Merge with theme defaults (memoized internally)
+    const mergedProps = (0, _theme.useMergedIconProps)(restProps);
+    return /*#__PURE__*/_react.default.createElement(_IconRenderer.IconRenderer, _extends({
+      ref: ref,
       iconName: resolvedName,
-      size: mergedSize,
-      color: mergedColor,
-      width: width,
-      height: height,
-      style: style,
-      rotate: mergedRotate,
-      flip: mergedFlip,
-      fallback: fallback,
-      fallbackDelay: mergedFallbackDelay,
-      placeholder: mergedPlaceholder,
-      placeholderColor: mergedPlaceholderColor,
-      placeholderDuration: mergedPlaceholderDuration,
-      onLoad: onLoad,
-      onError: onError,
-      accessibilityLabel: accessibilityLabel ?? name,
-      testID: testID
-    });
-  }
+      accessibilityLabel: accessibilityLabel ?? name
+    }, mergedProps));
+  }));
   TypedIcon.displayName = 'TypedIcon';
 
   /**

package/lib/commonjs/animated/useIconAnimation.js

@@ -117,7 +117,9 @@ function useIconAnimation(options = {}) {
           return shakeSequence;
         }
       case 'sequence':
-        // For custom sequences, return null and handle separately
+        if (__DEV__) {
+          console.warn('[rn-iconify] Animation type "sequence" is not yet implemented. ' + 'Use individual animation presets (spin, pulse, bounce, shake, ping, wiggle) instead.');
+        }
         return null;
       default:
         return null;
@@ -220,12 +222,15 @@ function useIconAnimation(options = {}) {
     });
   }, []);
 
-  // Pause animation (not directly supported, we stop it)
+  // Pause animation
+  // Note: React Native's Animated API does not support true pause/resume.
+  // pause() stops the animation at its current position.
+  // resume() restarts the animation from the beginning.
   const pause = (0, _react.useCallback)(() => {
     if (animationRef.current) {
       animationRef.current.stop();
+      animationRef.current = null;
     }
-    // Use queueMicrotask to defer state update (React 19 compatibility)
     queueMicrotask(() => {
       if (mountedRef.current) {
         setState('paused');
@@ -233,7 +238,7 @@ function useIconAnimation(options = {}) {
     });
   }, []);
 
-  // Resume animation
+  // Resume a paused animation (restarts from beginning due to RN Animated API limitations)
   const resume = (0, _react.useCallback)(() => {
     if (state === 'paused') {
       start();
@@ -267,14 +272,18 @@ function useIconAnimation(options = {}) {
     if (!config) return {};
     switch (config.type) {
       case 'rotate':
-        return {
-          transform: [{
-            rotate: rotateValue.interpolate({
-              inputRange: [0, 360],
-              outputRange: ['0deg', '360deg']
-            })
-          }]
-        };
+        {
+          const fromDeg = config.from;
+          const toDeg = config.to;
+          return {
+            transform: [{
+              rotate: rotateValue.interpolate({
+                inputRange: [fromDeg, toDeg],
+                outputRange: [`${fromDeg}deg`, `${toDeg}deg`]
+              })
+            }]
+          };
+        }
       case 'scale':
         return {
           transform: [{

package/lib/commonjs/babel/index.js

@@ -52,6 +52,12 @@ Object.defineProperty(exports, "getFilenameFromState", {
     return _types.getFilenameFromState;
   }
 });
+Object.defineProperty(exports, "getRootFromFile", {
+  enumerable: true,
+  get: function () {
+    return _types.getRootFromFile;
+  }
+});
 Object.defineProperty(exports, "resetPluginState", {
   enumerable: true,
   get: function () {

package/lib/commonjs/babel/plugin.js

@@ -3,9 +3,14 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.acquireScanLock = acquireScanLock;
 exports.createRnIconifyPlugin = createRnIconifyPlugin;
+exports.isScanLockActive = isScanLockActive;
+exports.releaseScanLock = releaseScanLock;
+exports.resetBuildState = resetBuildState;
 exports.resetPluginState = resetPluginState;
 var nodePath = _interopRequireWildcard(require("path"));
+var fs = _interopRequireWildcard(require("fs"));
 var _types = require("./types");
 var _astUtils = require("./ast-utils");
 var _collector = require("./collector");
@@ -49,6 +54,16 @@ const processedFiles = new Set();
  */
 let buildInProgress = false;
 
+/**
+ * Timestamp when build started — used for stale build detection
+ */
+let buildStartTime = 0;
+
+/**
+ * Maximum build duration (ms) before auto-reset
+ */
+const BUILD_TIMEOUT = 60_000;
+
 /**
  * Debounce timer for bundle generation
  */
@@ -84,6 +99,72 @@ let scannedIcons = [];
  */
 let existingBundle = null;
 
+/**
+ * Reset all module-level build state
+ * Called when build completes or when stale build is detected
+ */
+function resetBuildState() {
+  buildInProgress = false;
+  buildStartTime = 0;
+  hasInjected = false;
+  scannedIcons = [];
+  existingBundle = null;
+  processedFiles.clear();
+  if (bundleTimer) {
+    clearTimeout(bundleTimer);
+    bundleTimer = null;
+  }
+}
+const SCAN_LOCK_MAX_AGE = 30000; // 30 seconds
+
+/**
+ * Check if a scan lock file exists and is recent
+ */
+function isScanLockActive(lockPath, maxAge = SCAN_LOCK_MAX_AGE) {
+  try {
+    const stat = fs.statSync(lockPath);
+    return Date.now() - stat.mtimeMs < maxAge;
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * Acquire the scan lock by writing a timestamp file
+ * Returns true if lock was acquired, false if already held
+ */
+function acquireScanLock(lockPath) {
+  if (isScanLockActive(lockPath)) {
+    return false;
+  }
+  try {
+    const dir = nodePath.dirname(lockPath);
+    if (!fs.existsSync(dir)) {
+      fs.mkdirSync(dir, {
+        recursive: true
+      });
+    }
+    fs.writeFileSync(lockPath, String(Date.now()), {
+      flag: 'wx'
+    });
+    return true;
+  } catch {
+    // Another worker may have created it between our check and write
+    return false;
+  }
+}
+
+/**
+ * Release the scan lock
+ */
+function releaseScanLock(lockPath) {
+  try {
+    fs.unlinkSync(lockPath);
+  } catch {
+    // Already removed or never existed
+  }
+}
+
 /**
  * Create the rn-iconify Babel plugin
  */
@@ -97,30 +178,24 @@ function createRnIconifyPlugin(babel) {
         return;
       }
 
+      // Auto-reset stale builds (stuck for > 60s)
+      if (buildInProgress && buildStartTime > 0 && Date.now() - buildStartTime > BUILD_TIMEOUT) {
+        if (opts.verbose) {
+          console.warn('[rn-iconify] Stale build detected (>60s), resetting state');
+        }
+        resetBuildState();
+      }
+
       // Initialize collector on first file
       if (!buildInProgress) {
         buildInProgress = true;
+        buildStartTime = Date.now();
         hasInjected = false;
         _collector.collector.initialize(opts);
 
-        // Detect project root from file
-        const filename = (0, _types.getFilenameFromFile)(file);
-        if (filename) {
-          let dir = filename;
-          while (dir !== '/') {
-            dir = dir.substring(0, dir.lastIndexOf('/'));
-            try {
-              require.resolve(`${dir}/package.json`);
-              projectRoot = dir;
-              break;
-            } catch {
-              continue;
-            }
-          }
-          if (!projectRoot) {
-            projectRoot = process.cwd();
-          }
-        }
+        // Detect project root from Babel's root (set from babel.config.js location)
+        const root = (0, _types.getRootFromFile)(file);
+        projectRoot = root || process.cwd();
         const outputPath = opts.outputPath || '.rn-iconify';
         bundleDirPath = (0, _cacheWriter.resolveBundleDir)(outputPath, projectRoot);
         const bundleJsonPath = nodePath.join(bundleDirPath, 'icons.json');
@@ -129,14 +204,25 @@ function createRnIconifyPlugin(babel) {
         existingBundle = (0, _cacheWriter.readExistingBundle)(bundleJsonPath);
         bundleExists = existingBundle !== null;
 
-        // Run sync scanner to discover all icons in the project
-        try {
-          scannedIcons = (0, _scanner.scanProjectForIcons)(projectRoot, {
-            verbose: opts.verbose
-          });
-        } catch (error) {
+        // Use file-based lock to prevent duplicate scans across Metro workers
+        const lockPath = nodePath.join(bundleDirPath, '.scan-lock');
+        const lockAcquired = acquireScanLock(lockPath);
+        if (lockAcquired) {
+          try {
+            scannedIcons = (0, _scanner.scanProjectForIcons)(projectRoot, {
+              verbose: opts.verbose
+            });
+          } catch (error) {
+            if (opts.verbose) {
+              console.warn('[rn-iconify] Scanner failed:', error);
+            }
+            scannedIcons = [];
+          } finally {
+            releaseScanLock(lockPath);
+          }
+        } else {
           if (opts.verbose) {
-            console.warn('[rn-iconify] Scanner failed:', error);
+            console.log('[rn-iconify] Scanner skipped (another worker is scanning)');
           }
           scannedIcons = [];
         }
@@ -270,33 +356,39 @@ function createRnIconifyPlugin(babel) {
         clearTimeout(bundleTimer);
       }
       bundleTimer = setTimeout(async () => {
-        if (!_collector.collector.isBundleGenerated()) {
-          _collector.collector.markBundleGenerated();
-
-          // Merge AST-collected icons with scanner-collected icons
-          const astIcons = _collector.collector.getIconNames();
-          const allIcons = Array.from(new Set([...astIcons, ...scannedIcons]));
-          if (allIcons.length > 0) {
-            _collector.collector.printSummary();
-            try {
-              await (0, _cacheWriter.generateBundle)(allIcons, opts, projectRoot, existingBundle);
-            } catch (error) {
-              console.error('[rn-iconify] Bundle generation error:', error);
+        try {
+          if (!_collector.collector.isBundleGenerated()) {
+            _collector.collector.markBundleGenerated();
+
+            // Merge AST-collected icons with scanner-collected icons
+            const astIcons = _collector.collector.getIconNames();
+            const allIcons = Array.from(new Set([...astIcons, ...scannedIcons]));
+            if (allIcons.length > 0) {
+              _collector.collector.printSummary();
+              try {
+                await (0, _cacheWriter.generateBundle)(allIcons, opts, projectRoot, existingBundle);
+              } catch (error) {
+                console.error('[rn-iconify] Bundle generation error:', error);
+              }
             }
           }
-          buildInProgress = false;
+        } finally {
+          resetBuildState();
         }
       }, 500);
     }
   };
 }
 
+// Exported for testing
+
 /**
  * Reset plugin state (for testing)
  */
 function resetPluginState() {
   processedFiles.clear();
   buildInProgress = false;
+  projectRoot = '';
   hasInjected = false;
   bundleExists = false;
   bundleDirPath = '';

package/lib/commonjs/babel/scanner.js

@@ -7,6 +7,7 @@ exports.scanProjectForIcons = scanProjectForIcons;
 var fs = _interopRequireWildcard(require("fs"));
 var path = _interopRequireWildcard(require("path"));
 var _types = require("./types");
+var _astUtils = require("./ast-utils");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 /**
  * Project File Scanner
@@ -26,20 +27,19 @@ const DEFAULT_EXCLUDE_DIRS = new Set(['node_modules', 'lib', '.rn-iconify', '__t
  */
 
 /**
- * Build regex patterns for icon component detection
- * Matches: <Ion name="home" /> or <Ion name={'home'} /> or <Ion name={`home`} />
+ * Build a single combined regex that captures both the component name
+ * and the icon name in one match — O(n) single pass instead of O(n²)
+ *
+ * Captures:
+ *   group 1 = component name (e.g., "Ion")
+ *   group 2 = icon name from name="..."
+ *   group 3 = icon name from name={'...'}
+ *   group 4 = icon name from name={"..."}
+ *   group 5 = icon name from name={`...`}
  */
-function buildComponentRegex() {
+function buildCombinedRegex() {
   const componentNames = Object.keys(_types.COMPONENT_PREFIX_MAP).join('|');
-  return new RegExp(`<(?:${componentNames})\\s[^>]*?name=(?:"([^"]+)"|\\{'([^']+)'\\}|\\{"([^"]+)"\\}|\\\`([^\`]+)\\\`)`, 'g');
-}
-
-/**
- * Build regex to extract component name from JSX
- */
-function buildComponentNameRegex() {
-  const componentNames = Object.keys(_types.COMPONENT_PREFIX_MAP).join('|');
-  return new RegExp(`<(${componentNames})\\s`, 'g');
+  return new RegExp(`<(${componentNames})\\s[^>]*?name=(?:"([^"]+)"|\\{'([^']+)'\\}|\\{"([^"]+)"\\}|\\\`([^\`]+)\\\`)`, 'g');
 }
 
 /**
@@ -56,7 +56,7 @@ const STRING_ITEM_REGEX = /['"]([^'"]+)['"]/g;
 /**
  * Scan a single file for icon usage
  */
-function scanFile(filePath, componentRegex, componentNameRegex, verbose) {
+function scanFile(filePath, combinedRegex, verbose) {
   const icons = [];
   let content;
   try {
@@ -70,35 +70,20 @@ function scanFile(filePath, componentRegex, componentNameRegex, verbose) {
     return icons;
   }
 
-  // Scan for JSX component usage: <Ion name="home" />
-  componentRegex.lastIndex = 0;
-  componentNameRegex.lastIndex = 0;
-
-  // Find all component usages with name attribute
-  const fullPattern = new RegExp(componentRegex.source, 'g');
+  // Single-pass scan: combined regex captures component name + icon name in one match
+  combinedRegex.lastIndex = 0;
   let match;
-  while ((match = fullPattern.exec(content)) !== null) {
-    const iconName = match[1] || match[2] || match[3] || match[4];
-    if (!iconName) continue;
-
-    // Find the component name for this match by searching backwards
-    const beforeMatch = content.substring(0, match.index + 20);
-    const namePattern = new RegExp(componentNameRegex.source, 'g');
-    let nameMatch;
-    let lastNameMatch = null;
-    while ((nameMatch = namePattern.exec(beforeMatch)) !== null) {
-      if (nameMatch.index <= match.index) {
-        lastNameMatch = nameMatch;
-      }
-    }
-    if (lastNameMatch) {
-      const componentName = lastNameMatch[1];
-      const prefix = _types.COMPONENT_PREFIX_MAP[componentName];
-      if (prefix) {
-        icons.push(`${prefix}:${iconName}`);
-        if (verbose) {
-          console.log(`[rn-iconify:scanner] Found ${prefix}:${iconName} in ${filePath}`);
-        }
+  while ((match = combinedRegex.exec(content)) !== null) {
+    const componentName = match[1];
+    const iconName = match[2] || match[3] || match[4] || match[5];
+    if (!componentName || !iconName) continue;
+    const prefix = _types.COMPONENT_PREFIX_MAP[componentName];
+    if (prefix) {
+      const fullName = `${prefix}:${iconName}`;
+      if (!(0, _astUtils.isValidIconName)(fullName)) continue;
+      icons.push(fullName);
+      if (verbose) {
+        console.log(`[rn-iconify:scanner] Found ${fullName} in ${filePath}`);
       }
     }
   }
@@ -112,7 +97,7 @@ function scanFile(filePath, componentRegex, componentNameRegex, verbose) {
     let itemMatch;
     while ((itemMatch = STRING_ITEM_REGEX.exec(arrayContent)) !== null) {
       const iconName = itemMatch[1];
-      if (iconName && iconName.includes(':')) {
+      if (iconName && iconName.includes(':') && (0, _astUtils.isValidIconName)(iconName)) {
         icons.push(iconName);
         if (verbose) {
           console.log(`[rn-iconify:scanner] Found prefetch ${iconName} in ${filePath}`);
@@ -191,14 +176,13 @@ function scanProjectForIcons(projectRoot, options = {}) {
     console.log(`[rn-iconify:scanner] Found ${files.length} source files to scan`);
   }
 
-  // 2. Build regex patterns once
-  const componentRegex = buildComponentRegex();
-  const componentNameRegex = buildComponentNameRegex();
+  // 2. Build combined regex once (single-pass O(n) per file)
+  const combinedRegex = buildCombinedRegex();
 
   // 3. Scan each file
   const allIcons = new Set();
   for (const file of files) {
-    const icons = scanFile(file, componentRegex, componentNameRegex, verbose);
+    const icons = scanFile(file, combinedRegex, verbose);
     for (const icon of icons) {
       allIcons.add(icon);
     }

package/lib/commonjs/babel/types.js

@@ -7,6 +7,7 @@ exports.VALID_PREFIXES = exports.VALID_COMPONENTS = exports.PREFIX_COMPONENT_MAP
 exports.getFilename = getFilename;
 exports.getFilenameFromFile = getFilenameFromFile;
 exports.getFilenameFromState = getFilenameFromState;
+exports.getRootFromFile = getRootFromFile;
 /**
  * Babel Plugin Types
  * Type definitions for the rn-iconify Babel plugin
@@ -93,6 +94,24 @@ function getFilenameFromFile(file) {
   return getFilename(file);
 }
 
+/**
+ * Type guard to check if an object has opts.root
+ */
+function hasOptsWithRoot(obj) {
+  return typeof obj === 'object' && obj !== null && 'opts' in obj && typeof obj.opts === 'object' && obj.opts !== null && 'root' in obj.opts && typeof obj.opts.root === 'string';
+}
+
+/**
+ * Helper to safely extract project root from BabelFile object
+ * Babel sets file.opts.root from babel.config.js location
+ */
+function getRootFromFile(file) {
+  if (hasOptsWithRoot(file)) {
+    return file.opts.root;
+  }
+  return undefined;
+}
+
 /**
  * Collected icon information
  */

package/lib/commonjs/cache/CacheManager.js

@@ -44,6 +44,13 @@ class CacheManagerImpl {
    */
   isLoadingBundle = false;
 
+  /**
+   * Batched icon usage reports (DEV only)
+   * Accumulates icon names and flushes every 2 seconds
+   */
+  pendingReports = new Set();
+  reportTimer = null;
+
   /**
    * Initialize bundled icons from the Babel plugin cache
    * This should be called automatically on first access
@@ -71,27 +78,30 @@ class CacheManagerImpl {
       return 0;
     }
     this.isLoadingBundle = true;
-    this.bundledIcons = new Map();
-    let skippedCount = 0;
-    for (const [iconName, data] of Object.entries(bundle.icons)) {
-      if (data && typeof data.svg === 'string' && data.svg.length > 0) {
-        this.bundledIcons.set(iconName, data.svg);
-      } else {
-        skippedCount++;
-        if (__DEV__) {
-          console.warn(`[rn-iconify] Skipping invalid icon in bundle: ${iconName}`);
+    try {
+      this.bundledIcons = new Map();
+      let skippedCount = 0;
+      for (const [iconName, data] of Object.entries(bundle.icons)) {
+        if (data && typeof data.svg === 'string' && data.svg.length > 0) {
+          this.bundledIcons.set(iconName, data.svg);
+        } else {
+          skippedCount++;
+          if (__DEV__) {
+            console.warn(`[rn-iconify] Skipping invalid icon in bundle: ${iconName}`);
+          }
         }
       }
-    }
-    if (__DEV__ && skippedCount > 0) {
-      console.warn(`[rn-iconify] Skipped ${skippedCount} invalid icons in bundle`);
-    }
-    this.bundledIconsInitialized = true;
+      if (__DEV__ && skippedCount > 0) {
+        console.warn(`[rn-iconify] Skipped ${skippedCount} invalid icons in bundle`);
+      }
+      this.bundledIconsInitialized = true;
 
-    // Warmup memory cache from disk cache
-    this.warmup();
-    this.isLoadingBundle = false;
-    return this.bundledIcons.size;
+      // Warmup memory cache from disk cache
+      this.warmup();
+      return this.bundledIcons.size;
+    } finally {
+      this.isLoadingBundle = false;
+    }
   }
 
   /**
@@ -362,25 +372,42 @@ class CacheManagerImpl {
 
   /**
    * Report icon usage to Metro dev server (DEV only)
-   * Fire-and-forget POST to the Metro middleware
+   * Batches reports and flushes every 2 seconds to avoid
+   * flooding Metro with individual HTTP requests
    */
   reportIconUsage(iconName) {
     if (typeof __DEV__ === 'undefined' || !__DEV__) return;
     if (this.isLoadingBundle) return;
+    this.pendingReports.add(iconName);
+    if (!this.reportTimer) {
+      this.reportTimer = setTimeout(() => this.flushReports(), 2000);
+    }
+  }
+
+  /**
+   * Flush batched icon usage reports to Metro dev server
+   */
+  flushReports() {
+    this.reportTimer = null;
+    if (this.pendingReports.size === 0) return;
+    const icons = Array.from(this.pendingReports);
+    this.pendingReports.clear();
     try {
-      // Use global fetch if available (React Native)
       if (typeof fetch === 'function') {
-        fetch('http://localhost:8081/__rn_iconify_log', {
-          method: 'POST',
-          headers: {
-            'Content-Type': 'application/json'
-          },
-          body: JSON.stringify({
-            icon: iconName
-          })
-        }).catch(() => {
-          // Silently ignore - Metro server might not have the plugin
-        });
+        // Send all icons in a single request
+        for (const icon of icons) {
+          fetch('http://localhost:8081/__rn_iconify_log', {
+            method: 'POST',
+            headers: {
+              'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({
+              icon
+            })
+          }).catch(() => {
+            // Silently ignore - Metro server might not have the plugin
+          });
+        }
       }
     } catch {
       // Silently ignore