@caidentity/testicon 0.0.12 → 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/src/Icon.tsx +1 -1
- package/src/index.ts +1 -0
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
|
+
```
|
package/package.json
CHANGED
package/src/Icon.tsx
CHANGED
|
@@ -12,7 +12,7 @@ const iconRegistry = {
|
|
|
12
12
|
"viewBox": "0 0 800 600"
|
|
13
13
|
},
|
|
14
14
|
"frame-b0y6eye-1765734231799": {
|
|
15
|
-
"svg": "<g transform=\"translate(-
|
|
15
|
+
"svg": "<g transform=\"translate(-2349, -237)\"><path d=\"M 8 -90 L 422 -90 Q 430 -90 430 -82 L 430 172 Q 430 180 422 180 L 8 180 Q 0 180 0 172 L 0 -82 Q 0 -90 8 -90 Z\" fill=\"none\" fill-opacity=\"0\" stroke=\"#000000\" stroke-opacity=\"1\" strokeWidth=\"2\" strokeLinecap=\"butt\" strokeLinejoin=\"miter\" transform=\"translate(747,440)\" />\n<path d=\"M 4 0 L 4 0 Q 8 0 8 4 L 8 4 Q 8 8 4 8 L 4 8 Q 0 8 0 4 L 0 4 Q 0 0 4 0 Z\" fill=\"none\" fill-opacity=\"0\" stroke=\"#ffcfcfff\" stroke-opacity=\"1\" strokeWidth=\"2\" strokeLinecap=\"butt\" strokeLinejoin=\"miter\" transform=\"translate(1031,671)\" />\n<path d=\"M 0 0 L 0 153 L 186 153 L 186 -7\" fill=\"none\" fill-opacity=\"0\" stroke=\"#000000\" stroke-opacity=\"1\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" transform=\"translate(1761,552)\" />\n<path d=\"M 8 -90 L 422 -90 Q 430 -90 430 -82 L 430 172 Q 430 180 422 180 L 8 180 Q 0 180 0 172 L 0 -82 Q 0 -90 8 -90 Z\" fill=\"none\" fill-opacity=\"0\" stroke=\"#000000\" stroke-opacity=\"1\" strokeWidth=\"2\" strokeLinecap=\"butt\" strokeLinejoin=\"miter\" transform=\"translate(1611,438)\" />\n<path d=\"M 0 0 L 134 547 L 332 411 L 391 20 L 160 172\" fill=\"none\" fill-opacity=\"0\" stroke=\"#000000\" stroke-opacity=\"1\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" transform=\"translate(2424,313)\" />\n<path d=\"M 0 0 L -30 174 L 161 183 L 196 110 L 112 25 L -11 190 L 17 15 L 241 5 L -42 -119\" fill=\"none\" fill-opacity=\"0\" stroke=\"#000000\" stroke-opacity=\"1\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" transform=\"translate(2661,291)\" /></g>",
|
|
16
16
|
"viewBox": "0 0 800 600"
|
|
17
17
|
}
|
|
18
18
|
}
|
package/src/index.ts
CHANGED