@fest-lib/icon 0.1.14 → 0.1.15
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 +52 -10
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,29 +1,71 @@
|
|
|
1
|
-
|
|
1
|
+
<p align="center">
|
|
2
|
+
<strong>@fest-lib/icon</strong><br>
|
|
3
|
+
Phosphor <code><ui-icon></code> with OPFS + CSS-registry caches — no CDN hit per glyph after warm.
|
|
4
|
+
</p>
|
|
2
5
|
|
|
3
|
-
|
|
6
|
+
<p align="center">
|
|
7
|
+
<a href="https://www.npmjs.com/package/@fest-lib/icon"><img src="https://img.shields.io/npm/v/@fest-lib/icon?style=flat-square" alt="npm"></a>
|
|
8
|
+
<a href="LICENSE"><img src="https://img.shields.io/npm/l/@fest-lib/icon?style=flat-square" alt="MIT"></a>
|
|
9
|
+
<a href="https://github.com/fest-live/icon.ts"><img src="https://img.shields.io/github/stars/fest-live/icon.ts?style=flat-square" alt="stars"></a>
|
|
10
|
+
</p>
|
|
4
11
|
|
|
5
|
-
Default export is `UIPhosphorIcon`.
|
|
12
|
+
Default export is `UIPhosphorIcon`. Glyphs come from `@phosphor-icons/core` (bundled dependency). First paint can prefetch; later loads read OPFS / the CSS registry.
|
|
13
|
+
|
|
14
|
+
```text
|
|
15
|
+
core · dom · object · lure · uniform
|
|
16
|
+
└── fest/icon ← you are here
|
|
17
|
+
└── fl-ui · Speed Dial · App Menu
|
|
18
|
+
```
|
|
6
19
|
|
|
7
20
|
## Install
|
|
8
21
|
|
|
9
22
|
```bash
|
|
10
|
-
npm install @fest-lib/icon
|
|
23
|
+
npm install @fest-lib/core @fest-lib/dom @fest-lib/object @fest-lib/uniform @fest-lib/lure @fest-lib/icon
|
|
11
24
|
```
|
|
12
25
|
|
|
26
|
+
Peers: `core`, `dom`, `object`, `uniform`. Runtime also uses LUR.E (listed as a dependency).
|
|
27
|
+
|
|
13
28
|
```ts
|
|
14
29
|
import UIPhosphorIcon, { prefetchIcon, getIconCacheStats } from "@fest-lib/icon";
|
|
15
30
|
|
|
16
|
-
customElements.
|
|
31
|
+
if (!customElements.get("ui-icon")) {
|
|
32
|
+
customElements.define("ui-icon", UIPhosphorIcon);
|
|
33
|
+
}
|
|
17
34
|
await prefetchIcon("house");
|
|
35
|
+
console.log(getIconCacheStats());
|
|
18
36
|
```
|
|
19
37
|
|
|
38
|
+
```html
|
|
39
|
+
<ui-icon icon="house" icon-style="duotone"></ui-icon>
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
## API
|
|
43
|
+
|
|
44
|
+
| Export | Role |
|
|
45
|
+
| --- | --- |
|
|
46
|
+
| `UIPhosphorIcon` (default) | custom element |
|
|
47
|
+
| `prefetchIcon` / `invalidateIconCache` / `clearIconCaches` | memory loader |
|
|
48
|
+
| `initOPFSCache` / `clearIconCache` / `getIconCacheStats` | OPFS |
|
|
49
|
+
| `registerIconRule` / `preregisterIcons` / `getRegistryStats` | CSS registry |
|
|
50
|
+
| `isOPFSSupported` | feature detect |
|
|
51
|
+
|
|
20
52
|
## Layout
|
|
21
53
|
|
|
22
54
|
| Path | Role |
|
|
23
55
|
| --- | --- |
|
|
24
|
-
| `src/loader/Phosphor.ts` | `<ui-icon>`
|
|
25
|
-
| `src/loader/OPFSCache.ts` | OPFS
|
|
26
|
-
| `src/loader/Loader.ts` | in-memory load
|
|
27
|
-
| `src/loader/CSSIconRegistry.ts` |
|
|
56
|
+
| `src/loader/Phosphor.ts` | `<ui-icon>` |
|
|
57
|
+
| `src/loader/OPFSCache.ts` | OPFS |
|
|
58
|
+
| `src/loader/Loader.ts` | in-memory load |
|
|
59
|
+
| `src/loader/CSSIconRegistry.ts` | stylesheet rules |
|
|
60
|
+
|
|
61
|
+
## Workspace
|
|
62
|
+
|
|
63
|
+
```bash
|
|
64
|
+
cd modules/projects/icon.ts
|
|
65
|
+
npm run generate:phosphor-map
|
|
66
|
+
npm run dev
|
|
67
|
+
npm run build
|
|
68
|
+
npm run publish
|
|
69
|
+
```
|
|
28
70
|
|
|
29
|
-
|
|
71
|
+
License: [MIT](LICENSE).
|