Using Icons

Static Imports (Recommended)

Import individual icons for tree shaking support. Only the icons you import are included in your bundle.

import { Home, Search } from '@whydrf/nava-icon-react'
<Home size={24} />
<Search color="gray" />

Switching Mode

Every icon supports a mode prop to switch between regular (stroke) and filled (solid) variants.

import { CheckCircle, Home } from '@whydrf/nava-icon-react'
<CheckCircle mode="regular" />  {/* stroke outline */}
<CheckCircle mode="filled" />   {/* solid fill */}
<Home mode="filled" color="blue" />

Dynamic Runtime API

Use the Icon component when icon names are determined at runtime.

import { Icon } from '@whydrf/nava-icon-react'
<Icon name="home" size={24} />
<Icon name={dynamicName} size={24} mode="filled" />

Comparison