@nobertdev/react-3d-icons 1.4.0 → 1.5.1

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