trinil-react 1.0.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 +98 -0
- package/dist/index.d.ts +6888 -0
- package/dist/index.js +22186 -0
- package/package.json +31 -0
package/README.md
ADDED
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
# trinil-react
|
|
2
|
+
|
|
3
|
+
React 16.8+ icon components from the Trinil library. Tree-shakeable, zero dependencies.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
These packages are not yet published to npm. To use during development:
|
|
8
|
+
|
|
9
|
+
```json
|
|
10
|
+
{
|
|
11
|
+
"dependencies": {
|
|
12
|
+
"trinil-react": "file:../trinil/packages/trinil-react"
|
|
13
|
+
}
|
|
14
|
+
}
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
Or after building, import from the local repo:
|
|
18
|
+
|
|
19
|
+
```bash
|
|
20
|
+
npm install ../../trinil/packages/trinil-react
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
## Quick Start
|
|
24
|
+
|
|
25
|
+
```tsx
|
|
26
|
+
import { ArrowDown, Check, UsersSearch } from 'trinil-react';
|
|
27
|
+
|
|
28
|
+
export function App() {
|
|
29
|
+
return (
|
|
30
|
+
<div>
|
|
31
|
+
<ArrowDown size={24} />
|
|
32
|
+
<Check size={32} color="green" />
|
|
33
|
+
<UsersSearch ariaLabel="Search users" />
|
|
34
|
+
</div>
|
|
35
|
+
);
|
|
36
|
+
}
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
## Props
|
|
40
|
+
|
|
41
|
+
All icon components accept:
|
|
42
|
+
|
|
43
|
+
| Prop | Type | Default | Description |
|
|
44
|
+
|------|------|---------|-------------|
|
|
45
|
+
| `size` | `number` | `24` | Width/height in pixels |
|
|
46
|
+
| `color` | `string` | `"currentColor"` | Stroke color |
|
|
47
|
+
| `className` | `string` | - | CSS classes |
|
|
48
|
+
| `title` | `string` | - | SVG `<title>` (accessibility) |
|
|
49
|
+
| `ariaLabel` | `string` | - | `aria-label` attribute |
|
|
50
|
+
|
|
51
|
+
## Styling
|
|
52
|
+
|
|
53
|
+
Icons inherit color from CSS:
|
|
54
|
+
|
|
55
|
+
```tsx
|
|
56
|
+
<div style={{ color: 'blue' }}>
|
|
57
|
+
<ArrowDown /> {/* Renders in blue */}
|
|
58
|
+
</div>
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
Or set directly:
|
|
62
|
+
|
|
63
|
+
```tsx
|
|
64
|
+
<ArrowDown color="#ff5733" size={40} className="my-icon" />
|
|
65
|
+
```
|
|
66
|
+
|
|
67
|
+
## Design
|
|
68
|
+
|
|
69
|
+
⚠️ **Stroke properties are locked** (stroke-width, stroke-linecap, stroke-linejoin). This ensures visual consistency.
|
|
70
|
+
|
|
71
|
+
Only `size`, `color`, `className`, `title`, and `ariaLabel` can be customized.
|
|
72
|
+
|
|
73
|
+
## Accessibility
|
|
74
|
+
|
|
75
|
+
Always provide `ariaLabel` or `title` for standalone icons:
|
|
76
|
+
|
|
77
|
+
```tsx
|
|
78
|
+
<button>
|
|
79
|
+
<ArrowDown ariaLabel="Scroll down" />
|
|
80
|
+
</button>
|
|
81
|
+
|
|
82
|
+
<ArrowDown title="Download" />
|
|
83
|
+
```
|
|
84
|
+
|
|
85
|
+
## All Available Icons
|
|
86
|
+
|
|
87
|
+
765 icons including:
|
|
88
|
+
- Navigation: ArrowDown, ArrowUp, ChevronLeft, etc.
|
|
89
|
+
- UI: Check, Cross, AlertCircle, etc.
|
|
90
|
+
- Media: Play, Pause, Volume, etc.
|
|
91
|
+
- Social: Heart, Share, etc.
|
|
92
|
+
- And many more...
|
|
93
|
+
|
|
94
|
+
See the repository for a complete list.
|
|
95
|
+
|
|
96
|
+
## License
|
|
97
|
+
|
|
98
|
+
MIT
|