🎨 Icons

Icon color system for ExpoBase with theme-aware colors.

🔧 Icon Colors Setup

ExpoBase uses a dedicated color system for icons that adapts to light and dark themes.

Icon Colors Configuration File

Go to /constants/colors.ts:

export const colors = {
  icons: {
    base: {
      light: '#000000',
      dark: '#FFFFFF',
    },
    primary: {
      light: '#FF6B35',
      dark: '#FF6B35',
    },
    secondary: {
      light: '#374151',
      dark: '#374151',
    },
    success: {
      light: '#10B981',
      dark: '#10B981',
    },
    error: {
      light: '#EF4444',
      dark: '#EF4444',
    },
    warning: {
      light: '#F59E0B',
      dark: '#F59E0B',
    },
    info: {
      light: '#3B82F6',
      dark: '#3B82F6',
    },
    muted: {
      light: '#9CA3AF',
      dark: '#9CA3AF',
    },
  }
}

Icon Colors Hook

Create /hooks/useIconColors.ts:

import { useTheme } from '@/context/ThemeContext';
import { colors } from '@/constants/colors';
 
export const useIconColors = () => {
  const { isDark } = useTheme();
 
  return {
    base: colors.icons.base[isDark ? 'dark' : 'light'],
    primary: colors.icons.primary[isDark ? 'dark' : 'light'],
    secondary: colors.icons.secondary[isDark ? 'dark' : 'light'],
    success: colors.icons.success[isDark ? 'dark' : 'light'],
    error: colors.icons.error[isDark ? 'dark' : 'light'],
    warning: colors.icons.warning[isDark ? 'dark' : 'light'],
    info: colors.icons.info[isDark ? 'dark' : 'light'],
    muted: colors.icons.muted[isDark ? 'dark' : 'light'],
  };
};

📱 Usage

1. Basic Icon Usage

import { SearchX } from 'lucide-react-native';
import { useIconColors } from '@/hooks/useIconColors';
 
export const MyComponent = () => {
  const iconColors = useIconColors();
  
  return (
    <SearchX size={64} color={iconColors.muted} />
  );
};

2. Different Icon States

import { Check, X, AlertTriangle, Info } from 'lucide-react-native';
import { useIconColors } from '@/hooks/useIconColors';
 
export const StatusIcons = () => {
  const iconColors = useIconColors();
  
  return (
    <View style={{ flexDirection: 'row', gap: 16 }}>
      <Check size={24} color={iconColors.success} />
      <X size={24} color={iconColors.error} />
      <AlertTriangle size={24} color={iconColors.warning} />
      <Info size={24} color={iconColors.info} />
    </View>
  );
};

3. Dynamic Icon Colors

import { Heart } from 'lucide-react-native';
import { useIconColors } from '@/hooks/useIconColors';
 
export const LikeButton = ({ isLiked }) => {
  const iconColors = useIconColors();
  
  return (
    <TouchableOpacity>
      <Heart 
        size={24} 
        color={isLiked ? iconColors.error : iconColors.muted}
        fill={isLiked ? iconColors.error : 'transparent'}
      />
    </TouchableOpacity>
  );
};

🎨 Available Icon Colors

Color Types

base - Black/White (theme adaptive)
primary - Orange accent color
secondary - Gray neutral
success - Green for positive actions
error - Red for dangerous/negative actions
warning - Yellow for caution
info - Blue for information
muted - Light gray for inactive elements

Usage Examples

const iconColors = useIconColors();
 
// Navigation icons
<Home size={24} color={iconColors.base} />
 
// Primary actions
<Plus size={24} color={iconColors.primary} />
 
// Status indicators
<CheckCircle size={20} color={iconColors.success} />
<XCircle size={20} color={iconColors.error} />
<AlertCircle size={20} color={iconColors.warning} />
 
// Secondary/inactive
<Settings size={24} color={iconColors.muted} />

🎨 Customization

Change Icon Colors

To modify icon colors, edit the hex values in the colors object:

export const colors = {
  icons: {
    primary: {
      light: '#007AFF',  // iOS blue
      dark: '#007AFF',
    },
    // ... other colors
  }
}

Add Custom Icon Colors

export const colors = {
  icons: {
    // ... existing colors
    custom: {
      light: '#FF69B4',  // Hot pink
      dark: '#FF69B4',
    },
  }
}
 
// Update hook
export const useIconColors = () => {
  const { isDark } = useTheme();
 
  return {
    // ... existing colors
    custom: colors.icons.custom[isDark ? 'dark' : 'light'],
  };
};

🎨 Icon System Ready ✅

Theme-aware icon colors for your entire app!