@nobertdev/react-3d-icons 1.5.0 → 1.5.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/README.md +109 -41
  2. package/package.json +5 -2
  3. package/screenshot.png +0 -0
package/README.md CHANGED
@@ -1,29 +1,67 @@
1
- # React 3D Icons
2
-
3
- A beautiful collection of 650+ 3D icons as React components, organized by style category.
4
-
5
- ![React 3D Icons](screenshot.png)
6
-
7
- [Demo & Docs](https://react-3d-icons.vercel.app/) · [GitHub](https://github.com/NOBERT167/react-3d-icons) · [npm](https://www.npmjs.com/package/@nobertdev/react-3d-icons)
8
-
9
- Cooked by [Nobert Dev](https://nobertdev.vercel.app/)
10
-
11
- ## Installation
1
+ # 🚀 React 3D Icons
2
+
3
+ <p align="center">
4
+ <img src="https://react-3d-icons.vercel.app/screenshot.png" alt="React 3D Icons Preview" />
5
+ </p>
6
+ <p align="center">
7
+ <b>650+ beautiful 3D icons as React components</b><br/>
8
+ Clean. Fast. Customizable.
9
+ </p>
10
+ <p align="center">
11
+ <a href="https://www.npmjs.com/package/@nobertdev/react-3d-icons">
12
+ <img src="https://img.shields.io/npm/v/@nobertdev/react-3d-icons?color=green" />
13
+ </a>
14
+ <a href="https://www.npmjs.com/package/@nobertdev/react-3d-icons">
15
+ <img src="https://img.shields.io/npm/dt/@nobertdev/react-3d-icons" />
16
+ </a>
17
+ <a href="https://github.com/NOBERT167/react-3d-icons/blob/main/LICENSE">
18
+ <img src="https://img.shields.io/npm/l/@nobertdev/react-3d-icons" />
19
+ </a>
20
+ </p>
21
+
22
+ ---
23
+
24
+ <p align="center">
25
+ <a href="https://react-3d-icons.vercel.app/">
26
+ <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" />
27
+ </a>
28
+ <a href="https://react-3d-icons.vercel.app/">
29
+ <img src="https://img.shields.io/badge/Documentation-Visit%20Docs-blue?style=for-the-badge&logo=readthedocs&logoColor=white" alt="Documentation" />
30
+ </a>
31
+ <a href="https://github.com/NOBERT167/react-3d-icons">
32
+ <img src="https://img.shields.io/badge/GitHub-Source%20Code-181717?style=for-the-badge&logo=github&logoColor=white" alt="GitHub" />
33
+ </a>
34
+ </p>
35
+
36
+ ---
37
+
38
+ ## ✨ Features
39
+
40
+ - 🎨 **650+ 3D icons** across multiple styles
41
+ - ⚡ **Tree-shakable imports** (import only what you use)
42
+ - 🧩 **Simple React components**
43
+ - 🎯 **Multiple styles & categories**
44
+ - 🚀 **Zero dependencies**
45
+ - 💤 **Lazy-loaded images by default**
46
+
47
+ ---
48
+
49
+ ## 📦 Installation
12
50
 
13
51
  ```bash
14
52
  npm install @nobertdev/react-3d-icons
15
53
  ```
16
54
 
17
- > **Peer dependency:** React 18 or later.
55
+ > **Peer dependency:** React 18+
18
56
 
19
- ## Usage
57
+ ---
20
58
 
21
- Import icons by name from any category:
59
+ ## 🚀 Quick Usage
22
60
 
23
61
  ```tsx
24
62
  import { Rocket, Heart, Star } from "@nobertdev/react-3d-icons/front-color";
25
63
 
26
- function App() {
64
+ export default function App() {
27
65
  return (
28
66
  <div className="flex gap-4">
29
67
  <Rocket className="w-12 h-12" />
@@ -34,9 +72,9 @@ function App() {
34
72
  }
35
73
  ```
36
74
 
37
- ### Short Aliases
75
+ ---
38
76
 
39
- Each category has a short alias for convenience:
77
+ ## ⚡ Short Aliases
40
78
 
41
79
  ```tsx
42
80
  import { Rocket } from "@nobertdev/react-3d-icons/dc"; // dynamic-color
@@ -45,40 +83,70 @@ import { Star } from "@nobertdev/react-3d-icons/fc"; // front-color
45
83
  import { Bell } from "@nobertdev/react-3d-icons/pf"; // premium-front
46
84
  ```
47
85
 
48
- ## Categories
86
+ ---
49
87
 
50
- | Category | Slug | Alias | Description |
88
+ ## 🎨 Categories
89
+
90
+ | Category | Import Path | Alias | Description |
51
91
  | --------------- | ----------------- | ----- | ------------------------------------------ |
52
92
  | Dynamic Color | `dynamic-color` | `dc` | Colorful 3D icons with dynamic perspective |
53
93
  | Dynamic Premium | `dynamic-premium` | `dp` | Premium 3D icons with dynamic perspective |
54
- | Front Color | `front-color` | `fc` | Colorful 3D icons with front-facing view |
55
- | Premium Front | `premium-front` | `pf` | Premium 3D icons with front-facing view |
94
+ | Front Color | `front-color` | `fc` | Colorful 3D icons (front view) |
95
+ | Premium Front | `premium-front` | `pf` | Premium icons (front view) |
96
+
97
+ ---
98
+
99
+ ## 🧩 Props
100
+
101
+ All icons are `forwardRef` components rendering an `<img />`.
102
+
103
+ | Prop | Description |
104
+ | -------------- | ------------------------------------ |
105
+ | `className` | Style using Tailwind / CSS |
106
+ | `style` | Inline styles |
107
+ | `width/height` | Control size |
108
+ | `onClick` | Click handler |
109
+ | `ref` | Access the `<img>` element |
110
+ | `alt` | Defaults to icon name (overrideable) |
111
+ | `loading` | `"lazy"` by default |
112
+
113
+ ---
114
+
115
+ ## 🧠 Naming Convention
116
+
117
+ | File Name | Component |
118
+ | --------------------------------------- | ------------ |
119
+ | `3dicons-rocket-dynamic-color.png` | `Rocket` |
120
+ | `3dicons-credit-card-front-premium.png` | `CreditCard` |
121
+ | `3dicons-chat-bubble-dynamic-color.png` | `ChatBubble` |
122
+ | `3dicons-3d-coin-front-color.png` | `ThreeDCoin` |
123
+
124
+ ---
125
+
126
+ ## 🔗 Links
127
+
128
+ - 🌐 Icons & Documentation: https://react-3d-icons.vercel.app/
129
+ - 💻 GitHub: https://github.com/NOBERT167/react-3d-icons
130
+ - 📦 npm: https://www.npmjs.com/package/@nobertdev/react-3d-icons
131
+
132
+ ---
56
133
 
57
- ## Component Props
134
+ ## 💡 Use Cases
58
135
 
59
- Every icon is a `forwardRef` component that renders an `<img>` element. It accepts all standard HTML image attributes:
136
+ - Dashboards
137
+ - SaaS products
138
+ - Landing pages
139
+ - Mobile-first UIs
140
+ - Design systems
60
141
 
61
- | Prop | Description |
62
- | -------------- | --------------------------------------- |
63
- | `className` | CSS class names for styling |
64
- | `style` | Inline styles |
65
- | `width/height` | Image dimensions |
66
- | `onClick` | Click handler |
67
- | `ref` | Forwarded ref to the `<img>` element |
68
- | `alt` | Auto-set to the icon name (overridable) |
69
- | `loading` | Defaults to `"lazy"` |
142
+ ---
70
143
 
71
- ## Icon Names
144
+ ## 👨‍🍳 Author
72
145
 
73
- Icons use PascalCase names derived from the filename:
146
+ Built with ❤️ by **Nobert Langat**
74
147
 
75
- | Filename | Component Name |
76
- | --------------------------------------- | -------------- |
77
- | `3dicons-rocket-dynamic-color.png` | `Rocket` |
78
- | `3dicons-credit-card-front-premium.png` | `CreditCard` |
79
- | `3dicons-chat-bubble-dynamic-color.png` | `ChatBubble` |
80
- | `3dicons-3d-coin-front-color.png` | `ThreeDCoin` |
148
+ ---
81
149
 
82
- ## License
150
+ ## 📄 License
83
151
 
84
152
  MIT
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nobertdev/react-3d-icons",
3
- "version": "1.5.0",
3
+ "version": "1.5.2",
4
4
  "description": "Beautiful 3D React icon components with multiple styles — dynamic color, dynamic premium, front color, and premium front",
5
5
  "type": "module",
6
6
  "sideEffects": false,
@@ -43,7 +43,10 @@
43
43
  }
44
44
  },
45
45
  "files": [
46
- "dist"
46
+ "dist",
47
+ "README.md",
48
+ "LICENSE",
49
+ "screenshot.png"
47
50
  ],
48
51
  "scripts": {
49
52
  "build": "node scripts/build.cjs",
package/screenshot.png ADDED
Binary file