Adding Icons

Set Up

1. Install the following packages:

npx expo install react-native-svg lucide-react-native

2. Resolve the className strings into icon styles

Add the iconWithClassName function in the ~/lib/icons/iconWithClassName.ts file.

import type { LucideIcon } from 'lucide-react-native';
import { cssInterop } from 'nativewind';

export function iconWithClassName(icon: LucideIcon) {
cssInterop(icon, {
    className: {
    target: 'style',
    nativeStyleToProp: {
        color: true,
        opacity: true,
    },
    },
});
}

3. Create a file for each Icon component

Create Icon Components

Wrap your icon components with iconWithClassName to add a class name to the icon.

Caution

Neglecting to wrap icons with iconWithClassName will prevent you from being able to update the color or opacity props via the className prop.

Create a file for each icon in ~/lib/icons/

Wrap your icon components with iconWithClassName to add a class name to the icon.

First, create a new file in the ~/lib/icons/ directory with the name of the LucideIcon.

Then, in each file:

1. Import the Icon from LucideIcon

2. Import the iconWithClassName function

3. Call the iconWithClassName function and pass the icon as its argument

4. Export the Icon as a named export

Examples

Sun

~/lib/icons/Sun

  import { Sun } from 'lucide-react-native';
  import { iconWithClassName } from './iconWithClassName';
  iconWithClassName(Sun);
  export { Sun };

MoonStar

~/lib/icons/MoonStar

  import { MoonStar } from 'lucide-react-native';
  import { iconWithClassName } from './iconWithClassName';
  iconWithClassName(MoonStar);
  export { MoonStar };