rn-iconify 1.0.0 → 2.0.0

package/src/theme/useIconTheme.ts

@@ -0,0 +1,119 @@
+/**
+ * useIconTheme Hook
+ * Access and modify icon theme from any component
+ */
+
+import { useContext, useMemo } from 'react';
+import { IconThemeContext } from './context';
+import type { IconTheme, IconThemeContextValue } from './types';
+import { DEFAULT_ICON_THEME } from './types';
+
+/**
+ * useIconTheme
+ *
+ * Hook to access and modify the icon theme.
+ * Must be used within an IconThemeProvider.
+ *
+ * @returns Current theme and setTheme function
+ *
+ * @example Access current theme
+ * ```tsx
+ * function MyComponent() {
+ *   const { theme } = useIconTheme();
+ *   console.log('Current icon size:', theme.size);
+ *   return <Text>Icon color: {theme.color}</Text>;
+ * }
+ * ```
+ *
+ * @example Update theme dynamically
+ * ```tsx
+ * function ThemeToggle() {
+ *   const { theme, setTheme } = useIconTheme();
+ *
+ *   const toggleDarkMode = () => {
+ *     setTheme(prev => ({
+ *       ...prev,
+ *       color: prev.color === '#000000' ? '#ffffff' : '#000000',
+ *     }));
+ *   };
+ *
+ *   return <Button onPress={toggleDarkMode} title="Toggle Dark Mode" />;
+ * }
+ * ```
+ */
+export function useIconTheme(): IconThemeContextValue {
+  const context = useContext(IconThemeContext);
+  return context;
+}
+
+/**
+ * useIconThemeValue
+ *
+ * Get a specific theme value with automatic fallback to default.
+ * Useful when you need just one property.
+ *
+ * @param key - Theme property key
+ * @returns The theme value or default
+ *
+ * @example
+ * ```tsx
+ * function MyIcon() {
+ *   const defaultSize = useIconThemeValue('size');
+ *   const defaultColor = useIconThemeValue('color');
+ *   return <Text>Default: {defaultSize}px, {defaultColor}</Text>;
+ * }
+ * ```
+ */
+export function useIconThemeValue<K extends keyof IconTheme>(
+  key: K
+): NonNullable<IconTheme[K]> | undefined {
+  const { theme } = useIconTheme();
+  const value = theme[key];
+  if (value !== undefined) {
+    return value as NonNullable<IconTheme[K]>;
+  }
+  const defaultValue = DEFAULT_ICON_THEME[key as keyof typeof DEFAULT_ICON_THEME];
+  return defaultValue as NonNullable<IconTheme[K]> | undefined;
+}
+
+/**
+ * useMergedIconProps
+ *
+ * Merges component props with theme defaults.
+ * Props take precedence over theme values.
+ *
+ * @param props - Component props
+ * @returns Merged props with theme defaults
+ *
+ * @example
+ * ```tsx
+ * function CustomIcon({ size, color, ...rest }: IconProps) {
+ *   const mergedProps = useMergedIconProps({ size, color });
+ *   // mergedProps.size = props.size ?? theme.size ?? 24
+ *   // mergedProps.color = props.color ?? theme.color ?? '#000000'
+ * }
+ * ```
+ */
+export function useMergedIconProps<T extends Partial<IconTheme>>(
+  props: T
+): T & Required<Pick<IconTheme, 'size' | 'color'>> & Omit<IconTheme, 'size' | 'color'> {
+  const { theme } = useIconTheme();
+
+  return useMemo(() => {
+    return {
+      ...props,
+      size: props.size ?? theme.size ?? DEFAULT_ICON_THEME.size,
+      color: props.color ?? theme.color ?? DEFAULT_ICON_THEME.color,
+      placeholder: props.placeholder ?? theme.placeholder,
+      placeholderColor:
+        props.placeholderColor ?? theme.placeholderColor ?? DEFAULT_ICON_THEME.placeholderColor,
+      placeholderDuration:
+        props.placeholderDuration ??
+        theme.placeholderDuration ??
+        DEFAULT_ICON_THEME.placeholderDuration,
+      rotate: props.rotate ?? theme.rotate ?? DEFAULT_ICON_THEME.rotate,
+      flip: props.flip ?? theme.flip,
+      fallbackDelay: props.fallbackDelay ?? theme.fallbackDelay ?? DEFAULT_ICON_THEME.fallbackDelay,
+    } as T & Required<Pick<IconTheme, 'size' | 'color'>> & Omit<IconTheme, 'size' | 'color'>;
+  }, [props, theme]);
+}

