@rn-shad/icons

Icon components and utilities for rn-shad with Lucide and Heroicons support.

Installation

npm install @rn-shad/icons react-native-svg

Usage

IconWrapper

Basic icon wrapper with size and color customization.

import { IconWrapper } from '@rn-shad/icons';
import { Heart } from 'lucide-react-native';

function MyComponent() {
  return (
    <IconWrapper
      icon={Heart}
      size={24}
      color="#000"
    />
  );
}

AnimatedIcon

Animated icon with Reanimated support.

import { AnimatedIcon } from '@rn-shad/icons';
import { Star } from 'lucide-react-native';
import { useSharedValue, withSpring } from 'react-native-reanimated';

function FavoriteButton() {
  const scale = useSharedValue(1);

  const handlePress = () => {
    scale.value = withSpring(1.5);
  };

  return (
    <AnimatedIcon
      icon={Star}
      size={24}
      color="#FFD700"
      animatedStyle={{
        transform: [{ scale: scale.value }],
      }}
      onPress={handlePress}
    />
  );
}

Direct Lucide Import

This package re-exports all Lucide icons for convenience:

import { Heart, Star, Menu, X } from '@rn-shad/icons';

function MyComponent() {
  return (
    <>
      <Heart size={24} color="#e74c3c" />
      <Star size={24} color="#f39c12" />
    </>
  );
}

Supported Icon Libraries

• Lucide React Native (450+ icons) - Primary, re-exported
• React Native Heroicons - Secondary, available as peer dependency

Props

IconWrapper Props

• icon - Lucide icon component
• size - Icon size (default: 24)
• color - Icon color (default: 'currentColor')
• strokeWidth - Stroke width (default: 2)

AnimatedIcon Props

All IconWrapper props plus:

• animatedStyle - Reanimated animated style object
• onPress - Press handler
• Other Pressable props

License

MIT