Icons

rn-inkpad has no icon dependency. Every prop that expects an icon (icon, rightIcon, checkedIcon, iconOnCompleted, closeIcon, action icons…) accepts an IconProp:

type IconProp = React.ReactElement | React.ComponentType<IconProps>;

type IconProps = {
  size?: number;
  color?: string;
  width?: number; // mirrors size, for plain SVG components
  height?: number;
};

Use whichever icon set you already have: lucide-react-native, @expo/vector-icons, react-native-vector-icons, an SVG component from react-native-svg or SVGR, or anything else that renders.

Pass a component

The library renders it with the size and color that match the component state (text color, disabled, selected, completed…). This is the recommended way.

import {House} from 'lucide-react-native';
import {Button} from 'rn-inkpad';

<Button text="Home" icon={House} />;

Pass an element

The element is rendered exactly as you wrote it. Use it when you want full control.

import {Heart} from 'lucide-react-native';

<Button
  text="Like"
  icon={<Heart size={18} color="#DB504A" fill="#DB504A" />}
/>;

Your own SVG

Any component that accepts size/color (or width/height) works, including the components generated by react-native-svg-transformer.

import Svg, {Path} from 'react-native-svg';

const Logo = ({size = 24, color = '#000'}) => (
  <Svg width={size} height={size} viewBox="0 0 24 24">
    <Path d="M8 12l3 3 5-6" stroke={color} strokeWidth="2" fill="none" />
  </Svg>
);

<Input label="Email" icon={Logo} />;

The Icon helper

Icon renders an IconProp the same way the library does internally. Handy to keep sizes consistent in your own screens.

import {Icon} from 'rn-inkpad';

<Icon icon={Logo} size={32} color="#576DEC" />;

renderIcon(icon, {size, color}) is exported too, for custom components.

Built-in defaults

When a component needs an icon and you did not provide one, a tiny built-in glyph drawn with plain views is used: checkbox, radio, chevrons, close, plus, menu, eye, search, star and heart. Every one of them can be replaced through the matching prop:

Component	Props
CheckBox	checkedIcon, unCheckedIcon
RadioButtons	checkedIcon, unCheckedIcon
Rating	icons={{full, half, empty}}
StarRating	icons={{full, empty}}
Input	showPasswordIcon, hidePasswordIcon, rightIcon
FloatingActionButton	icon, openIcon, closeIcon
ActionSheet	closeIcon, cancelIcon
DrawerNavigation	icon, closeIcon, expandIcon, collapseIcon

Migrating from 1.x

Version 1.x accepted Ionicons names (icon="home"). Replace the string with a component or an element from your icon library. react-native-vector-icons is no longer installed for you; if you still want Ionicons:

import Ionicons from '@expo/vector-icons/Ionicons';

const Home = props => <Ionicons name="home" {...props} />;

<Button text="Home" icon={Home} />;