package/src/types/index.ts

@@ -1,5 +1,7 @@
 import type { ReactNode } from 'react';
 import type { ViewStyle, StyleProp } from 'react-native';
+import type { PlaceholderType } from '../placeholder/types';
+import type { AnimationType, AnimationEasing } from '../animated/types';
 
 /**
  * Icon transformation rotation values
@@ -61,15 +63,36 @@ export interface IconProps<T extends string = string> {
 
   /**
    * Fallback component shown while the icon is loading
+   * @deprecated Use `placeholder` instead for built-in animated placeholders
    */
   fallback?: ReactNode;
 
   /**
-   * Delay in milliseconds before showing the fallback
+   * Delay in milliseconds before showing the fallback/placeholder
    * @default 0
    */
   fallbackDelay?: number;
 
+  /**
+   * Placeholder shown while the icon is loading
+   * Can be a preset ('skeleton', 'pulse', 'shimmer') or a custom ReactNode
+   * @example 'shimmer'
+   * @example <ActivityIndicator size="small" />
+   */
+  placeholder?: PlaceholderType;
+
+  /**
+   * Placeholder background color
+   * @default '#E1E1E1'
+   */
+  placeholderColor?: string;
+
+  /**
+   * Placeholder animation duration in milliseconds
+   * @default 1000
+   */
+  placeholderDuration?: number;
+
   /**
    * Called when the icon loads successfully
    */
@@ -89,6 +112,48 @@ export interface IconProps<T extends string = string> {
    * Test ID for testing purposes
    */
   testID?: string;
+
+  /**
+   * Animation to apply to the icon
+   * Can be a preset ('spin', 'pulse', 'bounce', 'shake', 'ping', 'wiggle')
+   * or a custom animation configuration
+   * @example 'spin'
+   * @example { type: 'rotate', duration: 2000, easing: 'linear' }
+   */
+  animate?: AnimationType;
+
+  /**
+   * Animation duration in milliseconds (overrides preset default)
+   */
+  animationDuration?: number;
+
+  /**
+   * Whether the animation should loop
+   * @default true for most presets
+   */
+  animationLoop?: boolean;
+
+  /**
+   * Animation easing function
+   */
+  animationEasing?: AnimationEasing;
+
+  /**
+   * Delay before animation starts (ms)
+   * @default 0
+   */
+  animationDelay?: number;
+
+  /**
+   * Whether to start animation automatically
+   * @default true
+   */
+  autoPlay?: boolean;
+
+  /**
+   * Callback when animation completes (for non-looping animations)
+   */
+  onAnimationComplete?: () => void;
 }
 
 /**
@@ -149,3 +214,15 @@ export interface IconRendererProps extends Omit<IconProps<string>, 'name'> {
    */
   iconName: string;
 }
+
+// Re-export placeholder types for convenience
+export type { PlaceholderType, PlaceholderConfig, PlaceholderPreset } from '../placeholder/types';
+
+// Re-export animation types for convenience
+export type {
+  AnimationType,
+  AnimationPreset,
+  AnimationConfig,
+  AnimationEasing,
+  AnimationControls,
+} from '../animated/types';

package/lib/commonjs/components/Phosphor.js

