rn-iconify 2.0.0 → 2.1.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/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/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')