r3d-icons 1.1.0
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.
- package/README.md +104 -0
- package/dist/index.cjs +32 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.cts +1130 -0
- package/dist/index.d.ts +1130 -0
- package/dist/index.js +32 -0
- package/dist/index.js.map +1 -0
- package/package.json +62 -0
package/README.md
ADDED
|
@@ -0,0 +1,104 @@
|
|
|
1
|
+
# React 3D Icons
|
|
2
|
+
|
|
3
|
+
A premium, interactive React component library for high-fidelity 3D and 2D vector icons, designed for modern web applications. Powered by **React Three Fiber** and **Three.js**, it offers responsive controls, custom styling presets, dynamic angles, lighting adjustments, and a seamless 2D SVG fallback system.
|
|
4
|
+
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
## Key Features
|
|
8
|
+
|
|
9
|
+
- **Procedural 3D Canvas**: Renders real-time 3D geometries with interactive OrbitControls (pan/rotate/zoom on hover/drag).
|
|
10
|
+
- **8 Curated Material Presets**:
|
|
11
|
+
- `glass`: Sleek semitransparent glossy finish.
|
|
12
|
+
- `metal`: Highly reflective silver/metallic finish.
|
|
13
|
+
- `clay`: Matte soft rose clay texture.
|
|
14
|
+
- `hologram`: Vibrant glowing violet futuristic material.
|
|
15
|
+
- `gold`: Premium beveled reflective gold plating.
|
|
16
|
+
- `glassmorphism`: Elegant frosted glass overlays with high transmission.
|
|
17
|
+
- `carbon`: Detailed dark carbon fiber look.
|
|
18
|
+
- `wood`: Diffuse warm organic timber texture.
|
|
19
|
+
- **Sizing Flexibility**: Directly set size using the `size` prop as a number (resolves to pixels, e.g., `120` -> `120px`) or any valid CSS string (e.g. `8rem`, `10vw`, etc.).
|
|
20
|
+
- **Camera Angle Controls**: View icons from `front`, `perspective`, or `tilted` orientations out-of-the-box.
|
|
21
|
+
- **WebGL Check & 2D Vector Fallback**: Automatically falls back to handcrafted, lightweight, premium 2D SVGs if WebGL is unavailable on the client browser. Can also be explicitly triggered via `variant="2d"`.
|
|
22
|
+
- **Contrast Adaptation**: Dynamically adjusts glassmorphic highlights and 2D vector outline strokes to contrast perfectly against light or dark canvas backgrounds.
|
|
23
|
+
|
|
24
|
+
---
|
|
25
|
+
|
|
26
|
+
## Installation
|
|
27
|
+
|
|
28
|
+
Install the package and its peer dependencies:
|
|
29
|
+
|
|
30
|
+
```bash
|
|
31
|
+
npm install react-3d-icons three @react-three/fiber @react-three/drei
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
---
|
|
35
|
+
|
|
36
|
+
## Quick Start
|
|
37
|
+
|
|
38
|
+
```jsx
|
|
39
|
+
import React from 'react';
|
|
40
|
+
import { ShieldIcon, CrownIcon } from 'react-3d-icons';
|
|
41
|
+
|
|
42
|
+
function App() {
|
|
43
|
+
return (
|
|
44
|
+
<div style={{ display: 'flex', gap: '20px' }}>
|
|
45
|
+
{/* 3D Glass Shield Icon */}
|
|
46
|
+
<ShieldIcon
|
|
47
|
+
size={120}
|
|
48
|
+
preset="glass"
|
|
49
|
+
angle="perspective"
|
|
50
|
+
color="#0d9488"
|
|
51
|
+
/>
|
|
52
|
+
|
|
53
|
+
{/* 3D Gold Royal Crown */}
|
|
54
|
+
<CrownIcon
|
|
55
|
+
size={120}
|
|
56
|
+
preset="gold"
|
|
57
|
+
angle="front"
|
|
58
|
+
interactive={true}
|
|
59
|
+
/>
|
|
60
|
+
|
|
61
|
+
{/* 2D Fallback Vector Emoji */}
|
|
62
|
+
<ShieldIcon
|
|
63
|
+
size={120}
|
|
64
|
+
variant="2d"
|
|
65
|
+
color="#ef4444"
|
|
66
|
+
/>
|
|
67
|
+
</div>
|
|
68
|
+
);
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
export default App;
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
---
|
|
75
|
+
|
|
76
|
+
## API Properties Reference
|
|
77
|
+
|
|
78
|
+
Every icon component accepts the following customizable props:
|
|
79
|
+
|
|
80
|
+
| Prop | Type | Default | Description |
|
|
81
|
+
|---|---|---|---|
|
|
82
|
+
| `size` | `number \| string` | `100%` (fill container) | Scale of the icon viewport (e.g. `120` or `"6rem"`). |
|
|
83
|
+
| `preset` | `"glass" \| "metal" \| "clay" \| "hologram" \| "gold" \| "glassmorphism" \| "carbon" \| "wood"` | `"glass"` | Material skin preset. |
|
|
84
|
+
| `angle` | `"front" \| "perspective" \| "tilted"` | `"perspective"` | Camera preset viewing angle. |
|
|
85
|
+
| `variant` | `"3d" \| "2d"` | `"3d"` | Switch between WebGL 3D Canvas and 2D SVG fallback. |
|
|
86
|
+
| `color` | `string` | *Icon brand default* | Main hexadecimal primary mesh/stroke color. |
|
|
87
|
+
| `accentColor` | `string` | *Icon default accent* | Glow/emissive or detail styling color. |
|
|
88
|
+
| `spinSpeed` | `number` | `1.0` | Coefficient multiplier for rotation and float cycles. |
|
|
89
|
+
| `floatHeight` | `number` | `1.0` | Amplitude height for the hover floating animation. |
|
|
90
|
+
| `theme` | `"light" \| "dark"` | `"dark"` | Active ambient lighting contrast scheme. |
|
|
91
|
+
| `interactive` | `boolean` | `true` | Enables click-and-drag rotation and zoom. |
|
|
92
|
+
|
|
93
|
+
---
|
|
94
|
+
|
|
95
|
+
## Icon Catalog (Over 230+ Premium Icons)
|
|
96
|
+
|
|
97
|
+
Features a massive library of stylized icons across diverse categories including:
|
|
98
|
+
- **Brands**: YouTube, Github, Facebook, Figma, Google, Twitter, etc.
|
|
99
|
+
- **Hardware**: Cpu, Monitor, Keyboard, Mouse, HardDrive, Gamepad, Webcam, RamStick, Motherboard, Gpu.
|
|
100
|
+
- **Storage & Systems**: Database, Cloud, Network, Server, Router, Folder.
|
|
101
|
+
- **Mechanics**: Gear, Wrench, Bolt, Nut, Hammer, Screwdriver, Sprocket, Bearing, Piston, Spring, Turbine, etc.
|
|
102
|
+
- **Nature (Animals & Flowers)**: Dog, Cat, Bird, Elephant, Owl, Turtle, Dolphin, Rose, Sunflower, Tulip, Lotus, Daisy, Hibiscus, Orchid, Lily, Cactus, Lavender.
|
|
103
|
+
- **Utility**: Shield, Bell, Alarm, Lock, MapPin, CreditCard, Search, Trash, Cart, Music, Trophy, Star, Heart, Chat, Key, etc.
|
|
104
|
+
- **Alphabet (A-Z) & Digits (0-9)**: Bold, beveled beveled text characters.
|