Component

IconByVariant

Local SVG icon registry renderer.

←→

React Native

Icon registry

Render local SVG icons by registry key.

check

cancel

send

success

error

import { View } from 'react-native';
import { IconByVariant, Text, useTheme } from '@sohantalukder/rn-kit';

export function SearchHint() {
  const { gutters, layout } = useTheme();

  return (
    <View style={[layout.row, layout.itemsCenter, gutters.gap_8]}>
      <IconByVariant path="search" height={24} width={24} />
      <Text color="secondary">Search customers</Text>
    </View>
  );
}

Live component

registry gridcustom colordifferent sizes

Use registry keys for consistent icons.
Pass accessible labels on the surrounding action.

Usage

import { IconByVariant } from '@sohantalukder/rn-kit';

import { View } from 'react-native';
import { IconByVariant, Text, useTheme } from '@sohantalukder/rn-kit';

export function SearchHint() {
  const { gutters, layout } = useTheme();

  return (
    <View style={[layout.row, layout.itemsCenter, gutters.gap_8]}>
      <IconByVariant path="search" height={24} width={24} />
      <Text color="secondary">Search customers</Text>
    </View>
  );
}

Props

These are the most important props to consider first. The custom preview highlights the common setup before you move into app-specific states.

PropTypeDefaultDescription

pathIconKey-Registry key used to resolve the local SVG icon.

heightnumber | string-Sets the rendered height of the component.

widthnumber | string-Sets the rendered width of the component.

colorColorValuethemeOverrides the component color while preserving layout and behavior.

Theme

IconByVariant reads from the rn-kit theme context where applicable. Wrap your app with ThemeProvider and prefer package theme tokens over hardcoded screen-level colors.

Variants

registry grid
custom color
different sizes

Best Practices

Use registry keys for consistent icons.
Pass accessible labels on the surrounding action.