@nice2dev/icons-tech 1.0.10
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 +187 -0
- package/dist/index.cjs +11448 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.ts +2051 -0
- package/dist/index.mjs +11448 -0
- package/dist/index.mjs.map +1 -0
- package/package.json +75 -0
package/README.md
ADDED
|
@@ -0,0 +1,187 @@
|
|
|
1
|
+
# @nice2dev/icons-tech
|
|
2
|
+
|
|
3
|
+
React icon library for developer tools, cloud computing, infrastructure, and programming concepts.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
pnpm add @nice2dev/icons-tech
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Features
|
|
12
|
+
|
|
13
|
+
- 🛠️ **60 Tech Icons** — DevTools, Cloud, Infrastructure, Development
|
|
14
|
+
- 🎨 **Variants** — Filled, Outlined, Duotone styles
|
|
15
|
+
- ✨ **Animations** — 9 SMIL-based animations (pulse, grow, shake, spin, bounce, fade, flip, slide, glow)
|
|
16
|
+
- 📦 **Tree-shakeable** — Import only what you need
|
|
17
|
+
- 🔷 **TypeScript** — Full type definitions
|
|
18
|
+
- ⚛️ **React 19** — Latest React support
|
|
19
|
+
|
|
20
|
+
## Usage
|
|
21
|
+
|
|
22
|
+
```tsx
|
|
23
|
+
import { TerminalIcon, DockerIcon, DatabaseIcon, TypeIcon } from '@nice2dev/icons-tech';
|
|
24
|
+
|
|
25
|
+
function App() {
|
|
26
|
+
return (
|
|
27
|
+
<div>
|
|
28
|
+
<TerminalIcon size={24} color="#22c55e" />
|
|
29
|
+
<DockerIcon variant="filled" accentColor="#2496ed" />
|
|
30
|
+
<DatabaseIcon animation="pulse" />
|
|
31
|
+
<TypeIcon size={32} accentColor="#3178c6" />
|
|
32
|
+
</div>
|
|
33
|
+
);
|
|
34
|
+
}
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
## Available Icons
|
|
38
|
+
|
|
39
|
+
### DevTools (15 icons)
|
|
40
|
+
|
|
41
|
+
| Icon | Component |
|
|
42
|
+
| ---------- | --------------- |
|
|
43
|
+
| Terminal | `TerminalIcon` |
|
|
44
|
+
| Code | `CodeIcon` |
|
|
45
|
+
| Git Branch | `GitBranchIcon` |
|
|
46
|
+
| Git Commit | `GitCommitIcon` |
|
|
47
|
+
| Git Merge | `GitMergeIcon` |
|
|
48
|
+
| Bug | `BugIcon` |
|
|
49
|
+
| Debug | `DebugIcon` |
|
|
50
|
+
| Console | `ConsoleIcon` |
|
|
51
|
+
| API | `APIIcon` |
|
|
52
|
+
| JSON | `JSONIcon` |
|
|
53
|
+
| Regex | `RegexIcon` |
|
|
54
|
+
| NPM | `NPMIcon` |
|
|
55
|
+
| Package | `PackageIcon` |
|
|
56
|
+
| Build | `BuildIcon` |
|
|
57
|
+
| Test | `TestIcon` |
|
|
58
|
+
|
|
59
|
+
### Cloud (15 icons)
|
|
60
|
+
|
|
61
|
+
| Icon | Component |
|
|
62
|
+
| -------------- | ------------------- |
|
|
63
|
+
| Cloud | `CloudIcon` |
|
|
64
|
+
| Cloud Upload | `CloudUploadIcon` |
|
|
65
|
+
| Cloud Download | `CloudDownloadIcon` |
|
|
66
|
+
| Server | `ServerIcon` |
|
|
67
|
+
| Serverless | `ServerlessIcon` |
|
|
68
|
+
| CDN | `CDNIcon` |
|
|
69
|
+
| Lambda | `LambdaIcon` |
|
|
70
|
+
| S3 Bucket | `S3BucketIcon` |
|
|
71
|
+
| Kubernetes | `KubernetesIcon` |
|
|
72
|
+
| Docker | `DockerIcon` |
|
|
73
|
+
| Container | `ContainerIcon` |
|
|
74
|
+
| Microservice | `MicroserviceIcon` |
|
|
75
|
+
| Load Balancer | `LoadBalancerIcon` |
|
|
76
|
+
| Firewall | `FirewallIcon` |
|
|
77
|
+
| VPC | `VPCIcon` |
|
|
78
|
+
|
|
79
|
+
### Infrastructure (15 icons)
|
|
80
|
+
|
|
81
|
+
| Icon | Component |
|
|
82
|
+
| ----------------- | ---------------------- |
|
|
83
|
+
| Database | `DatabaseIcon` |
|
|
84
|
+
| Redis | `RedisIcon` |
|
|
85
|
+
| Queue | `QueueIcon` |
|
|
86
|
+
| Cache | `CacheIcon` |
|
|
87
|
+
| Cluster | `ClusterIcon` |
|
|
88
|
+
| Node | `NodeIcon` |
|
|
89
|
+
| Network | `NetworkIcon` |
|
|
90
|
+
| DNS | `DNSIcon` |
|
|
91
|
+
| SSL | `SSLIcon` |
|
|
92
|
+
| Monitoring | `MonitoringIcon` |
|
|
93
|
+
| Logs | `LogsIcon` |
|
|
94
|
+
| Metrics | `MetricsIcon` |
|
|
95
|
+
| Backup | `BackupIcon` |
|
|
96
|
+
| Disaster Recovery | `DisasterRecoveryIcon` |
|
|
97
|
+
| CI/CD | `CICDIcon` |
|
|
98
|
+
|
|
99
|
+
### Development (15 icons)
|
|
100
|
+
|
|
101
|
+
| Icon | Component |
|
|
102
|
+
| --------- | ----------------- |
|
|
103
|
+
| Variable | `VariableIcon` |
|
|
104
|
+
| Function | `FunctionDevIcon` |
|
|
105
|
+
| Class | `ClassIcon` |
|
|
106
|
+
| Interface | `InterfaceIcon` |
|
|
107
|
+
| Module | `ModuleIcon` |
|
|
108
|
+
| Component | `ComponentIcon` |
|
|
109
|
+
| Hook | `HookIcon` |
|
|
110
|
+
| State | `StateIcon` |
|
|
111
|
+
| Props | `PropsIcon` |
|
|
112
|
+
| Event | `EventIcon` |
|
|
113
|
+
| Async | `AsyncIcon` |
|
|
114
|
+
| Promise | `PromiseIcon` |
|
|
115
|
+
| Stream | `StreamIcon` |
|
|
116
|
+
| Type | `TypeIcon` |
|
|
117
|
+
| Enum | `EnumIcon` |
|
|
118
|
+
|
|
119
|
+
## Props
|
|
120
|
+
|
|
121
|
+
| Prop | Type | Default | Description |
|
|
122
|
+
| ------------- | ------------------------------------- | ---------------- | ----------------------- |
|
|
123
|
+
| `size` | `number` | `24` | Icon size in pixels |
|
|
124
|
+
| `color` | `string` | `'currentColor'` | Primary icon color |
|
|
125
|
+
| `accentColor` | `string` | — | Secondary/accent color |
|
|
126
|
+
| `variant` | `'filled' \| 'outlined' \| 'duotone'` | `'outlined'` | Icon style variant |
|
|
127
|
+
| `animation` | `TechIconAnimation` | — | Animation type |
|
|
128
|
+
| `className` | `string` | — | CSS class name |
|
|
129
|
+
| `style` | `CSSProperties` | — | Inline styles |
|
|
130
|
+
| `...props` | `SVGProps` | — | Any valid SVG attribute |
|
|
131
|
+
|
|
132
|
+
## Animations
|
|
133
|
+
|
|
134
|
+
```tsx
|
|
135
|
+
import { KubernetesIcon } from '@nice2dev/icons-tech';
|
|
136
|
+
|
|
137
|
+
// Available animations
|
|
138
|
+
<KubernetesIcon animation="pulse" /> // Opacity pulse
|
|
139
|
+
<KubernetesIcon animation="grow" /> // Scale grow
|
|
140
|
+
<KubernetesIcon animation="shake" /> // Horizontal shake
|
|
141
|
+
<KubernetesIcon animation="spin" /> // 360° rotation
|
|
142
|
+
<KubernetesIcon animation="bounce" /> // Vertical bounce
|
|
143
|
+
<KubernetesIcon animation="fade" /> // Fade in/out
|
|
144
|
+
<KubernetesIcon animation="flip" /> // Y-axis flip
|
|
145
|
+
<KubernetesIcon animation="slide" /> // Horizontal slide
|
|
146
|
+
<KubernetesIcon animation="glow" /> // Glow effect (filter)
|
|
147
|
+
```
|
|
148
|
+
|
|
149
|
+
## Icon Collections
|
|
150
|
+
|
|
151
|
+
```tsx
|
|
152
|
+
import { devToolsIcons, cloudIcons, infrastructureIcons, developmentIcons, allTechIcons } from '@nice2dev/icons-tech';
|
|
153
|
+
|
|
154
|
+
// Use collections for dynamic rendering
|
|
155
|
+
Object.entries(devToolsIcons).map(([name, Icon]) => <Icon key={name} size={24} />);
|
|
156
|
+
```
|
|
157
|
+
|
|
158
|
+
## Custom Icons
|
|
159
|
+
|
|
160
|
+
Create custom tech icons using the factory:
|
|
161
|
+
|
|
162
|
+
```tsx
|
|
163
|
+
import { createTechIcon } from '@nice2dev/icons-tech';
|
|
164
|
+
|
|
165
|
+
const CustomAPIIcon = createTechIcon(
|
|
166
|
+
({ color, variant }) => (
|
|
167
|
+
<>
|
|
168
|
+
<rect
|
|
169
|
+
x="3"
|
|
170
|
+
y="3"
|
|
171
|
+
width="18"
|
|
172
|
+
height="18"
|
|
173
|
+
rx="2"
|
|
174
|
+
fill={variant === 'filled' ? color : 'none'}
|
|
175
|
+
stroke={color}
|
|
176
|
+
strokeWidth="2"
|
|
177
|
+
/>
|
|
178
|
+
<path d="M8 12h8" stroke={variant === 'filled' ? '#fff' : color} strokeWidth="2" />
|
|
179
|
+
</>
|
|
180
|
+
),
|
|
181
|
+
{ displayName: 'CustomAPIIcon' },
|
|
182
|
+
);
|
|
183
|
+
```
|
|
184
|
+
|
|
185
|
+
## License
|
|
186
|
+
|
|
187
|
+
MIT © Nice2Dev
|