@leta-io/icons 0.1.0 → 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 +40 -6
- package/dist/index.d.ts +18 -1048
- package/dist/index.js +664 -1067
- package/package.json +4 -1
package/README.md
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
# @leta-io/icons
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
3
|
+
Icon registry for the LETA design system. Outlined is the default; 137 of the 261
|
|
4
|
+
icons also ship a filled variant, and names that have only one glyph fall back to
|
|
5
|
+
it automatically, so `outlined` is always safe to pass.
|
|
5
6
|
|
|
6
7
|
```bash
|
|
7
8
|
npm install @leta-io/icons
|
|
@@ -14,13 +15,46 @@ import { Icon } from '@leta-io/icons';
|
|
|
14
15
|
<Icon name="Check-Circle" outlined={false} />
|
|
15
16
|
```
|
|
16
17
|
|
|
18
|
+
## Where the glyphs come from
|
|
19
|
+
|
|
20
|
+
Four libraries, resolved at build time. **Which one backs a given icon is an
|
|
21
|
+
implementation detail** — you always reference an icon by its LETA name, and the
|
|
22
|
+
`Icon` component renders every source identically.
|
|
23
|
+
|
|
24
|
+
| Source | Icons | Package |
|
|
25
|
+
|---|---|---|
|
|
26
|
+
| Material Symbols (rounded) | 248 | `@material-symbols/svg-500` |
|
|
27
|
+
| Tabler | 10 | `@iconify-json/tabler` |
|
|
28
|
+
| Phosphor | 2 | `@iconify-json/ph` |
|
|
29
|
+
| Material Design Icons | 1 | `@iconify-json/mdi` |
|
|
30
|
+
|
|
31
|
+
Material Symbols is the house set and covers almost everything. The other three
|
|
32
|
+
exist because Figma reaches for them where Material Symbols has no suitable
|
|
33
|
+
glyph — currently `Pending`, `Insights`, `KPI-Target`, `Leaderboard`,
|
|
34
|
+
`Artificial-Intelligence`, `Circle-Large` (Tabler), `Bar-Chart` (Phosphor) and
|
|
35
|
+
`Circle-Medium` (MDI).
|
|
36
|
+
|
|
37
|
+
The source is **read from the Figma glyph layer's own name**, which is an Iconify
|
|
38
|
+
identifier (`tabler:bulb-filled`, `ph:chart-bar`). Nothing about the LETA icon
|
|
39
|
+
name encodes it, so a designer swapping an icon's underlying glyph for one from a
|
|
40
|
+
different library needs no code change beyond re-running the registry — and
|
|
41
|
+
`IconName` never carries a library prefix.
|
|
42
|
+
|
|
43
|
+
Adding a fifth library is a dependency plus one entry in `ICONIFY_SETS` in
|
|
44
|
+
`scripts/build-registry.ts`.
|
|
45
|
+
|
|
17
46
|
## Notes
|
|
18
47
|
|
|
19
48
|
- `IconName` is exported as a union of all available names, so the set is
|
|
20
|
-
typo-proof at compile time.
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
49
|
+
typo-proof at compile time. It is declared independently of the registry value,
|
|
50
|
+
so importing only the type costs you nothing — the published declarations are
|
|
51
|
+
~6 KB, not the size of the glyph data.
|
|
52
|
+
- The registry is a single module containing every icon, so importing one pulls in
|
|
53
|
+
all of them (~327 KB). That is a consequence of the API: icons are selected by
|
|
54
|
+
*name* at runtime, so the full set has to be present. Fine for an app; worth
|
|
55
|
+
knowing if you are optimising a small bundle.
|
|
56
|
+
- Glyphs are stored pre-stripped of their `<svg>` wrapper — `Icon` supplies its own,
|
|
57
|
+
so it can control size, fill and aria consistently.
|
|
24
58
|
|
|
25
59
|
Part of the LETA design system, alongside
|
|
26
60
|
[`@leta-io/components`](https://www.npmjs.com/package/@leta-io/components) and
|