@@ -1,493 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Phosphor = void 0;
-var _createIconSet = require("../createIconSet");
-/**
- * Phosphor Icons (ph)
- * https://icon-sets.iconify.design/ph/
- *
- * 7000+ icons - MIT License
- * Flexible icon family for interfaces, diagrams, presentations
- *
- * @example
- * ```tsx
- * import { Phosphor } from 'rn-iconify';
- * <Phosphor name="house" size={24} color="blue" />
- * ```
- */
-
-// Phosphor icons (full list generated via scripts/generate-components.ts)
-const phosphorIconNames = {
-  // Navigation & Actions (Regular weight)
-  house: true,
-  'house-simple': true,
-  list: true,
-  x: true,
-  check: true,
-  plus: true,
-  minus: true,
-  'arrow-left': true,
-  'arrow-right': true,
-  'arrow-up': true,
-  'arrow-down': true,
-  'caret-left': true,
-  'caret-right': true,
-  'caret-up': true,
-  'caret-down': true,
-  'caret-double-left': true,
-  'caret-double-right': true,
-  'caret-double-up': true,
-  'caret-double-down': true,
-  'arrow-square-left': true,
-  'arrow-square-right': true,
-  'arrow-square-up': true,
-  'arrow-square-down': true,
-  'arrow-circle-left': true,
-  'arrow-circle-right': true,
-  'arrow-circle-up': true,
-  'arrow-circle-down': true,
-  // User & Account
-  user: true,
-  'user-circle': true,
-  'user-square': true,
-  'user-plus': true,
-  'user-minus': true,
-  'user-check': true,
-  users: true,
-  'users-three': true,
-  'users-four': true,
-  'identification-card': true,
-  'identification-badge': true,
-  // Communication
-  envelope: true,
-  'envelope-open': true,
-  'envelope-simple': true,
-  'envelope-simple-open': true,
-  phone: true,
-  'phone-call': true,
-  'phone-incoming': true,
-  'phone-outgoing': true,
-  'phone-slash': true,
-  chat: true,
-  'chat-circle': true,
-  'chat-dots': true,
-  'chat-text': true,
-  chats: true,
-  'chats-circle': true,
-  'paper-plane': true,
-  'paper-plane-right': true,
-  'paper-plane-tilt': true,
-  // Media
-  play: true,
-  'play-circle': true,
-  pause: true,
-  'pause-circle': true,
-  stop: true,
-  'stop-circle': true,
-  'skip-back': true,
-  'skip-forward': true,
-  rewind: true,
-  'fast-forward': true,
-  'speaker-high': true,
-  'speaker-low': true,
-  'speaker-none': true,
-  'speaker-slash': true,
-  'speaker-simple-high': true,
-  'speaker-simple-low': true,
-  'speaker-simple-none': true,
-  'speaker-simple-slash': true,
-  'music-note': true,
-  'music-notes': true,
-  'music-notes-plus': true,
-  headphones: true,
-  microphone: true,
-  'microphone-slash': true,
-  'video-camera': true,
-  'video-camera-slash': true,
-  // Files & Folders
-  file: true,
-  'file-text': true,
-  'file-plus': true,
-  'file-minus': true,
-  'file-arrow-down': true,
-  'file-arrow-up': true,
-  files: true,
-  folder: true,
-  'folder-open': true,
-  'folder-plus': true,
-  'folder-minus': true,
-  'folder-simple': true,
-  'folder-simple-plus': true,
-  'folder-simple-minus': true,
-  download: true,
-  'download-simple': true,
-  upload: true,
-  'upload-simple': true,
-  'floppy-disk': true,
-  archive: true,
-  'archive-box': true,
-  trash: true,
-  'trash-simple': true,
-  // UI Elements
-  gear: true,
-  'gear-six': true,
-  sliders: true,
-  'sliders-horizontal': true,
-  'magnifying-glass': true,
-  'magnifying-glass-plus': true,
-  'magnifying-glass-minus': true,
-  funnel: true,
-  'funnel-simple': true,
-  'sort-ascending': true,
-  'sort-descending': true,
-  'list-bullets': true,
-  'list-numbers': true,
-  'list-checks': true,
-  'squares-four': true,
-  'grid-four': true,
-  layout: true,
-  sidebar: true,
-  'sidebar-simple': true,
-  'arrows-out': true,
-  'arrows-in': true,
-  'dots-three': true,
-  'dots-three-vertical': true,
-  'dots-three-outline': true,
-  'dots-three-outline-vertical': true,
-  'dots-six': true,
-  'dots-six-vertical': true,
-  'dots-nine': true,
-  // Alerts & Status
-  warning: true,
-  'warning-circle': true,
-  'warning-octagon': true,
-  info: true,
-  question: true,
-  'check-circle': true,
-  'check-square': true,
-  'x-circle': true,
-  'x-square': true,
-  bell: true,
-  'bell-simple': true,
-  'bell-ringing': true,
-  'bell-slash': true,
-  // Social
-  heart: true,
-  'heart-straight': true,
-  'heart-break': true,
-  star: true,
-  'star-half': true,
-  'star-four': true,
-  'thumbs-up': true,
-  'thumbs-down': true,
-  share: true,
-  'share-network': true,
-  export: true,
-  bookmark: true,
-  'bookmark-simple': true,
-  bookmarks: true,
-  'bookmarks-simple': true,
-  flag: true,
-  'flag-banner': true,
-  trophy: true,
-  medal: true,
-  crown: true,
-  'crown-simple': true,
-  // Editing
-  pencil: true,
-  'pencil-simple': true,
-  'pencil-line': true,
-  pen: true,
-  'pen-nib': true,
-  'pen-nib-straight': true,
-  eraser: true,
-  copy: true,
-  'copy-simple': true,
-  clipboard: true,
-  'clipboard-text': true,
-  scissors: true,
-  'text-aa': true,
-  'text-b': true,
-  'text-italic': true,
-  'text-underline': true,
-  'text-strikethrough': true,
-  'text-align-left': true,
-  'text-align-center': true,
-  'text-align-right': true,
-  'text-align-justify': true,
-  // Shopping
-  'shopping-cart': true,
-  'shopping-cart-simple': true,
-  'shopping-bag': true,
-  'shopping-bag-open': true,
-  handbag: true,
-  'handbag-simple': true,
-  'credit-card': true,
-  wallet: true,
-  receipt: true,
-  tag: true,
-  'tag-simple': true,
-  barcode: true,
-  'qr-code': true,
-  percent: true,
-  'currency-dollar': true,
-  'currency-dollar-simple': true,
-  // Date & Time
-  calendar: true,
-  'calendar-blank': true,
-  'calendar-check': true,
-  'calendar-plus': true,
-  'calendar-minus': true,
-  'calendar-x': true,
-  clock: true,
-  'clock-afternoon': true,
-  timer: true,
-  alarm: true,
-  hourglass: true,
-  'hourglass-simple': true,
-  watch: true,
-  // Location
-  'map-pin': true,
-  'map-pin-line': true,
-  'map-trifold': true,
-  'navigation-arrow': true,
-  compass: true,
-  globe: true,
-  'globe-simple': true,
-  'globe-hemisphere-east': true,
-  'globe-hemisphere-west': true,
-  // Weather
-  sun: true,
-  'sun-dim': true,
-  moon: true,
-  'moon-stars': true,
-  cloud: true,
-  'cloud-sun': true,
-  'cloud-moon': true,
-  'cloud-rain': true,
-  'cloud-snow': true,
-  'cloud-lightning': true,
-  'cloud-fog': true,
-  umbrella: true,
-  'umbrella-simple': true,
-  wind: true,
-  thermometer: true,
-  'thermometer-simple': true,
-  drop: true,
-  drops: true,
-  snowflake: true,
-  rainbow: true,
-  // Security
-  lock: true,
-  'lock-simple': true,
-  'lock-open': true,
-  'lock-simple-open': true,
-  key: true,
-  password: true,
-  shield: true,
-  'shield-check': true,
-  'shield-checkered': true,
-  'shield-slash': true,
-  eye: true,
-  'eye-slash': true,
-  'eye-closed': true,
-  fingerprint: true,
-  'fingerprint-simple': true,
-  // Tech & Devices
-  'device-mobile': true,
-  'device-mobile-speaker': true,
-  'device-tablet': true,
-  'device-tablet-speaker': true,
-  laptop: true,
-  desktop: true,
-  monitor: true,
-  television: true,
-  'television-simple': true,
-  printer: true,
-  keyboard: true,
-  mouse: true,
-  cpu: true,
-  'hard-drive': true,
-  'hard-drives': true,
-  database: true,
-  'wifi-high': true,
-  'wifi-low': true,
-  'wifi-medium': true,
-  'wifi-none': true,
-  'wifi-slash': true,
-  bluetooth: true,
-  'bluetooth-connected': true,
-  'bluetooth-slash': true,
-  'battery-empty': true,
-  'battery-low': true,
-  'battery-medium': true,
-  'battery-high': true,
-  'battery-full': true,
-  'battery-charging': true,
-  'battery-charging-vertical': true,
-  plug: true,
-  plugs: true,
-  'plugs-connected': true,
-  power: true,
-  // Images & Design
-  camera: true,
-  'camera-slash': true,
-  image: true,
-  'image-square': true,
-  images: true,
-  'images-square': true,
-  palette: true,
-  'paint-brush': true,
-  'paint-brush-broad': true,
-  'paint-brush-household': true,
-  'paint-bucket': true,
-  'paint-roller': true,
-  'drop-half': true,
-  'drop-half-bottom': true,
-  eyedropper: true,
-  'eyedropper-sample': true,
-  crop: true,
-  'arrows-out-simple': true,
-  'arrows-clockwise': true,
-  'arrows-counter-clockwise': true,
-  'flip-horizontal': true,
-  'flip-vertical': true,
-  stack: true,
-  'stack-simple': true,
-  square: true,
-  circle: true,
-  triangle: true,
-  hexagon: true,
-  octagon: true,
-  polygon: true,
-  rectangle: true,
-  parallelogram: true,
-  // Misc
-  link: true,
-  'link-simple': true,
-  'link-break': true,
-  'link-simple-break': true,
-  'arrow-square-out': true,
-  paperclip: true,
-  'paperclip-horizontal': true,
-  code: true,
-  'code-simple': true,
-  terminal: true,
-  'terminal-window': true,
-  hash: true,
-  'hash-straight': true,
-  lightning: true,
-  'lightning-slash': true,
-  flame: true,
-  fire: true,
-  'fire-simple': true,
-  lightbulb: true,
-  'lightbulb-filament': true,
-  rocket: true,
-  'rocket-launch': true,
-  target: true,
-  crosshair: true,
-  'crosshair-simple': true,
-  activity: true,
-  pulse: true,
-  heartbeat: true,
-  'trend-up': true,
-  'trend-down': true,
-  'chart-bar': true,
-  'chart-bar-horizontal': true,
-  'chart-line': true,
-  'chart-line-up': true,
-  'chart-pie': true,
-  'chart-pie-slice': true,
-  'chart-donut': true,
-  spinner: true,
-  'spinner-gap': true,
-  'circle-notch': true,
-  repeat: true,
-  'repeat-once': true,
-  shuffle: true,
-  'shuffle-simple': true,
-  infinity: true,
-  command: true,
-  option: true,
-  backspace: true,
-  'sign-in': true,
-  'sign-out': true,
-  door: true,
-  'door-open': true,
-  gift: true,
-  confetti: true,
-  'party-popper': true,
-  coffee: true,
-  'beer-bottle': true,
-  wine: true,
-  martini: true,
-  'fork-knife': true,
-  knife: true,
-  'cooking-pot': true,
-  'bowl-food': true,
-  hamburger: true,
-  pizza: true,
-  pill: true,
-  'first-aid': true,
-  'first-aid-kit': true,
-  stethoscope: true,
-  syringe: true,
-  briefcase: true,
-  buildings: true,
-  building: true,
-  'building-office': true,
-  storefront: true,
-  bank: true,
-  factory: true,
-  warehouse: true,
-  garage: true,
-  car: true,
-  'car-simple': true,
-  taxi: true,
-  bus: true,
-  train: true,
-  'train-simple': true,
-  airplane: true,
-  'airplane-takeoff': true,
-  'airplane-landing': true,
-  boat: true,
-  bicycle: true,
-  motorcycle: true,
-  scooter: true,
-  footprints: true,
-  person: true,
-  'person-simple': true,
-  'person-simple-run': true,
-  'person-simple-walk': true,
-  baby: true,
-  cat: true,
-  dog: true,
-  bird: true,
-  fish: true,
-  'fish-simple': true,
-  butterfly: true,
-  bug: true,
-  'bug-beetle': true,
-  'bug-droid': true,
-  spider: true,
-  leaf: true,
-  flower: true,
-  'flower-lotus': true,
-  'flower-tulip': true,
-  tree: true,
-  'tree-evergreen': true,
-  'tree-palm': true,
-  plant: true,
-  'potted-plant': true,
-  cactus: true,
-  mountains: true,
-  mountain: true,
-  waves: true,
-  wave: true
-};
-const Phosphor = exports.Phosphor = (0, _createIconSet.createIconSet)('ph', phosphorIconNames);
-//# sourceMappingURL=Phosphor.js.map