npm package: @nukeplatform/nuke-icons
Description: Cross-platform icon library for React (web) and React Native. Ships 1,500+ Lucide icons, 258 sportsbook icons, and 25+ custom icon sets with automatic platform resolution.
Latest version: 1.2.1

# @nukeplatform/nuke-icons

Cross-platform icon library for React (web) and React Native. Ships 1,500+ Lucide icons, 258 sportsbook icons, and 25+ custom icon sets with automatic platform resolution.

## Installation

```bash
npm install @nukeplatform/nuke-icons
# or
pnpm add @nukeplatform/nuke-icons
# or
yarn add @nukeplatform/nuke-icons
```

### Web projects

No additional dependencies required. Lucide icons are loaded from `lucide-react` (bundled).

### React Native projects

Install the optional peer dependencies:

```bash
npm install react-native react-native-svg @tamagui/lucide-icons
```

## Usage

### Lucide icons

All [Lucide icons](https://lucide.dev/icons/) are available via the `/lucide` subpath:

```tsx
import { Home, Settings, User, ChevronDown } from '@nukeplatform/nuke-icons/lucide'

function App() {
  return <Home size={24} color="#333" />
}
```

**Props:**

| Prop    | Type     | Default          | Description                    |
| ------- | -------- | ---------------- | ------------------------------ |
| `size`  | `number` | `20`             | Icon width and height in px    |
| `color` | `string` | `'currentColor'` | Any valid CSS color            |

On web, icons are async-loaded from `lucide-react` with an empty placeholder shown during load. On native, icons load synchronously from `@tamagui/lucide-icons`.

### Custom icons

```tsx
import {
  ClockArrow,
  BonusWalletIcon,
  NukeLogo,
  Browse,
  QRMock,
  SafariIcon,
  ChromeIcon,
} from '@nukeplatform/nuke-icons'

<ClockArrow size={24} color="#52A9FF" />
<NukeLogo width={65} color="#0954A5" />
<Browse width={24} height={24} color="#52A9FF" />
```

### Currency icons

Individual currency icons and a dynamic mapper utility:

```tsx
import {
  BitcoinIcon,
  EthereumIcon,
  UsdtIcon,
  getCurrencyIcon,
  CURRENCY_COLORS,
  FallbackCurrencyIcon,
} from '@nukeplatform/nuke-icons'

// Direct usage
<BitcoinIcon size={28} />
<EthereumIcon size={28} />

// Dynamic lookup by symbol
const icon = getCurrencyIcon('BTC', 28)
// Supports aliases: 'BTC', 'BITCOIN', 'ETH', 'ETHEREUM', 'USDT', 'TETHER', etc.

// Fallback for unsupported currencies
<FallbackCurrencyIcon size={28} symbol="?" color="#888" />
```

**Supported currencies:** BTC, ETH, USDT, USDC, BNB, XRP, ADA, SOL, DOT, DOGE, MATIC, LTC, TRX, AVAX, LINK, USD, EUR, GBP, JPY, CNY, AUD, CAD, CHF, INR, RUB, KRW, BRL, ZAR, MXN, and more.

### Social icons

Brand-colored social/auth provider icons:

```tsx
import {
  GoogleIcon,
  FacebookIcon,
  AppleIcon,
  TwitchIcon,
  VkIcon,
  TelegramIcon,
  WhatsAppIcon,
  TwitterIcon,
  GitHubIcon,
  DiscordIcon,
} from '@nukeplatform/nuke-icons'

<GoogleIcon size={20} />
<FacebookIcon size={20} />
<DiscordIcon size={20} />
```

**Props:**

| Prop   | Type     | Default | Description                 |
| ------ | -------- | ------- | --------------------------- |
| `size` | `number` | `20`    | Icon width and height in px |

Each icon uses its official brand color (e.g. Google multicolor, Facebook blue, Discord blurple).

### Toast icons

```tsx
import {
  ToastSuccessIcon,
  ToastErrorIcon,
  ToastWarningIcon,
  ToastInfoIcon,
} from '@nukeplatform/nuke-icons'

<ToastSuccessIcon size={24} />
```

### Navigation icons

```tsx
import { SlotsIcon, LiveCasinoIcon, SportsIcon } from '@nukeplatform/nuke-icons'

<SlotsIcon size={24} color="#EAF6FF" />
```

### Sportsbook icons

258 sport and esport icons for sportsbook platforms:

```tsx
import {
  SoccerIcon,
  BasketballIcon,
  TennisIcon,
  Dota2Icon,
  CounterstrikeIcon,
  BoxingIcon,
  IcehockeyIcon,
  FortniteIcon,
} from '@nukeplatform/nuke-icons'

<SoccerIcon size={24} color="#333" />
<BasketballIcon size={24} color="#E85D04" />
<Dota2Icon size={20} />
```

**Props:**

| Prop    | Type     | Default      | Description                 |
| ------- | -------- | ------------ | --------------------------- |
| `size`  | `number` | `24`         | Icon width and height in px |
| `color` | `string` | `'#000000'`  | Any valid CSS color         |

All icons are monochrome and accept a `color` prop. Includes sports (soccer, basketball, tennis, cricket, etc.), esports (Dota 2, CS, Valorant, League of Legends, etc.), and other categories (motorsport, chess, Olympics, etc.).

### Ranking numbers

```tsx
import {
  RankingOne, RankingTwo, RankingThree,
  // ... through RankingTen
} from '@nukeplatform/nuke-icons'

<RankingOne />
```

### Icon Provider (performance optimization)

For apps rendering many icons, use the provider to get memoized, stable icon instances:

```tsx
import { IconProvider, useStableIcons } from '@nukeplatform/nuke-icons'

// Wrap your app
<IconProvider>
  <App />
</IconProvider>

// Use stable icons in components
function Profile() {
  const icons = useStableIcons()
  return <div>{icons.personal}</div>
}
```

Available stable icons: `personal`, `scan`, `map`, `dollar`, `activity`, `chevronDown`, `chevronUp`.

## How it works

The package uses conditional exports in `package.json` to serve platform-specific code:

- **Web** (`default`): Uses inline SVG elements via `lucide-react`. No native dependencies required.
- **React Native** (`react-native`): Uses `react-native-svg` and `@tamagui/lucide-icons`.

Bundlers like webpack, Vite, and Metro automatically resolve the correct entry point.

### Color handling

Pass any CSS color string (`'#333'`, `'red'`, `'rgb(0,0,0)'`) on both web and native. Each icon has a sensible default fallback color if none is provided.

## Available custom icon sets

| Export                   | Props                                          |
| ------------------------ | ---------------------------------------------- |
| `ClockArrow`             | `size`, `width`, `height`, `color`             |
| `BonusWalletIcon`        | `size`, `color`                                |
| `NukeLogo`               | `width`, `height`, `color`                     |
| `Browse`                 | `width`, `height`, `color`                     |
| `QRMock`                 | `size`, `color`                                |
| `SafariIcon`             | `size`, `color`                                |
| `ChromeIcon`             | `size`, `color`                                |
| `SlotsIcon`              | `size`, `color`                                |
| `LiveCasinoIcon`         | `size`, `color`                                |
| `SportsIcon`             | `size`, `color`                                |
| `VisaIcon`               | `width`, `height`                              |
| `MastercardIcon`         | `width`, `height`                              |
| `ApplePayIcon`           | `width`, `height`                              |
| `GooglePayIcon`          | `width`, `height`                              |
| `MoonPayLogo`            | `width`, `height`                              |
| `PaymentMethodsIcon`     | `width`, `height`                              |
| `ResponsibleGamblingIcon`| `size`                                         |
| `ProvablyFairIcon`       | `size`, `color`                                |
| `LicensedIcon`           | `size`                                         |
| `SwappedLogo`            | -                                              |
| `ToastSuccessIcon`       | `size`, `width`, `height`                      |
| `ToastErrorIcon`         | `size`, `width`, `height`                      |
| `ToastWarningIcon`       | `size`, `width`, `height`                      |
| `ToastInfoIcon`          | `size`, `width`, `height`                      |
| `FallbackCurrencyIcon`   | `size`, `symbol`, `color`                      |
| `GoogleIcon`             | `size`                                         |
| `FacebookIcon`           | `size`                                         |
| `AppleIcon`              | `size`                                         |
| `TwitchIcon`             | `size`                                         |
| `VkIcon`                 | `size`                                         |
| `TelegramIcon`           | `size`                                         |
| `WhatsAppIcon`           | `size`                                         |
| `TwitterIcon`            | `size`                                         |
| `GitHubIcon`             | `size`                                         |
| `DiscordIcon`            | `size`                                         |
| `RankingOne` - `Ten`     | -                                              |
| Sportsbook (258 icons)   | `size`, `color`                                |

## Dependencies

| Dependency              | Type             | Required for        |
| ----------------------- | ---------------- | ------------------- |
| `lucide-react`          | dependency       | Web icons           |
| `react`                 | peer             | Always              |
| `react-native`          | optional peer    | React Native only   |
| `@tamagui/lucide-icons` | optional peer    | React Native only   |
| `react-native-svg`      | optional peer    | React Native only   |

## License

Private - Nuke Platform