Quick Start
1. Install
npm install @whydrf/nava-icon-react2. Import & Use
import { Home, Search, Add } from '@whydrf/nava-icon-react'
function App() {
return (
<div>
<Home />
<Search size={24} color="gray" />
<Add size={32} color="#ff6600" />
</div>
)
}3. Customize
<Home size={32} color="blue" strokeWidth={0.5} className="my-icon" title="Home" />
<Home size={32} color="#ff6600" />
<Home size={32} color="rgb(0, 150, 136)" />4. Switch Mode
Use the mode prop to switch between regular (stroke) and filled (solid) variants.
<CheckCircle mode="regular" /> {/* stroke outline */}
<CheckCircle mode="filled" /> {/* solid fill */}Props
| Prop | Type | Default |
|---|---|---|
| size | number | 24 |
| color | string | currentColor |
| strokeWidth | number | 0.5 |
| mode | "regular" | "filled" | "regular" |
| className | string | — |
| title | string | — |