@zcorvus/icons 0.1.0 → 0.1.1
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/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
# @zcorvus/icons
|
|
2
|
+
|
|
3
|
+
Framework-agnostic SVG icon package for ZCorvus icons.
|
|
4
|
+
|
|
5
|
+
Browse all available icons at [icons.zcorvus.com](https://icons.zcorvus.com/).
|
|
6
|
+
|
|
7
|
+
## Installation
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
pnpm add @zcorvus/icons
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
Use this package when you need raw SVG strings, icon names, icon types, or framework-agnostic helpers. For React components, use `@zcorvus/icons-react`.
|
|
14
|
+
|
|
15
|
+
## SVG Strings
|
|
16
|
+
|
|
17
|
+
Import SVG strings from the `svg` entry:
|
|
18
|
+
|
|
19
|
+
```ts
|
|
20
|
+
import { MinaCheck, MinaCheckSolid } from '@zcorvus/icons/svg';
|
|
21
|
+
|
|
22
|
+
console.log(MinaCheck);
|
|
23
|
+
// '<svg ...>...</svg>'
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
Direct file imports are also available:
|
|
27
|
+
|
|
28
|
+
```ts
|
|
29
|
+
import MinaCheck from '@zcorvus/icons/svg/mina-check';
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
These exports are framework-agnostic. Render them with the mechanism your framework provides for trusted SVG/HTML strings.
|
|
33
|
+
|
|
34
|
+
```tsx
|
|
35
|
+
// React example
|
|
36
|
+
import { MinaCheck } from '@zcorvus/icons/svg';
|
|
37
|
+
|
|
38
|
+
export function RawIcon() {
|
|
39
|
+
return <span dangerouslySetInnerHTML={{ __html: MinaCheck }} />;
|
|
40
|
+
}
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
## Icon Names
|
|
44
|
+
|
|
45
|
+
Use icon name arrays when building explorers, search indexes, pickers, or validation UIs.
|
|
46
|
+
|
|
47
|
+
```ts
|
|
48
|
+
import { coreIconNames, neoIconNames, minaIconNames } from '@zcorvus/icons/names';
|
|
49
|
+
|
|
50
|
+
console.log(minaIconNames.includes('search'));
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
## Types
|
|
54
|
+
|
|
55
|
+
Use type-only imports so TypeScript removes them from runtime bundles.
|
|
56
|
+
|
|
57
|
+
```ts
|
|
58
|
+
import type {
|
|
59
|
+
CoreIconName,
|
|
60
|
+
NeoIconName,
|
|
61
|
+
MinaIconName,
|
|
62
|
+
AllIconNames,
|
|
63
|
+
IconPack,
|
|
64
|
+
IconVariant,
|
|
65
|
+
} from '@zcorvus/icons/types';
|
|
66
|
+
```
|
|
67
|
+
|
|
68
|
+
## Runtime Helper
|
|
69
|
+
|
|
70
|
+
Use `getIconSvg` when pack, name, or variant are dynamic.
|
|
71
|
+
|
|
72
|
+
```ts
|
|
73
|
+
import { getIconSvg } from '@zcorvus/icons';
|
|
74
|
+
|
|
75
|
+
const svg = getIconSvg('mina', 'search', 'solid');
|
|
76
|
+
```
|
|
77
|
+
|
|
78
|
+
`getIconSvg` prioritizes dynamic lookup ergonomics and can include the icon dictionaries. Prefer direct SVG imports when bundle size is critical.
|
|
79
|
+
|
|
80
|
+
## Package Entries
|
|
81
|
+
|
|
82
|
+
```ts
|
|
83
|
+
import { getIconSvg } from '@zcorvus/icons';
|
|
84
|
+
import { MinaCheck } from '@zcorvus/icons/svg';
|
|
85
|
+
import MinaCheck from '@zcorvus/icons/svg/mina-check';
|
|
86
|
+
import { minaIconNames } from '@zcorvus/icons/names';
|
|
87
|
+
import type { MinaIconName } from '@zcorvus/icons/types';
|
|
88
|
+
```
|
|
89
|
+
|
|
90
|
+
## Migration
|
|
91
|
+
|
|
92
|
+
This package replaces the framework-agnostic API from `@zcorvus/z-icons`.
|
|
93
|
+
|
|
94
|
+
| Old import | New import |
|
|
95
|
+
| --- | --- |
|
|
96
|
+
| `@zcorvus/z-icons/icons` | `@zcorvus/icons/svg`, `@zcorvus/icons/names`, `@zcorvus/icons/types` |
|
|
97
|
+
| `@zcorvus/z-icons/core` | `@zcorvus/icons/svg`, `@zcorvus/icons/names`, `@zcorvus/icons/types` |
|
|
98
|
+
| `@zcorvus/z-icons/mina` | `@zcorvus/icons/svg`, `@zcorvus/icons/names`, `@zcorvus/icons/types` |
|