@caidentity/testicon 0.0.11 → 0.0.14
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 +61 -6
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,21 +1,76 @@
|
|
|
1
1
|
# @caidentity/testicon
|
|
2
2
|
|
|
3
|
-
React icon
|
|
3
|
+
React icon components generated from SVG sources.
|
|
4
4
|
|
|
5
|
-
- Version: 0.0.
|
|
6
|
-
-
|
|
5
|
+
- Version: 0.0.11
|
|
6
|
+
- Icons: 3
|
|
7
|
+
- Manifest: `iconsManifest` (id, name, component, viewBox, tags)
|
|
8
|
+
|
|
9
|
+
## Install
|
|
10
|
+
|
|
11
|
+
```bash
|
|
12
|
+
npm install @caidentity/testicon
|
|
13
|
+
```
|
|
7
14
|
|
|
8
15
|
## Usage
|
|
9
16
|
|
|
10
17
|
```tsx
|
|
11
|
-
import {
|
|
12
|
-
import { Home } from '@caidentity/testicon'
|
|
18
|
+
import { Icon } from '@caidentity/testicon'
|
|
13
19
|
|
|
14
20
|
export function Example() {
|
|
15
21
|
return (
|
|
16
22
|
<div style={{ display: 'flex', gap: 12 }}>
|
|
17
|
-
<
|
|
23
|
+
<Icon name="home" size={24} />
|
|
24
|
+
<Icon name="search" size={20} />
|
|
25
|
+
<Icon name="user" size={16} className="user-icon" />
|
|
18
26
|
</div>
|
|
19
27
|
)
|
|
20
28
|
}
|
|
21
29
|
```
|
|
30
|
+
|
|
31
|
+
## Component Props
|
|
32
|
+
|
|
33
|
+
The Icon component extends `SVGProps<SVGSVGElement>` with these additional props:
|
|
34
|
+
|
|
35
|
+
- `name: string` - **Required.** Name of the icon to render (case-insensitive)
|
|
36
|
+
- `size?: number | string` - Icon size in pixels (default: 24)
|
|
37
|
+
- `title?: string` - Accessible title for screen readers
|
|
38
|
+
|
|
39
|
+
All standard SVG props are supported (className, style, onClick, etc.).
|
|
40
|
+
|
|
41
|
+
## Theming
|
|
42
|
+
|
|
43
|
+
Icons use `fill="currentColor"` by default, so they inherit the text color of their container:
|
|
44
|
+
|
|
45
|
+
```tsx
|
|
46
|
+
<div style={{ color: 'blue' }}>
|
|
47
|
+
<Icon name="home" /> {/* Will be blue */}
|
|
48
|
+
</div>
|
|
49
|
+
|
|
50
|
+
<Icon name="home" style={{ color: 'red' }} /> {/* Override with style */}
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
## Available Icons
|
|
54
|
+
|
|
55
|
+
```tsx
|
|
56
|
+
import { iconsManifest } from '@caidentity/testicon'
|
|
57
|
+
|
|
58
|
+
// Get all available icons
|
|
59
|
+
console.log(iconsManifest)
|
|
60
|
+
|
|
61
|
+
// Each icon has: { id, name, component, width, height, viewBox, tags? }
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
## TypeScript Support
|
|
65
|
+
|
|
66
|
+
```tsx
|
|
67
|
+
import { Icon, IconName } from '@caidentity/testicon'
|
|
68
|
+
|
|
69
|
+
// Type-safe icon names
|
|
70
|
+
function MyComponent() {
|
|
71
|
+
return <Icon name="home" size={24} />
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
// IconName is a union of all available icon names
|
|
75
|
+
const iconName: IconName = 'home'
|
|
76
|
+
```
|