@nobertdev/react-3d-icons 1.5.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 +92 -36
  2. package/package.json +5 -2
  3. package/screenshot.png +0 -0
package/README.md CHANGED
@@ -1,29 +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
- ![React 3D Icons](screenshot.png)
7
+ <p align="center">
8
+ <b>650+ beautiful 3D icons as React components</b><br/>
9
+ Clean. Fast. Customizable.
10
+ </p>
6
11
 
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)
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>
8
23
 
9
- Cooked by [Nobert Dev](https://nobertdev.vercel.app/)
24
+ ---
10
25
 
11
- ## Installation
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
12
38
 
13
39
  ```bash
14
40
  npm install @nobertdev/react-3d-icons
15
41
  ```
16
42
 
17
- > **Peer dependency:** React 18 or later.
43
+ > **Peer dependency:** React 18+
18
44
 
19
- ## Usage
45
+ ---
20
46
 
21
- Import icons by name from any category:
47
+ ## ๐Ÿš€ Quick Usage
22
48
 
23
49
  ```tsx
24
50
  import { Rocket, Heart, Star } from "@nobertdev/react-3d-icons/front-color";
25
51
 
26
- function App() {
52
+ export default function App() {
27
53
  return (
28
54
  <div className="flex gap-4">
29
55
  <Rocket className="w-12 h-12" />
@@ -34,9 +60,9 @@ function App() {
34
60
  }
35
61
  ```
36
62
 
37
- ### Short Aliases
63
+ ---
38
64
 
39
- Each category has a short alias for convenience:
65
+ ## โšก Short Aliases
40
66
 
41
67
  ```tsx
42
68
  import { Rocket } from "@nobertdev/react-3d-icons/dc"; // dynamic-color
@@ -45,40 +71,70 @@ import { Star } from "@nobertdev/react-3d-icons/fc"; // front-color
45
71
  import { Bell } from "@nobertdev/react-3d-icons/pf"; // premium-front
46
72
  ```
47
73
 
48
- ## Categories
74
+ ---
75
+
76
+ ## ๐ŸŽจ Categories
49
77
 
50
- | Category | Slug | Alias | Description |
78
+ | Category | Import Path | Alias | Description |
51
79
  | --------------- | ----------------- | ----- | ------------------------------------------ |
52
80
  | Dynamic Color | `dynamic-color` | `dc` | Colorful 3D icons with dynamic perspective |
53
81
  | 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 |
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
+ ---
56
121
 
57
- ## Component Props
122
+ ## ๐Ÿ’ก Use Cases
58
123
 
59
- 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
60
129
 
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"` |
130
+ ---
70
131
 
71
- ## Icon Names
132
+ ## ๐Ÿ‘จโ€๐Ÿณ Author
72
133
 
73
- Icons use PascalCase names derived from the filename:
134
+ Built with โค๏ธ by **Nobert Langat**
74
135
 
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` |
136
+ ---
81
137
 
82
- ## License
138
+ ## ๐Ÿ“„ License
83
139
 
84
140
  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.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",
package/screenshot.png ADDED
Binary file