npm package: @nobertdev/react-3d-icons
Description: Beautiful 3D React icon components with multiple styles — dynamic color, dynamic premium, front color, and premium front
Author: Nobert Langat
Latest version: 1.5.2

# 🚀 React 3D Icons

<p align="center">
  <img src="https://react-3d-icons.vercel.app/screenshot.png" alt="React 3D Icons Preview" />
</p>
<p align="center">
  <b>650+ beautiful 3D icons as React components</b><br/>
  Clean. Fast. Customizable.
</p>
<p align="center">
  <a href="https://www.npmjs.com/package/@nobertdev/react-3d-icons">
    <img src="https://img.shields.io/npm/v/@nobertdev/react-3d-icons?color=green" />
  </a>
  <a href="https://www.npmjs.com/package/@nobertdev/react-3d-icons">
    <img src="https://img.shields.io/npm/dt/@nobertdev/react-3d-icons" />
  </a>
  <a href="https://github.com/NOBERT167/react-3d-icons/blob/main/LICENSE">
    <img src="https://img.shields.io/npm/l/@nobertdev/react-3d-icons" />
  </a>
</p>

---

<p align="center">
  <a href="https://react-3d-icons.vercel.app/">
    <img src="https://img.shields.io/badge/Icons-650%2B-blueviolet?style=for-the-badge&logo=data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZmlsbD0id2hpdGUiIGQ9Ik0xMiAyTDIgN2wxMCA1IDEwLTV6TTIgMTdsOSA1IDktNVYzbC05IDV6Ii8+PC9zdmc+" alt="650+ Icons" />
  </a>
  <a href="https://react-3d-icons.vercel.app/">
    <img src="https://img.shields.io/badge/Documentation-Visit%20Docs-blue?style=for-the-badge&logo=readthedocs&logoColor=white" alt="Documentation" />
  </a>
  <a href="https://github.com/NOBERT167/react-3d-icons">
    <img src="https://img.shields.io/badge/GitHub-Source%20Code-181717?style=for-the-badge&logo=github&logoColor=white" alt="GitHub" />
  </a>
</p>

---

## ✨ Features

- 🎨 **650+ 3D icons** across multiple styles
- ⚡ **Tree-shakable imports** (import only what you use)
- 🧩 **Simple React components**
- 🎯 **Multiple styles & categories**
- 🚀 **Zero dependencies**
- 💤 **Lazy-loaded images by default**

---

## 📦 Installation

```bash
npm install @nobertdev/react-3d-icons
```

> **Peer dependency:** React 18+

---

## 🚀 Quick Usage

```tsx
import { Rocket, Heart, Star } from "@nobertdev/react-3d-icons/front-color";

export default function App() {
  return (
    <div className="flex gap-4">
      <Rocket className="w-12 h-12" />
      <Heart className="w-12 h-12" />
      <Star className="w-12 h-12" />
    </div>
  );
}
```

---

## ⚡ Short Aliases

```tsx
import { Rocket } from "@nobertdev/react-3d-icons/dc"; // dynamic-color
import { Heart } from "@nobertdev/react-3d-icons/dp"; // dynamic-premium
import { Star } from "@nobertdev/react-3d-icons/fc"; // front-color
import { Bell } from "@nobertdev/react-3d-icons/pf"; // premium-front
```

---

## 🎨 Categories

| Category        | Import Path       | Alias | Description                                |
| --------------- | ----------------- | ----- | ------------------------------------------ |
| Dynamic Color   | `dynamic-color`   | `dc`  | Colorful 3D icons with dynamic perspective |
| Dynamic Premium | `dynamic-premium` | `dp`  | Premium 3D icons with dynamic perspective  |
| Front Color     | `front-color`     | `fc`  | Colorful 3D icons (front view)             |
| Premium Front   | `premium-front`   | `pf`  | Premium icons (front view)                 |

---

## 🧩 Props

All icons are `forwardRef` components rendering an `<img />`.

| Prop           | Description                          |
| -------------- | ------------------------------------ |
| `className`    | Style using Tailwind / CSS           |
| `style`        | Inline styles                        |
| `width/height` | Control size                         |
| `onClick`      | Click handler                        |
| `ref`          | Access the `<img>` element           |
| `alt`          | Defaults to icon name (overrideable) |
| `loading`      | `"lazy"` by default                  |

---

## 🧠 Naming Convention

| File Name                               | Component    |
| --------------------------------------- | ------------ |
| `3dicons-rocket-dynamic-color.png`      | `Rocket`     |
| `3dicons-credit-card-front-premium.png` | `CreditCard` |
| `3dicons-chat-bubble-dynamic-color.png` | `ChatBubble` |
| `3dicons-3d-coin-front-color.png`       | `ThreeDCoin` |

---

## 🔗 Links

- 🌐 Icons & Documentation: https://react-3d-icons.vercel.app/
- 💻 GitHub: https://github.com/NOBERT167/react-3d-icons
- 📦 npm: https://www.npmjs.com/package/@nobertdev/react-3d-icons

---

## 💡 Use Cases

- Dashboards
- SaaS products
- Landing pages
- Mobile-first UIs
- Design systems

---

## 👨‍🍳 Author

Built with ❤️ by **Nobert Langat**

---

## 📄 License

MIT