React

Installation

npm install @whydrf/nava-icon-react

Static Import

import { HomeIcon, SearchIcon, SettingsIcon } from '@whydrf/nava-icon-react'

function App() {
  return (
    <div>
      <HomeIcon />
      <SearchIcon size={24} color="gray" />
      <SettingsIcon size={32} color="blue" />
    </div>
  )
}

Mode

Switch between regular (stroke) and filled (solid) variants with the mode prop.

import { CheckCircleIcon, HomeIcon } from '@whydrf/nava-icon-react'

<CheckCircleIcon mode="regular" />  {/* stroke outline */}
<CheckCircleIcon mode="filled" />   {/* solid fill */}
<HomeIcon mode="filled" color="blue" />

Dynamic Import

import { Icon } from '@whydrf/nava-icon-react'

function App() {
  return (
    <div>
      <Icon name="home" />
      <Icon name="search" size={24} color="gray" />
      <Icon name="check-circle" mode="filled" />
    </div>
  )
}

Global Configuration

Set default icon props once with NavaIconProvider. All icons within the provider inherit these values.

import { NavaIconProvider, HomeIcon, SearchIcon } from '@whydrf/nava-icon-react'

function App() {
  return (
    <NavaIconProvider size={20} color="gray" strokeWidth={1.5}>
      <HomeIcon />              {/* size=20, color="gray", strokeWidth=1.5 */}
      <SearchIcon size={24} />  {/* size=24 overrides — rest inherited */}
    </NavaIconProvider>
  )
}

Component props always override provider values. Use useNavaIconConfig to read the current config:

import { useNavaIconConfig } from '@whydrf/nava-icon-react'

function DebugConfig() {
  const config = useNavaIconConfig()
  return <pre>{JSON.stringify(config)}</pre>
}

Tree Shaking

Static imports are fully tree-shakeable. Only imported icons are included in your bundle.

// ~129B - only HomeIcon
import { HomeIcon } from '@whydrf/nava-icon-react'

// ~20KB - all icons
import * as Icons from '@whydrf/nava-icon-react'