@caidentity/testicon 2.0.0 → 2.0.4
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 +45 -2
- package/package.json +1 -1
- package/src/icons/manifest.json +39 -1
- package/src/icons/manifest.ts +44 -1
package/README.md
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
React icon components generated from SVG sources.
|
|
4
4
|
|
|
5
|
-
- Version:
|
|
5
|
+
- Version: 2.0.4
|
|
6
6
|
- Icons: 2
|
|
7
7
|
- Manifest: `iconsManifest` (id, name, component, viewBox, tags)
|
|
8
8
|
|
|
@@ -86,7 +86,50 @@ import { iconsManifest } from '@caidentity/testicon'
|
|
|
86
86
|
// Get all available icons
|
|
87
87
|
console.log(iconsManifest)
|
|
88
88
|
|
|
89
|
-
// Each icon has: { id, name, component, width, height, viewBox, tags? }
|
|
89
|
+
// Each icon has: { id, name, component, width, height, viewBox, tags?, duotoneLayers?, duotoneAssignments?, animation? }
|
|
90
|
+
```
|
|
91
|
+
|
|
92
|
+
## Animation Data Access
|
|
93
|
+
|
|
94
|
+
For Lottie-like animation processing, access the full keyframes data:
|
|
95
|
+
|
|
96
|
+
```tsx
|
|
97
|
+
import { iconsManifest } from '@caidentity/testicon'
|
|
98
|
+
|
|
99
|
+
const animatedIcon = iconsManifest.find(icon => icon.animation?.keyframes)
|
|
100
|
+
if (animatedIcon?.animation) {
|
|
101
|
+
// Full keyframes for custom animation processing
|
|
102
|
+
console.log('Keyframes:', animatedIcon.animation.keyframes)
|
|
103
|
+
console.log('Duration:', animatedIcon.animation.duration)
|
|
104
|
+
console.log('Loop:', animatedIcon.animation.loop)
|
|
105
|
+
|
|
106
|
+
// Implement your own animation logic similar to Lottie
|
|
107
|
+
function animateIcon(time: number) {
|
|
108
|
+
// Process keyframes at current time
|
|
109
|
+
const currentFrame = interpolateKeyframes(animatedIcon.animation.keyframes, time)
|
|
110
|
+
return currentFrame
|
|
111
|
+
}
|
|
112
|
+
}
|
|
113
|
+
```
|
|
114
|
+
|
|
115
|
+
## Duotone Layer Access
|
|
116
|
+
|
|
117
|
+
Access duotone layer information for custom color processing:
|
|
118
|
+
|
|
119
|
+
```tsx
|
|
120
|
+
import { iconsManifest } from '@caidentity/testicon'
|
|
121
|
+
|
|
122
|
+
const duotoneIcon = iconsManifest.find(icon => icon.duotoneLayers)
|
|
123
|
+
if (duotoneIcon) {
|
|
124
|
+
console.log('Duotone layers:', duotoneIcon.duotoneLayers) // 2 or 3
|
|
125
|
+
console.log('Shape assignments:', duotoneIcon.duotoneAssignments) // { shapeId: 'duotone1' | 'duotone2' | 'duotone3' }
|
|
126
|
+
|
|
127
|
+
// Access via Icon component registry (advanced usage)
|
|
128
|
+
import { Icon } from '@caidentity/testicon'
|
|
129
|
+
const iconRegistry = (Icon as any).iconRegistry
|
|
130
|
+
const registryEntry = iconRegistry[duotoneIcon.component]
|
|
131
|
+
console.log('Duotone assignments:', registryEntry.duotoneAssignments)
|
|
132
|
+
}
|
|
90
133
|
```
|
|
91
134
|
|
|
92
135
|
## TypeScript Support
|
package/package.json
CHANGED
package/src/icons/manifest.json
CHANGED
|
@@ -9,7 +9,45 @@
|
|
|
9
9
|
"animation": {
|
|
10
10
|
"duration": 1000,
|
|
11
11
|
"loop": true,
|
|
12
|
-
"autoplay": false
|
|
12
|
+
"autoplay": false,
|
|
13
|
+
"keyframes": [
|
|
14
|
+
{
|
|
15
|
+
"id": "reveal_start",
|
|
16
|
+
"time": 0,
|
|
17
|
+
"properties": {
|
|
18
|
+
"path_wyhsf97": {
|
|
19
|
+
"shapeId": "path_wyhsf97",
|
|
20
|
+
"property": "strokeDashoffset",
|
|
21
|
+
"value": 1000
|
|
22
|
+
}
|
|
23
|
+
},
|
|
24
|
+
"easing": "linear"
|
|
25
|
+
},
|
|
26
|
+
{
|
|
27
|
+
"id": "reveal_mid",
|
|
28
|
+
"time": 0.5,
|
|
29
|
+
"properties": {
|
|
30
|
+
"path_wyhsf97": {
|
|
31
|
+
"shapeId": "path_wyhsf97",
|
|
32
|
+
"property": "strokeDashoffset",
|
|
33
|
+
"value": 500
|
|
34
|
+
}
|
|
35
|
+
},
|
|
36
|
+
"easing": "linear"
|
|
37
|
+
},
|
|
38
|
+
{
|
|
39
|
+
"id": "reveal_end",
|
|
40
|
+
"time": 1,
|
|
41
|
+
"properties": {
|
|
42
|
+
"path_wyhsf97": {
|
|
43
|
+
"shapeId": "path_wyhsf97",
|
|
44
|
+
"property": "strokeDashoffset",
|
|
45
|
+
"value": 0
|
|
46
|
+
}
|
|
47
|
+
},
|
|
48
|
+
"easing": "linear"
|
|
49
|
+
}
|
|
50
|
+
]
|
|
13
51
|
}
|
|
14
52
|
},
|
|
15
53
|
{
|
package/src/icons/manifest.ts
CHANGED
|
@@ -7,10 +7,15 @@ export type IconManifestEntry = {
|
|
|
7
7
|
height: number
|
|
8
8
|
viewBox: string
|
|
9
9
|
tags?: string[]
|
|
10
|
+
duotoneLayers?: number
|
|
11
|
+
duotoneAssignments?: Record<string, string>
|
|
10
12
|
animation?: {
|
|
11
13
|
duration?: number
|
|
12
14
|
loop?: boolean | number
|
|
13
15
|
autoplay?: boolean
|
|
16
|
+
delay?: number
|
|
17
|
+
direction?: 'normal' | 'reverse' | 'alternate'
|
|
18
|
+
keyframes?: any[]
|
|
14
19
|
}
|
|
15
20
|
}
|
|
16
21
|
|
|
@@ -25,7 +30,45 @@ export const iconsManifest: IconManifestEntry[] = [
|
|
|
25
30
|
"animation": {
|
|
26
31
|
"duration": 1000,
|
|
27
32
|
"loop": true,
|
|
28
|
-
"autoplay": false
|
|
33
|
+
"autoplay": false,
|
|
34
|
+
"keyframes": [
|
|
35
|
+
{
|
|
36
|
+
"id": "reveal_start",
|
|
37
|
+
"time": 0,
|
|
38
|
+
"properties": {
|
|
39
|
+
"path_wyhsf97": {
|
|
40
|
+
"shapeId": "path_wyhsf97",
|
|
41
|
+
"property": "strokeDashoffset",
|
|
42
|
+
"value": 1000
|
|
43
|
+
}
|
|
44
|
+
},
|
|
45
|
+
"easing": "linear"
|
|
46
|
+
},
|
|
47
|
+
{
|
|
48
|
+
"id": "reveal_mid",
|
|
49
|
+
"time": 0.5,
|
|
50
|
+
"properties": {
|
|
51
|
+
"path_wyhsf97": {
|
|
52
|
+
"shapeId": "path_wyhsf97",
|
|
53
|
+
"property": "strokeDashoffset",
|
|
54
|
+
"value": 500
|
|
55
|
+
}
|
|
56
|
+
},
|
|
57
|
+
"easing": "linear"
|
|
58
|
+
},
|
|
59
|
+
{
|
|
60
|
+
"id": "reveal_end",
|
|
61
|
+
"time": 1,
|
|
62
|
+
"properties": {
|
|
63
|
+
"path_wyhsf97": {
|
|
64
|
+
"shapeId": "path_wyhsf97",
|
|
65
|
+
"property": "strokeDashoffset",
|
|
66
|
+
"value": 0
|
|
67
|
+
}
|
|
68
|
+
},
|
|
69
|
+
"easing": "linear"
|
|
70
|
+
}
|
|
71
|
+
]
|
|
29
72
|
}
|
|
30
73
|
},
|
|
31
74
|
{
|