rn-iconify 2.0.1 → 2.1.1

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "rn-iconify",
-  "version": "2.0.1",
+  "version": "2.1.1",
   "description": "268,000+ Iconify icons for React Native with native MMKV caching and full TypeScript autocomplete",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
   "types": "lib/typescript/index.d.ts",
   "react-native": "src/index.ts",
   "source": "src/index.ts",
+  "sideEffects": false,
   "exports": {
     ".": {
       "types": "./lib/typescript/index.d.ts",
@@ -35,7 +36,6 @@
   "files": [
     "src",
     "lib",
-    "bin",
     "babel.js",
     "README.md",
     "assets",
@@ -57,7 +57,7 @@
     "prepare": "husky",
     "prepublishOnly": "bob build",
     "generate-components": "tsx scripts/generate-components.ts",
-    "release": "npm run build && npm publish"
+    "semantic-release": "semantic-release"
   },
   "keywords": [
     "react-native",
@@ -112,6 +112,8 @@
     "@commitlint/config-conventional": "^19.0.0",
     "@react-native/babel-preset": "^0.82.1",
     "@react-native/eslint-config": "^0.74.0",
+    "@semantic-release/changelog": "^6.0.3",
+    "@semantic-release/git": "^10.0.1",
     "@testing-library/react-native": "^12.0.0",
     "@types/jest": "^29.5.0",
     "@types/react": "^18.2.0",
@@ -129,6 +131,7 @@
     "react-native-mmkv": "^3.0.0",
     "react-native-svg": "^15.0.0",
     "react-test-renderer": "^18.2.0",
+    "semantic-release": "^25.0.2",
     "tsx": "^4.20.6",
     "typescript": "^5.4.0"
   },

package/src/IconRenderer.tsx

@@ -4,7 +4,7 @@
  */
 
 import React, { useState, useEffect, useCallback, useRef, useMemo } from 'react';
-import { View, StyleSheet, Animated } from 'react-native';
+import { View, StyleSheet, Animated, Pressable } from 'react-native';
 import { SvgXml } from 'react-native-svg';
 import { CacheManager } from './cache/CacheManager';
 import { fetchIcon } from './network/IconifyAPI';
@@ -32,6 +32,7 @@ export function IconRenderer({
   width: propWidth,
   height: propHeight,
   style,
+  className,
   rotate = 0,
   flip,
   fallback,
@@ -43,6 +44,13 @@ export function IconRenderer({
   onError,
   accessibilityLabel,
   testID,
+  // Press props
+  onPress,
+  onLongPress,
+  onPressIn,
+  onPressOut,
+  disabled,
+  pressedStyle,
   // Animation props
   animate,
   animationDuration,
@@ -186,15 +194,44 @@ export function IconRenderer({
   // Determine if we should show placeholder/fallback
   const shouldShowPlaceholder = (state === 'loading' && showFallback) || state === 'error';
 
+  // Check if icon should be pressable
+  const isPressable = !!(onPress || onLongPress);
+
+  // NativeWind className support - conditional spread to avoid TS errors
+  const nativeWindProps = className ? { className } : {};
+
+  /**
+   * Wraps content with Pressable if onPress/onLongPress is provided
+   */
+  const wrapWithPressable = (content: React.ReactNode) => {
+    if (!isPressable) return content;
+
+    return (
+      <Pressable
+        onPress={onPress}
+        onLongPress={onLongPress}
+        onPressIn={onPressIn}
+        onPressOut={onPressOut}
+        disabled={disabled}
+        accessibilityRole="button"
+        accessibilityState={{ disabled }}
+        style={({ pressed }) => [pressed && pressedStyle]}
+      >
+        {content}
+      </Pressable>
+    );
+  };
+
   // Render placeholder or fallback during loading/error
   if (shouldShowPlaceholder) {
     // Priority: placeholder > fallback
     if (placeholder !== undefined) {
-      return (
+      return wrapWithPressable(
         <View
           style={[{ width: iconWidth, height: iconHeight }, style]}
           accessibilityLabel={accessibilityLabel}
           testID={testID}
+          {...nativeWindProps}
         >
           <PlaceholderFactory
             type={placeholder}
@@ -209,11 +246,12 @@ export function IconRenderer({
 
     // Fallback for backwards compatibility (deprecated)
     if (fallback) {
-      return (
+      return wrapWithPressable(
         <View
           style={[{ width: iconWidth, height: iconHeight }, style]}
           accessibilityLabel={accessibilityLabel}
           testID={testID}
+          {...nativeWindProps}
         >
           {fallback}
         </View>
@@ -221,11 +259,12 @@ export function IconRenderer({
     }
 
     // Return empty view if no placeholder/fallback
-    return (
+    return wrapWithPressable(
       <View
         style={[{ width: iconWidth, height: iconHeight }, style]}
         accessibilityLabel={accessibilityLabel}
         testID={testID}
+        {...nativeWindProps}
       />
     );
   }
@@ -234,7 +273,7 @@ export function IconRenderer({
   if (colorizedSvg) {
     // Render with animation wrapper if animation is enabled
     if (hasAnimation) {
-      return (
+      return wrapWithPressable(
         <Animated.View
           style={[
             styles.container,
@@ -245,6 +284,7 @@ export function IconRenderer({
           accessibilityLabel={accessibilityLabel}
           accessibilityRole="image"
           testID={testID}
+          {...nativeWindProps}
         >
           <SvgXml xml={colorizedSvg} width={iconWidth} height={iconHeight} />
         </Animated.View>
@@ -252,7 +292,7 @@ export function IconRenderer({
     }
 
     // Render without animation
-    return (
+    return wrapWithPressable(
       <View
         style={[
           styles.container,
@@ -262,6 +302,7 @@ export function IconRenderer({
         accessibilityLabel={accessibilityLabel}
         accessibilityRole="image"
         testID={testID}
+        {...nativeWindProps}
       >
         <SvgXml xml={colorizedSvg} width={iconWidth} height={iconHeight} />
       </View>
@@ -270,11 +311,12 @@ export function IconRenderer({
 
   // Show placeholder immediately if set (no delay), otherwise empty view
   if (placeholder !== undefined && state === 'loading') {
-    return (
+    return wrapWithPressable(
       <View
         style={[{ width: iconWidth, height: iconHeight }, style]}
         accessibilityLabel={accessibilityLabel}
         testID={testID}
+        {...nativeWindProps}
       >
         <PlaceholderFactory
           type={placeholder}
@@ -288,11 +330,12 @@ export function IconRenderer({
   }
 
   // Return empty view while loading (before fallback delay)
-  return (
+  return wrapWithPressable(
     <View
       style={[{ width: iconWidth, height: iconHeight }, style]}
       accessibilityLabel={accessibilityLabel}
       testID={testID}
+      {...nativeWindProps}
     />
   );
 }

package/src/alias/Icon.tsx

@@ -43,6 +43,7 @@ export function Icon({
   width,
   height,
   style,
+  className,
   rotate,
   flip,
   fallback,
@@ -54,6 +55,21 @@ export function Icon({
   onError,
   accessibilityLabel,
   testID,
+  // Press props
+  onPress,
+  onLongPress,
+  onPressIn,
+  onPressOut,
+  disabled,
+  pressedStyle,
+  // Animation props
+  animate,
+  animationDuration,
+  animationLoop,
+  animationEasing,
+  animationDelay,
+  autoPlay,
+  onAnimationComplete,
 }: GenericIconProps) {
   // Get theme defaults
   const { theme } = useIconTheme();
@@ -93,6 +109,7 @@ export function Icon({
       width={width}
       height={height}
       style={style}
+      className={className}
       rotate={mergedRotate}
       flip={mergedFlip}
       fallback={fallback}
@@ -104,6 +121,21 @@ export function Icon({
       onError={onError}
       accessibilityLabel={accessibilityLabel ?? name}
       testID={testID}
+      // Press props
+      onPress={onPress}
+      onLongPress={onLongPress}
+      onPressIn={onPressIn}
+      onPressOut={onPressOut}
+      disabled={disabled}
+      pressedStyle={pressedStyle}
+      // Animation props
+      animate={animate}
+      animationDuration={animationDuration}
+      animationLoop={animationLoop}
+      animationEasing={animationEasing}
+      animationDelay={animationDelay}
+      autoPlay={autoPlay}
+      onAnimationComplete={onAnimationComplete}
     />
   );
 }

package/src/babel/cache-writer.ts

@@ -260,7 +260,7 @@ export async function generateBundle(
   options: BabelPluginOptions,
   projectRoot: string
 ): Promise<void> {
-  const { outputPath = '.rn-iconify-cache', verbose = false } = options;
+  const { outputPath = 'node_modules/.cache/rn-iconify', verbose = false } = options;
 
   if (iconNames.length === 0) {
     if (verbose) {

package/src/babel/index.ts

@@ -21,7 +21,6 @@
  *     ['rn-iconify/babel', {
  *       include: ['mdi:*', 'heroicons:*'],
  *       exclude: ['mdi:test-*'],
- *       outputPath: '.rn-iconify-cache',
  *       verbose: true,
  *     }]
  *   ],

package/src/babel/types.ts

@@ -24,7 +24,7 @@ export interface BabelPluginOptions {
 
   /**
    * Output directory for the generated cache
-   * @default '.rn-iconify-cache'
+   * @default 'node_modules/.cache/rn-iconify'
    */
   outputPath?: string;
 

package/src/cache/CacheManager.ts

@@ -74,9 +74,22 @@ class CacheManagerImpl {
     }
 
     this.bundledIcons = new Map();
+    let skippedCount = 0;
 
     for (const [iconName, data] of Object.entries(bundle.icons)) {
-      this.bundledIcons.set(iconName, data.svg);
+      // Validate icon data has a valid SVG string
+      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;

package/src/cache/DiskCache.ts

@@ -1,14 +1,53 @@
 /**
  * Disk cache using MMKV for persistent icon storage
  * Provides fast synchronous access via JSI
+ *
+ * Supports both react-native-mmkv v3.x and v4.x
  */
 
-import { MMKV } from 'react-native-mmkv';
+import * as MMKVModule from 'react-native-mmkv';
+
+/**
+ * MMKV storage interface (compatible with both v3 and v4)
+ */
+interface MMKVStorage {
+  getString(key: string): string | undefined;
+  set(key: string, value: string | number | boolean): void;
+  getNumber(key: string): number | undefined;
+  contains(key: string): boolean;
+  delete(key: string): void;
+  clearAll(): void;
+  getAllKeys(): string[];
+}
+
+/**
+ * Create MMKV instance compatible with both v3.x and v4.x
+ *
+ * v3.x: import { MMKV } from 'react-native-mmkv' → new MMKV({ id: '...' })
+ * v4.x: import { createMMKV } from 'react-native-mmkv' → createMMKV({ id: '...' })
+ */
+function createStorage(id: string): MMKVStorage {
+  const config = { id };
+
+  // v4.x: createMMKV function exists
+  if ('createMMKV' in MMKVModule && typeof MMKVModule.createMMKV === 'function') {
+    return MMKVModule.createMMKV(config) as MMKVStorage;
+  }
+
+  // v3.x: MMKV is a constructor
+  if ('MMKV' in MMKVModule && typeof MMKVModule.MMKV === 'function') {
+    const MMKVClass = MMKVModule.MMKV as new (config: { id: string }) => MMKVStorage;
+    return new MMKVClass(config);
+  }
+
+  throw new Error(
+    '[rn-iconify] Could not initialize MMKV storage. ' +
+      'Please ensure react-native-mmkv (v3.x or v4.x) is properly installed.'
+  );
+}
 
 // MMKV instance for icon cache
-const storage = new MMKV({
-  id: 'rn-iconify-cache',
-});
+const storage = createStorage('rn-iconify-cache');
 
 // Cache metadata storage
 const META_KEY_PREFIX = '__meta:';

package/src/cli/CLAUDE.md

@@ -0,0 +1,7 @@
+<claude-mem-context>
+# Recent Activity
+
+<!-- This section is auto-generated by claude-mem. Edit content outside the tags. -->
+
+_No recent activity_
+</claude-mem-context>

package/src/cli/commands/bundle.ts

@@ -19,6 +19,52 @@ const ICONIFY_API = 'https://api.iconify.design';
  */
 const FETCH_TIMEOUT = 30000;
 
+/**
+ * Icon data from Iconify API
+ */
+interface IconData {
+  body: string;
+  width?: number;
+  height?: number;
+  left?: number;
+  top?: number;
+  rotate?: number;
+  hFlip?: boolean;
+  vFlip?: boolean;
+}
+
+/**
+ * Build SVG string from Iconify icon data with transformation support
+ */
+function buildSvgFromIconData(data: IconData, width: number, height: number): string {
+  const left = data.left ?? 0;
+  const top = data.top ?? 0;
+  const viewBox = `${left} ${top} ${width} ${height}`;
+
+  // Apply transformations (rotate, hFlip, vFlip)
+  let body = data.body;
+  const transforms: string[] = [];
+
+  if (data.rotate) {
+    const rotation = data.rotate * 90;
+    transforms.push(`rotate(${rotation} ${width / 2} ${height / 2})`);
+  }
+
+  if (data.hFlip || data.vFlip) {
+    const scaleX = data.hFlip ? -1 : 1;
+    const scaleY = data.vFlip ? -1 : 1;
+    const translateX = data.hFlip ? width : 0;
+    const translateY = data.vFlip ? height : 0;
+    transforms.push(`translate(${translateX} ${translateY}) scale(${scaleX} ${scaleY})`);
+  }
+
+  if (transforms.length > 0) {
+    body = `<g transform="${transforms.join(' ')}">${body}</g>`;
+  }
+
+  return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="${viewBox}">${body}</svg>`;
+}
+
 /**
  * Fetch multiple icons with batching
  */
@@ -45,10 +91,10 @@ async function fetchIcons(
 
   // Fetch each prefix batch
   for (const [prefix, names] of byPrefix) {
-    try {
-      const controller = new AbortController();
-      const timeout = setTimeout(() => controller.abort(), FETCH_TIMEOUT);
+    const controller = new AbortController();
+    const timeout = setTimeout(() => controller.abort(), FETCH_TIMEOUT);
 
+    try {
       // Sort names alphabetically (Iconify best practice)
       const sortedNames = [...names].sort();
       const url = `${ICONIFY_API}/${prefix}.json?icons=${sortedNames.join(',')}`;
@@ -58,7 +104,6 @@ async function fetchIcons(
       }
 
       const response = await fetch(url, { signal: controller.signal });
-      clearTimeout(timeout);
 
       if (!response.ok) {
         console.error(`  Failed to fetch ${prefix}: ${response.status}`);
@@ -76,8 +121,7 @@ async function fetchIcons(
         if (iconData) {
           const width = iconData.width ?? defaultWidth;
           const height = iconData.height ?? defaultHeight;
-          const body = iconData.body;
-          const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${width} ${height}">${body}</svg>`;
+          const svg = buildSvgFromIconData(iconData, width, height);
 
           results[`${prefix}:${name}`] = { svg, width, height };
         } else if (verbose) {
@@ -92,6 +136,8 @@ async function fetchIcons(
         console.error(`  Error fetching ${prefix}:`, error);
       }
       processed += names.length;
+    } finally {
+      clearTimeout(timeout);
     }
   }
 

package/src/createIconSet.tsx

@@ -61,6 +61,7 @@ export function createIconSet<T extends string>(
     width,
     height,
     style,
+    className,
     rotate,
     flip,
     fallback,
@@ -72,6 +73,13 @@ export function createIconSet<T extends string>(
     onError,
     accessibilityLabel,
     testID,
+    // Press props
+    onPress,
+    onLongPress,
+    onPressIn,
+    onPressOut,
+    disabled,
+    pressedStyle,
     // Animation props
     animate,
     animationDuration,
@@ -117,6 +125,7 @@ export function createIconSet<T extends string>(
         width={width}
         height={height}
         style={style}
+        className={className}
         rotate={mergedRotate}
         flip={mergedFlip}
         fallback={fallback}
@@ -128,6 +137,14 @@ export function createIconSet<T extends string>(
         onError={onError}
         accessibilityLabel={accessibilityLabel ?? name}
         testID={testID}
+        // Press props
+        onPress={onPress}
+        onLongPress={onLongPress}
+        onPressIn={onPressIn}
+        onPressOut={onPressOut}
+        disabled={disabled}
+        pressedStyle={pressedStyle}
+        // Animation props
         animate={animate}
         animationDuration={animationDuration}
         animationLoop={animationLoop}

package/src/network/IconifyAPI.ts

@@ -62,19 +62,41 @@ async function fetchWithTimeout(
 
 /**
  * Combine multiple AbortSignals into one
+ * Properly cleans up event listeners to prevent memory leaks
  */
 function anySignal(signals: AbortSignal[]): AbortSignal {
   const controller = new AbortController();
 
+  // Check if any signal is already aborted
   for (const signal of signals) {
     if (signal.aborted) {
       controller.abort();
       return controller.signal;
     }
+  }
+
+  // Create abort handlers that we can clean up
+  const abortHandlers: Array<{ signal: AbortSignal; handler: () => void }> = [];
+
+  const cleanup = () => {
+    for (const { signal, handler } of abortHandlers) {
+      signal.removeEventListener('abort', handler);
+    }
+    abortHandlers.length = 0;
+  };
 
-    signal.addEventListener('abort', () => controller.abort(), { once: true });
+  for (const signal of signals) {
+    const handler = () => {
+      cleanup();
+      controller.abort();
+    };
+    abortHandlers.push({ signal, handler });
+    signal.addEventListener('abort', handler);
   }
 
+  // Also cleanup when our controller aborts (from timeout)
+  controller.signal.addEventListener('abort', cleanup, { once: true });
+
   return controller.signal;
 }
 

package/src/types/index.ts

@@ -113,6 +113,81 @@ export interface IconProps<T extends string = string> {
    */
   testID?: string;
 
+  // ─────────────────────────────────────────────────────────────────
+  // Press/Touch Props
+  // ─────────────────────────────────────────────────────────────────
+
+  /**
+   * Called when the icon is pressed.
+   * When provided, the icon is automatically wrapped in a Pressable component.
+   *
+   * @example
+   * ```tsx
+   * <Mdi name="close" onPress={() => console.log('pressed')} />
+   * ```
+   */
+  onPress?: () => void;
+
+  /**
+   * Called when the icon is long pressed.
+   * When provided (along with or without onPress), the icon is wrapped in Pressable.
+   */
+  onLongPress?: () => void;
+
+  /**
+   * Called when press starts (finger down).
+   */
+  onPressIn?: () => void;
+
+  /**
+   * Called when press ends (finger up).
+   */
+  onPressOut?: () => void;
+
+  /**
+   * Whether the icon press is disabled.
+   * Only applicable when onPress or onLongPress is provided.
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * Style applied to the icon when pressed.
+   * Only applicable when onPress or onLongPress is provided.
+   * If not provided, no visual feedback is shown on press.
+   *
+   * @example
+   * ```tsx
+   * <Mdi
+   *   name="settings"
+   *   onPress={() => {}}
+   *   pressedStyle={{ opacity: 0.5, transform: [{ scale: 0.95 }] }}
+   * />
+   * ```
+   */
+  pressedStyle?: StyleProp<ViewStyle>;
+
+  // ─────────────────────────────────────────────────────────────────
+  // NativeWind Support
+  // ─────────────────────────────────────────────────────────────────
+
+  /**
+   * NativeWind/Tailwind CSS class names for styling.
+   * Only works in projects with NativeWind configured.
+   *
+   * @example
+   * ```tsx
+   * <Mdi name="home" className="w-6 h-6 text-blue-500" />
+   * ```
+   *
+   * @see https://www.nativewind.dev/
+   */
+  className?: string;
+
+  // ─────────────────────────────────────────────────────────────────
+  // Animation Props
+  // ─────────────────────────────────────────────────────────────────
+
   /**
    * Animation to apply to the icon
    * Can be a preset ('spin', 'pulse', 'bounce', 'shake', 'ping', 'wiggle')