@bysages/icons 0.2.2 → 0.3.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 +70 -0
- package/dist/index.d.mts +2076 -61
- package/dist/index.mjs +10309 -80
- package/package.json +7 -5
package/README.md
ADDED
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
# @bysages/icons
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
> The icon registry for By Sages Elements — the [Lucide](https://lucide.dev) collection as named exports, one canonical set for every framework wrapper.
|
|
8
|
+
|
|
9
|
+
## Features
|
|
10
|
+
|
|
11
|
+
- 🗂 **The collection whole, as named exports** — every Lucide glyph is one `IconifyIcon` constant (`import { calendar } from "@bysages/icons"`); a consumer that knows which glyph it wants imports that one name
|
|
12
|
+
- 📦 **Shakeable by construction** — the set compiles to per-glyph ES exports at generation time, so bundlers ship only the imports actually made, never the 590 KB raw JSON
|
|
13
|
+
- 🧩 **One set, every framework** — react, vue, solid, and svelte all draw from this one registry, so a glyph never drifts between frameworks
|
|
14
|
+
|
|
15
|
+
## Installation
|
|
16
|
+
|
|
17
|
+
```bash
|
|
18
|
+
# pnpm
|
|
19
|
+
pnpm add @bysages/icons
|
|
20
|
+
|
|
21
|
+
# npm
|
|
22
|
+
npm install @bysages/icons
|
|
23
|
+
|
|
24
|
+
# yarn
|
|
25
|
+
yarn add @bysages/icons
|
|
26
|
+
|
|
27
|
+
# bun
|
|
28
|
+
bun add @bysages/icons
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
## Usage
|
|
32
|
+
|
|
33
|
+
Import the glyph by name and render it through any wrapper's `Icon`:
|
|
34
|
+
|
|
35
|
+
```vue
|
|
36
|
+
<script setup lang="ts">
|
|
37
|
+
import { Icon } from "@bysages/vue";
|
|
38
|
+
import { calendar } from "@bysages/icons";
|
|
39
|
+
</script>
|
|
40
|
+
|
|
41
|
+
<template>
|
|
42
|
+
<Icon :glyph="calendar" label="Pick a date" />
|
|
43
|
+
</template>
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
Regenerate after the collection package updates:
|
|
47
|
+
|
|
48
|
+
```bash
|
|
49
|
+
pnpm --filter @bysages/icons generate
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
## Why lucide, and why named exports
|
|
53
|
+
|
|
54
|
+
The collection is **Lucide**: feather-lineage strokes on a 24px grid —
|
|
55
|
+
2px, rounded caps and joins — the most actively maintained open set
|
|
56
|
+
today, at home on warm paper, and the set code-generating agents name by
|
|
57
|
+
default.
|
|
58
|
+
|
|
59
|
+
Serving the raw `icons.json` would hand every consumer the whole 590 KB
|
|
60
|
+
(JSON does not tree-shake), and per-icon subpaths do not exist. So the
|
|
61
|
+
collection compiles to named exports once, at generation time —
|
|
62
|
+
`data.generated.ts` is committed, and `generate` runs only when the
|
|
63
|
+
collection changes, never during build. The wrappers' own registry (the
|
|
64
|
+
few glyphs the components draw) is curated in
|
|
65
|
+
[`@bysages/core`](../core/README.md); everything else is a direct import
|
|
66
|
+
away.
|
|
67
|
+
|
|
68
|
+
## License
|
|
69
|
+
|
|
70
|
+
- [MIT](../../LICENSE) © [By Sages](https://www.bysages.com/)
|