@smbdy/icons-react 0.2.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/CHANGELOG.md +150 -0
- package/LICENSE +21 -0
- package/NOTICE +33 -0
- package/README.md +125 -0
- package/dist/_all-BBSV7W5A.js +12 -0
- package/dist/_all-BBSV7W5A.js.map +1 -0
- package/dist/_all-Q3TOEXIL.cjs +12 -0
- package/dist/_all-Q3TOEXIL.cjs.map +1 -0
- package/dist/aave.full-KYPGIYIN.cjs +7 -0
- package/dist/aave.full-KYPGIYIN.cjs.map +1 -0
- package/dist/aave.full-QNOLSN64.js +7 -0
- package/dist/aave.full-QNOLSN64.js.map +1 -0
- package/dist/aave.mono-DFM2DC7D.js +7 -0
- package/dist/aave.mono-DFM2DC7D.js.map +1 -0
- package/dist/aave.mono-HESKUGIT.cjs +7 -0
- package/dist/aave.mono-HESKUGIT.cjs.map +1 -0
- package/dist/bnb.full-ECKVIICN.js +7 -0
- package/dist/bnb.full-ECKVIICN.js.map +1 -0
- package/dist/bnb.full-OVSE5GL5.cjs +7 -0
- package/dist/bnb.full-OVSE5GL5.cjs.map +1 -0
- package/dist/bnb.mono-BJKFGB4W.js +7 -0
- package/dist/bnb.mono-BJKFGB4W.js.map +1 -0
- package/dist/bnb.mono-ZGBCCQNU.cjs +7 -0
- package/dist/bnb.mono-ZGBCCQNU.cjs.map +1 -0
- package/dist/brands-FNU44Q5D.cjs +6 -0
- package/dist/brands-FNU44Q5D.cjs.map +1 -0
- package/dist/brands-VFBGFQDR.js +6 -0
- package/dist/brands-VFBGFQDR.js.map +1 -0
- package/dist/brands.cjs +7 -0
- package/dist/brands.cjs.map +1 -0
- package/dist/brands.d.cts +6 -0
- package/dist/brands.d.ts +6 -0
- package/dist/brands.js +7 -0
- package/dist/brands.js.map +1 -0
- package/dist/chains-4PZO7QNB.cjs +6 -0
- package/dist/chains-4PZO7QNB.cjs.map +1 -0
- package/dist/chains-DRDCRCHX.js +6 -0
- package/dist/chains-DRDCRCHX.js.map +1 -0
- package/dist/chains.cjs +7 -0
- package/dist/chains.cjs.map +1 -0
- package/dist/chains.d.cts +6 -0
- package/dist/chains.d.ts +6 -0
- package/dist/chains.js +7 -0
- package/dist/chains.js.map +1 -0
- package/dist/chunk-26TL622R.js +185 -0
- package/dist/chunk-26TL622R.js.map +1 -0
- package/dist/chunk-3KPQTLV2.js +25 -0
- package/dist/chunk-3KPQTLV2.js.map +1 -0
- package/dist/chunk-5SMAZ4HC.cjs +46 -0
- package/dist/chunk-5SMAZ4HC.cjs.map +1 -0
- package/dist/chunk-6QMWOF6K.cjs +13 -0
- package/dist/chunk-6QMWOF6K.cjs.map +1 -0
- package/dist/chunk-6XTX7IGY.cjs +22 -0
- package/dist/chunk-6XTX7IGY.cjs.map +1 -0
- package/dist/chunk-77JHKGHS.js +17 -0
- package/dist/chunk-77JHKGHS.js.map +1 -0
- package/dist/chunk-AFPT5VBY.cjs +13 -0
- package/dist/chunk-AFPT5VBY.cjs.map +1 -0
- package/dist/chunk-BM7JPYFS.cjs +19 -0
- package/dist/chunk-BM7JPYFS.cjs.map +1 -0
- package/dist/chunk-CRZCJKV5.cjs +224 -0
- package/dist/chunk-CRZCJKV5.cjs.map +1 -0
- package/dist/chunk-EH2XXR25.cjs +22 -0
- package/dist/chunk-EH2XXR25.cjs.map +1 -0
- package/dist/chunk-EKA2NTJ5.cjs +211 -0
- package/dist/chunk-EKA2NTJ5.cjs.map +1 -0
- package/dist/chunk-ERIDAEIF.js +22 -0
- package/dist/chunk-ERIDAEIF.js.map +1 -0
- package/dist/chunk-GNITCB7H.cjs +19 -0
- package/dist/chunk-GNITCB7H.cjs.map +1 -0
- package/dist/chunk-H2CCXC2D.cjs +16 -0
- package/dist/chunk-H2CCXC2D.cjs.map +1 -0
- package/dist/chunk-HJRZBSWY.cjs +51 -0
- package/dist/chunk-HJRZBSWY.cjs.map +1 -0
- package/dist/chunk-I5KA3VJG.js +224 -0
- package/dist/chunk-I5KA3VJG.js.map +1 -0
- package/dist/chunk-IVJRG2GG.js +46 -0
- package/dist/chunk-IVJRG2GG.js.map +1 -0
- package/dist/chunk-JA27XHAD.js +19 -0
- package/dist/chunk-JA27XHAD.js.map +1 -0
- package/dist/chunk-KMTZSDBE.js +40 -0
- package/dist/chunk-KMTZSDBE.js.map +1 -0
- package/dist/chunk-N7LPPHJT.cjs +185 -0
- package/dist/chunk-N7LPPHJT.cjs.map +1 -0
- package/dist/chunk-OL25DU4X.cjs +23 -0
- package/dist/chunk-OL25DU4X.cjs.map +1 -0
- package/dist/chunk-PJMAHDQ2.cjs +25 -0
- package/dist/chunk-PJMAHDQ2.cjs.map +1 -0
- package/dist/chunk-T7LMMTZ2.js +23 -0
- package/dist/chunk-T7LMMTZ2.js.map +1 -0
- package/dist/chunk-TLBOMZFB.js +19 -0
- package/dist/chunk-TLBOMZFB.js.map +1 -0
- package/dist/chunk-U2YXVQS5.cjs +40 -0
- package/dist/chunk-U2YXVQS5.cjs.map +1 -0
- package/dist/chunk-V6AIRXAS.js +16 -0
- package/dist/chunk-V6AIRXAS.js.map +1 -0
- package/dist/chunk-VBAYCH3Q.js +13 -0
- package/dist/chunk-VBAYCH3Q.js.map +1 -0
- package/dist/chunk-VUNBMIIF.cjs +17 -0
- package/dist/chunk-VUNBMIIF.cjs.map +1 -0
- package/dist/chunk-WIG74DHT.js +51 -0
- package/dist/chunk-WIG74DHT.js.map +1 -0
- package/dist/chunk-XJEH7SUV.js +13 -0
- package/dist/chunk-XJEH7SUV.js.map +1 -0
- package/dist/chunk-XQEXQBRL.js +211 -0
- package/dist/chunk-XQEXQBRL.js.map +1 -0
- package/dist/chunk-YYLVPTHE.js +22 -0
- package/dist/chunk-YYLVPTHE.js.map +1 -0
- package/dist/compat.cjs +55 -0
- package/dist/compat.cjs.map +1 -0
- package/dist/compat.d.cts +20 -0
- package/dist/compat.d.ts +20 -0
- package/dist/compat.js +55 -0
- package/dist/compat.js.map +1 -0
- package/dist/frames.cjs +7 -0
- package/dist/frames.cjs.map +1 -0
- package/dist/frames.d.cts +14 -0
- package/dist/frames.d.ts +14 -0
- package/dist/frames.js +7 -0
- package/dist/frames.js.map +1 -0
- package/dist/github-fallback-FDNEH2BW.js +275 -0
- package/dist/github-fallback-FDNEH2BW.js.map +1 -0
- package/dist/github-fallback-YJY3LJG7.cjs +275 -0
- package/dist/github-fallback-YJY3LJG7.cjs.map +1 -0
- package/dist/icon-props-Cbax4n57.d.cts +9 -0
- package/dist/icon-props-Cbax4n57.d.ts +9 -0
- package/dist/index.cjs +15 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.cts +23 -0
- package/dist/index.d.ts +23 -0
- package/dist/index.js +15 -0
- package/dist/index.js.map +1 -0
- package/dist/link.full-BLJRZF6N.cjs +7 -0
- package/dist/link.full-BLJRZF6N.cjs.map +1 -0
- package/dist/link.full-DYTFNQHD.js +7 -0
- package/dist/link.full-DYTFNQHD.js.map +1 -0
- package/dist/link.mono-EXHT3WNS.cjs +7 -0
- package/dist/link.mono-EXHT3WNS.cjs.map +1 -0
- package/dist/link.mono-UJUAYACL.js +7 -0
- package/dist/link.mono-UJUAYACL.js.map +1 -0
- package/dist/pteusde.full-64LQVQ62.js +7 -0
- package/dist/pteusde.full-64LQVQ62.js.map +1 -0
- package/dist/pteusde.full-XSAPIA7I.cjs +7 -0
- package/dist/pteusde.full-XSAPIA7I.cjs.map +1 -0
- package/dist/pteusde.mono-B7RIQ4FK.cjs +7 -0
- package/dist/pteusde.mono-B7RIQ4FK.cjs.map +1 -0
- package/dist/pteusde.mono-NXQFXTCE.js +7 -0
- package/dist/pteusde.mono-NXQFXTCE.js.map +1 -0
- package/dist/tokens-3LM2CSL4.cjs +12 -0
- package/dist/tokens-3LM2CSL4.cjs.map +1 -0
- package/dist/tokens-SMSY4G7E.js +12 -0
- package/dist/tokens-SMSY4G7E.js.map +1 -0
- package/dist/tokens.cjs +90 -0
- package/dist/tokens.cjs.map +1 -0
- package/dist/tokens.d.cts +24 -0
- package/dist/tokens.d.ts +24 -0
- package/dist/tokens.js +90 -0
- package/dist/tokens.js.map +1 -0
- package/dist/uni.full-6CTLVORZ.js +7 -0
- package/dist/uni.full-6CTLVORZ.js.map +1 -0
- package/dist/uni.full-RYRRWMS4.cjs +7 -0
- package/dist/uni.full-RYRRWMS4.cjs.map +1 -0
- package/dist/uni.mono-B7C2JVKM.js +7 -0
- package/dist/uni.mono-B7C2JVKM.js.map +1 -0
- package/dist/uni.mono-LK6DAZYZ.cjs +7 -0
- package/dist/uni.mono-LK6DAZYZ.cjs.map +1 -0
- package/package.json +125 -0
package/CHANGELOG.md
ADDED
|
@@ -0,0 +1,150 @@
|
|
|
1
|
+
# @smbdy/icons-react
|
|
2
|
+
|
|
3
|
+
## 0.2.1
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- 6553403: Scale optimizations for large icon sets (measured at ~2,200 icons):
|
|
8
|
+
- **Compact-encoded metadata and aliases.** Generated `META`/`TYPE_ALIASES`
|
|
9
|
+
ship as string tables decoded once at module init instead of giant object
|
|
10
|
+
literals: ~25% smaller compressed core entry, ~50% smaller `/resolve`
|
|
11
|
+
entry, and two-thirds less raw JavaScript to parse on import. Public
|
|
12
|
+
exports and shapes are unchanged.
|
|
13
|
+
- **Sub-sharded lazy import maps.** The per-type id → chunk map is split by
|
|
14
|
+
id prefix behind a tiny dispatcher, so the first lazy icon render loads a
|
|
15
|
+
few hundred bytes of map instead of the whole type's map (~30 kB at full
|
|
16
|
+
scale). Types with few icons collapse to a single shard.
|
|
17
|
+
|
|
18
|
+
- Updated dependencies [6553403]
|
|
19
|
+
- @smbdy/icons@0.2.1
|
|
20
|
+
|
|
21
|
+
## 0.2.0
|
|
22
|
+
|
|
23
|
+
### Minor Changes
|
|
24
|
+
|
|
25
|
+
- 3b0a920: Performance: variant-split lazy chunks and runtime cache work.
|
|
26
|
+
|
|
27
|
+
**React (`@smbdy/icons-react`):**
|
|
28
|
+
- **Variant-level code splitting.** Lazy icons now ship as separate
|
|
29
|
+
`full`/`mono` chunks behind the per-type shards — a mono-only consumer
|
|
30
|
+
downloads roughly half the bytes per icon. The public API is unchanged
|
|
31
|
+
(`<Icon mono />`, `<EthIcon mono />`); only the chunk shape differs.
|
|
32
|
+
- **Network fallback caching.** The fetched-SVG cache now memoises the
|
|
33
|
+
sanitized, converted React content per URL, so many mounts of the same
|
|
34
|
+
fallback icon run DOMPurify once instead of once per instance. Cache
|
|
35
|
+
bookkeeping dropped its O(n) eviction list in favour of Map insertion
|
|
36
|
+
order.
|
|
37
|
+
- `useIconConfig` no longer allocates a fresh config object on every
|
|
38
|
+
`<Icon>` render.
|
|
39
|
+
|
|
40
|
+
**Core (`@smbdy/icons`):**
|
|
41
|
+
- The cross-type alias map is now built lazily on the first untyped
|
|
42
|
+
`resolve()` call — apps that only use typed resolvers (`resolveToken`
|
|
43
|
+
etc.) no longer pay for it at import time.
|
|
44
|
+
|
|
45
|
+
- 6d8f912: Pre-launch API consolidation and hardening.
|
|
46
|
+
|
|
47
|
+
**Core (`@smbdy/icons`):**
|
|
48
|
+
- `IconMeta` now carries the canonical `id`, so `getMeta('wbnb').id === 'bnb'`
|
|
49
|
+
without a second resolve call.
|
|
50
|
+
- New `listIcons(type?)` enumeration API for galleries and pickers.
|
|
51
|
+
- `IdentityKey` (`` `${type}:${id}` ``) is exported and `META` is typed with
|
|
52
|
+
it — the composite-key contract from ADR-0002 is now part of the typed API.
|
|
53
|
+
- The resolver (`resolve`, `resolveOrCandidate`, typed resolvers) is
|
|
54
|
+
re-exported from the package root.
|
|
55
|
+
- Typed getters now accept the same inputs as the typed resolvers:
|
|
56
|
+
`getTokenMeta('wbnb')`, `getTokenSvg('wbnb')`, `getChainMeta(1)` all
|
|
57
|
+
resolve aliases — "it resolves there, it resolves everywhere".
|
|
58
|
+
- `ResolvedOrCandidate.type` is `IconType | undefined` instead of
|
|
59
|
+
`IconType | null` on a miss.
|
|
60
|
+
- New exported `IconVariant` type (`'full' | 'mono'`).
|
|
61
|
+
- ESM output is code-split: the alias maps, identity helpers, and SVG shards
|
|
62
|
+
exist exactly once in dist instead of being inlined into every entry; the
|
|
63
|
+
cross-type alias map is derived at module init from the per-type maps,
|
|
64
|
+
halving the shipped alias payload.
|
|
65
|
+
|
|
66
|
+
**React (`@smbdy/icons-react`):**
|
|
67
|
+
- `mono?: boolean` is the single variant vocabulary everywhere: generated
|
|
68
|
+
per-icon components (`<EthIcon mono />`) and `FrameWrapper` drop the
|
|
69
|
+
`variant` prop.
|
|
70
|
+
- `<Icon ref>` is rejected at the type level (it previously typechecked but
|
|
71
|
+
silently did nothing); generated per-icon components forward refs to their
|
|
72
|
+
`<svg>` root.
|
|
73
|
+
- React peer range narrowed to `^18 || ^19` (React 17 could not actually be
|
|
74
|
+
supported: Suspense SSR and `react/jsx-runtime` subpath resolution).
|
|
75
|
+
- A rejected lazy icon chunk (stale-chunk 404 after a redeploy) no longer
|
|
76
|
+
throws into the nearest error boundary — the icon renders nothing, the
|
|
77
|
+
poisoned cache entry is evicted so the next mount retries, and a dev
|
|
78
|
+
warning surfaces the cause.
|
|
79
|
+
- Network fallback: concurrent requests for the same URL are deduplicated;
|
|
80
|
+
timeouts and network errors are no longer negative-cached (only definitive
|
|
81
|
+
404s are); a failed fetch retries once per negative-cache window instead
|
|
82
|
+
of failing permanently for the component's lifetime; the accessible name
|
|
83
|
+
uses the original `value` instead of the normalized id.
|
|
84
|
+
- Lazy icons mirror an explicit `size` onto the layout wrapper, eliminating
|
|
85
|
+
the layout jump when the chunk lands.
|
|
86
|
+
- Sanitizer hardening: `<use>` joins the forbidden-tag list; `style`
|
|
87
|
+
attributes referencing non-fragment `url(...)` are stripped from fetched
|
|
88
|
+
SVGs.
|
|
89
|
+
|
|
90
|
+
Both packages ship `main`/`module`/`types` fallbacks and a
|
|
91
|
+
`./package.json` export, declare `engines.node >= 20`, and include the
|
|
92
|
+
NOTICE file in the tarball.
|
|
93
|
+
|
|
94
|
+
### Patch Changes
|
|
95
|
+
|
|
96
|
+
- Updated dependencies [3b0a920]
|
|
97
|
+
- Updated dependencies [6d8f912]
|
|
98
|
+
- @smbdy/icons@0.2.0
|
|
99
|
+
|
|
100
|
+
## 1.1.0
|
|
101
|
+
|
|
102
|
+
### Minor Changes
|
|
103
|
+
|
|
104
|
+
- 6c6cae2: Performance, RSC compatibility, and hardening:
|
|
105
|
+
- **Lazy icon shards.** The id → component map for lazily-loaded icons no
|
|
106
|
+
longer ships in the main entry. Lazy icons now resolve through per-type
|
|
107
|
+
shard modules (`tokens`/`chains`/`brands`) reached via dynamic import, so
|
|
108
|
+
`<Icon>`'s entry-bundle cost stays constant as the icon set grows. The
|
|
109
|
+
shard map for a type loads once, on the first lazy icon of that type.
|
|
110
|
+
- **React Server Components.** `"use client"` is now scoped to the stateful
|
|
111
|
+
entries (`.` and `./compat`). The generated icon entries (`./tokens`,
|
|
112
|
+
`./chains`, `./brands`) and `./frames` are directive-free, so RSC apps can
|
|
113
|
+
render them on the server with zero hydration cost.
|
|
114
|
+
- **Network fallback.** Timed-out fetches are now negative-cached and mark
|
|
115
|
+
the icon failed instead of silently retrying on every mount; unmount
|
|
116
|
+
aborts still leave no trace. Fade-in styles are injected via
|
|
117
|
+
`useInsertionEffect` (React 17 falls back to `useEffect`) instead of
|
|
118
|
+
during render.
|
|
119
|
+
- **Build-time SVG gate.** Authored assets are now validated with the same
|
|
120
|
+
DOMPurify profile that sanitizes network-fetched SVGs at runtime
|
|
121
|
+
(fragment-only hrefs, no external `url()` references, forbidden-tag
|
|
122
|
+
parity), and mono validation catches hardcoded `rgb()`/`hsl()`/named
|
|
123
|
+
colors — not just hex. Frame mono SVGs are now covered by the
|
|
124
|
+
currentColor check (previously skipped by a filename-pattern bug).
|
|
125
|
+
|
|
126
|
+
## 1.0.2
|
|
127
|
+
|
|
128
|
+
### Patch Changes
|
|
129
|
+
|
|
130
|
+
- 4cef6d8: Fix framed icons rendering oversized/clipped in Safari. `FrameWrapper` now sizes
|
|
131
|
+
the base icon to a whole-pixel value (`floor(frameSize × 0.8125)`) instead of
|
|
132
|
+
`width="100%"`. Safari mis-resolves a percentage-sized inline SVG in this
|
|
133
|
+
context and paints it larger than the slot, so the icon overflowed the frame
|
|
134
|
+
(notably inside flex containers). A definite, integer pixel size renders
|
|
135
|
+
correctly across browsers. An explicit `size` on the child still takes
|
|
136
|
+
precedence.
|
|
137
|
+
|
|
138
|
+
## 1.0.1
|
|
139
|
+
|
|
140
|
+
### Patch Changes
|
|
141
|
+
|
|
142
|
+
- 202c73c: Fix frame rendering:
|
|
143
|
+
- `FrameWrapper` now sizes the base icon to fill the frame slot by default, so
|
|
144
|
+
`<FrameWrapper frame="stk"><Icon value="eth" /></FrameWrapper>` renders the
|
|
145
|
+
icon at the correct size without a manual `size="100%"`. An explicit `size`
|
|
146
|
+
on the child still wins. The `Web3Icon` compat shim no longer needs its
|
|
147
|
+
special-case sizing.
|
|
148
|
+
- Mono frames (and any stroke-only mono art) now render as outlines instead of
|
|
149
|
+
a solid `currentColor` fill — the generator preserves `fill="none"` on the
|
|
150
|
+
root for stroke-based SVGs instead of forcing `fill="currentColor"`.
|
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2024-2026 BGD Labs
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/NOTICE
ADDED
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
@smbdy/icons — NOTICE
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2024-2026 BGD Labs
|
|
4
|
+
|
|
5
|
+
This project's SOURCE CODE (the resolver, build pipeline, React components,
|
|
6
|
+
metadata format, and supporting tooling) is licensed under the MIT License.
|
|
7
|
+
See the LICENSE file.
|
|
8
|
+
|
|
9
|
+
This license does NOT extend to the icon assets bundled in this repository.
|
|
10
|
+
|
|
11
|
+
----------------------------------------------------------------------
|
|
12
|
+
Icon assets / trademarks
|
|
13
|
+
----------------------------------------------------------------------
|
|
14
|
+
|
|
15
|
+
The SVG icons in `assets/` (and the components, strings, and data derived
|
|
16
|
+
from them) depict logos, wordmarks, and other marks of tokens, blockchains,
|
|
17
|
+
wallets, protocols, and companies. Those marks are the property of their
|
|
18
|
+
respective owners. BGD Labs claims no ownership of them and grants no rights
|
|
19
|
+
in them under the MIT License or otherwise.
|
|
20
|
+
|
|
21
|
+
The icons are included solely to identify the corresponding asset or project
|
|
22
|
+
(nominative use / interoperability) so that applications can render a
|
|
23
|
+
recognizable icon for an asset a user already holds or is interacting with.
|
|
24
|
+
Their inclusion does not imply any affiliation with, sponsorship by, or
|
|
25
|
+
endorsement from the trademark holders.
|
|
26
|
+
|
|
27
|
+
If you are a rights holder and want a mark added, changed, or removed, open
|
|
28
|
+
an issue at https://github.com/smbdy/icons/issues and we will act on it
|
|
29
|
+
promptly.
|
|
30
|
+
|
|
31
|
+
Consumers of this library are responsible for ensuring their own use of any
|
|
32
|
+
included mark complies with the relevant owner's trademark and brand
|
|
33
|
+
guidelines.
|
package/README.md
ADDED
|
@@ -0,0 +1,125 @@
|
|
|
1
|
+
# @smbdy/icons-react
|
|
2
|
+
|
|
3
|
+
Tree-shakeable React icon components for web3 assets. Built on top of `@smbdy/icons`.
|
|
4
|
+
|
|
5
|
+
## Install
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm i @smbdy/icons-react
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
Peer dependency: `react ^18 || ^19`
|
|
12
|
+
|
|
13
|
+
## Icon Component
|
|
14
|
+
|
|
15
|
+
The main `<Icon>` component resolves an alias and renders the matching icon. Frequently used icons are bundled eagerly; others are lazy-loaded via `React.lazy` with a smooth fade-in.
|
|
16
|
+
|
|
17
|
+
```tsx
|
|
18
|
+
import { Icon } from '@smbdy/icons-react'
|
|
19
|
+
|
|
20
|
+
<Icon value="eth" />
|
|
21
|
+
<Icon value="eth" mono />
|
|
22
|
+
<Icon value="eth" size={48} />
|
|
23
|
+
<Icon value="wbnb" /> {/* resolves alias -> bnb */}
|
|
24
|
+
<Icon value={1} /> {/* chain ID -> ethereum */}
|
|
25
|
+
<Icon value="metamask" type="brand" /> {/* constrain lookup to one namespace */}
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
### Props
|
|
29
|
+
|
|
30
|
+
| Prop | Type | Default | Description |
|
|
31
|
+
| ---------- | ------------------------------- | ----------- | -------------------------------------------- |
|
|
32
|
+
| `value` | `string \| number` | required | Token symbol, chain name, chain ID, or alias |
|
|
33
|
+
| `type` | `'token' \| 'chain' \| 'brand'` | auto | Explicitly disambiguate overlapping ids |
|
|
34
|
+
| `mono` | `boolean` | `false` | Render the mono (currentColor) variant |
|
|
35
|
+
| `size` | `number \| string` | `32` | Width and height |
|
|
36
|
+
| `fallback` | `ReactNode` | placeholder | Rendered while loading or when unknown |
|
|
37
|
+
|
|
38
|
+
Plus all standard `SVGProps<SVGSVGElement>` — except `ref`: `<Icon>` renders
|
|
39
|
+
different root elements depending on the internal path (eager, lazy,
|
|
40
|
+
fallback), so a ref has no reliable target and is rejected at the type
|
|
41
|
+
level. The [direct-import components](#direct-imports) render a single
|
|
42
|
+
`<svg>` root and forward refs properly.
|
|
43
|
+
|
|
44
|
+
## IconProvider
|
|
45
|
+
|
|
46
|
+
Without a provider, an unresolved `<Icon>` renders the placeholder (or your
|
|
47
|
+
`fallback`) and never makes a network request. Mount the provider only when
|
|
48
|
+
you want the runtime GitHub fallback.
|
|
49
|
+
|
|
50
|
+
```tsx
|
|
51
|
+
import { IconProvider } from '@smbdy/icons-react'
|
|
52
|
+
;<IconProvider enableFallback branch="v3.0.0">
|
|
53
|
+
<App />
|
|
54
|
+
</IconProvider>
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
`enableFallback` is **opt-in** (defaults to `false`). When you turn it on,
|
|
58
|
+
pin `branch` to the published tag of `@smbdy/icons-react` you have
|
|
59
|
+
installed — leaving it on the default (`"main"`) means two installs of the
|
|
60
|
+
same npm version can render different content depending on when they
|
|
61
|
+
fetch. The provider emits a one-time dev warning if you forget.
|
|
62
|
+
|
|
63
|
+
### Why opt-in?
|
|
64
|
+
|
|
65
|
+
The fallback can fetch from `raw.githubusercontent.com` at runtime. That
|
|
66
|
+
introduces a runtime dependency that isn't visible at install time, leaks
|
|
67
|
+
viewed-asset metadata to GitHub, and — with `branch: 'main'` — produces
|
|
68
|
+
version-skewed content. Apps that want any of those tradeoffs must say so
|
|
69
|
+
explicitly. Apps that don't get a deterministic bundle by default.
|
|
70
|
+
|
|
71
|
+
## Direct Imports
|
|
72
|
+
|
|
73
|
+
Import individual icon components for maximum tree-shaking.
|
|
74
|
+
|
|
75
|
+
```tsx
|
|
76
|
+
import { EthIcon } from '@smbdy/icons-react/tokens'
|
|
77
|
+
import { EthereumIcon } from '@smbdy/icons-react/chains'
|
|
78
|
+
import { MetamaskIcon } from '@smbdy/icons-react/brands'
|
|
79
|
+
;<EthIcon mono size={24} />
|
|
80
|
+
```
|
|
81
|
+
|
|
82
|
+
The per-icon components accept the same `mono` / `size` props as `<Icon>`
|
|
83
|
+
and forward refs to their `<svg>` root.
|
|
84
|
+
|
|
85
|
+
## Frames
|
|
86
|
+
|
|
87
|
+
Wrap icons in decorative frames (e.g. staked asset badges).
|
|
88
|
+
|
|
89
|
+
```tsx
|
|
90
|
+
import { FrameWrapper } from '@smbdy/icons-react/frames'
|
|
91
|
+
import { Icon } from '@smbdy/icons-react'
|
|
92
|
+
;<FrameWrapper frame="stk" size={48}>
|
|
93
|
+
<Icon value="eth" />
|
|
94
|
+
</FrameWrapper>
|
|
95
|
+
```
|
|
96
|
+
|
|
97
|
+
Available frames: `a`, `stk`, `stkwa`, `wa`
|
|
98
|
+
|
|
99
|
+
## v1 Compatibility
|
|
100
|
+
|
|
101
|
+
The `Web3Icon` component provides a migration path from `@bgd-labs/react-web3-icons`.
|
|
102
|
+
|
|
103
|
+
```tsx
|
|
104
|
+
import { Web3Icon } from '@smbdy/icons-react/compat'
|
|
105
|
+
|
|
106
|
+
<Web3Icon symbol="ETH" />
|
|
107
|
+
<Web3Icon chainId={1} />
|
|
108
|
+
<Web3Icon symbol="ETH" mono />
|
|
109
|
+
<Web3Icon symbol="ETH" assetTag="stk" />
|
|
110
|
+
```
|
|
111
|
+
|
|
112
|
+
## Import Paths
|
|
113
|
+
|
|
114
|
+
| Path | Exports |
|
|
115
|
+
| --------------------------- | --------------------------- |
|
|
116
|
+
| `@smbdy/icons-react` | `Icon`, `IconProvider` |
|
|
117
|
+
| `@smbdy/icons-react/tokens` | Individual token components |
|
|
118
|
+
| `@smbdy/icons-react/chains` | Individual chain components |
|
|
119
|
+
| `@smbdy/icons-react/brands` | Individual brand components |
|
|
120
|
+
| `@smbdy/icons-react/frames` | `FrameWrapper` |
|
|
121
|
+
| `@smbdy/icons-react/compat` | `Web3Icon` |
|
|
122
|
+
|
|
123
|
+
## License
|
|
124
|
+
|
|
125
|
+
[MIT](./LICENSE)
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
// src/generated/lazy/tokens/_all.ts
|
|
2
|
+
var ICON_IMPORTS = {
|
|
3
|
+
"aave": { full: () => import("./aave.full-QNOLSN64.js"), mono: () => import("./aave.mono-DFM2DC7D.js") },
|
|
4
|
+
"bnb": { full: () => import("./bnb.full-ECKVIICN.js"), mono: () => import("./bnb.mono-BJKFGB4W.js") },
|
|
5
|
+
"link": { full: () => import("./link.full-DYTFNQHD.js"), mono: () => import("./link.mono-UJUAYACL.js") },
|
|
6
|
+
"pteusde": { full: () => import("./pteusde.full-64LQVQ62.js"), mono: () => import("./pteusde.mono-NXQFXTCE.js") },
|
|
7
|
+
"uni": { full: () => import("./uni.full-6CTLVORZ.js"), mono: () => import("./uni.mono-B7C2JVKM.js") }
|
|
8
|
+
};
|
|
9
|
+
export {
|
|
10
|
+
ICON_IMPORTS
|
|
11
|
+
};
|
|
12
|
+
//# sourceMappingURL=_all-BBSV7W5A.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/generated/lazy/tokens/_all.ts"],"sourcesContent":["// Auto-generated by scripts/generate.ts - DO NOT EDIT\nimport type { ComponentType } from 'react'\nimport type { IconProps } from '../../../icon-props'\n\ntype Loader = () => Promise<{ default: ComponentType<IconProps> }>\n\nexport const ICON_IMPORTS: Record<\n string,\n { full: Loader; mono: Loader }\n> = {\n \"aave\": { full: () => import('../../tokens/aave.full'), mono: () => import('../../tokens/aave.mono') },\n \"bnb\": { full: () => import('../../tokens/bnb.full'), mono: () => import('../../tokens/bnb.mono') },\n \"link\": { full: () => import('../../tokens/link.full'), mono: () => import('../../tokens/link.mono') },\n \"pteusde\": { full: () => import('../../tokens/pteusde.full'), mono: () => import('../../tokens/pteusde.mono') },\n \"uni\": { full: () => import('../../tokens/uni.full'), mono: () => import('../../tokens/uni.mono') },\n}\n"],"mappings":";AAMO,IAAM,eAGT;AAAA,EACF,QAAQ,EAAE,MAAM,MAAM,OAAO,yBAAwB,GAAG,MAAM,MAAM,OAAO,yBAAwB,EAAE;AAAA,EACrG,OAAO,EAAE,MAAM,MAAM,OAAO,wBAAuB,GAAG,MAAM,MAAM,OAAO,wBAAuB,EAAE;AAAA,EAClG,QAAQ,EAAE,MAAM,MAAM,OAAO,yBAAwB,GAAG,MAAM,MAAM,OAAO,yBAAwB,EAAE;AAAA,EACrG,WAAW,EAAE,MAAM,MAAM,OAAO,4BAA2B,GAAG,MAAM,MAAM,OAAO,4BAA2B,EAAE;AAAA,EAC9G,OAAO,EAAE,MAAM,MAAM,OAAO,wBAAuB,GAAG,MAAM,MAAM,OAAO,wBAAuB,EAAE;AACpG;","names":[]}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { newObj[key] = obj[key]; } } } newObj.default = obj; return newObj; } }// src/generated/lazy/tokens/_all.ts
|
|
2
|
+
var ICON_IMPORTS = {
|
|
3
|
+
"aave": { full: () => Promise.resolve().then(() => _interopRequireWildcard(require("./aave.full-KYPGIYIN.cjs"))), mono: () => Promise.resolve().then(() => _interopRequireWildcard(require("./aave.mono-HESKUGIT.cjs"))) },
|
|
4
|
+
"bnb": { full: () => Promise.resolve().then(() => _interopRequireWildcard(require("./bnb.full-OVSE5GL5.cjs"))), mono: () => Promise.resolve().then(() => _interopRequireWildcard(require("./bnb.mono-ZGBCCQNU.cjs"))) },
|
|
5
|
+
"link": { full: () => Promise.resolve().then(() => _interopRequireWildcard(require("./link.full-BLJRZF6N.cjs"))), mono: () => Promise.resolve().then(() => _interopRequireWildcard(require("./link.mono-EXHT3WNS.cjs"))) },
|
|
6
|
+
"pteusde": { full: () => Promise.resolve().then(() => _interopRequireWildcard(require("./pteusde.full-XSAPIA7I.cjs"))), mono: () => Promise.resolve().then(() => _interopRequireWildcard(require("./pteusde.mono-B7RIQ4FK.cjs"))) },
|
|
7
|
+
"uni": { full: () => Promise.resolve().then(() => _interopRequireWildcard(require("./uni.full-RYRRWMS4.cjs"))), mono: () => Promise.resolve().then(() => _interopRequireWildcard(require("./uni.mono-LK6DAZYZ.cjs"))) }
|
|
8
|
+
};
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
exports.ICON_IMPORTS = ICON_IMPORTS;
|
|
12
|
+
//# sourceMappingURL=_all-Q3TOEXIL.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["/home/runner/work/icons/icons/packages/react/dist/_all-Q3TOEXIL.cjs","../src/generated/lazy/tokens/_all.ts"],"names":[],"mappings":"AAAA;ACMO,IAAM,aAAA,EAGT;AAAA,EACF,MAAA,EAAQ,EAAE,IAAA,EAAM,CAAA,EAAA,GAAM,4DAAA,CAAO,0BAAwB,GAAA,EAAG,IAAA,EAAM,CAAA,EAAA,GAAM,4DAAA,CAAO,0BAAwB,IAAE,CAAA;AAAA,EACrG,KAAA,EAAO,EAAE,IAAA,EAAM,CAAA,EAAA,GAAM,4DAAA,CAAO,yBAAuB,GAAA,EAAG,IAAA,EAAM,CAAA,EAAA,GAAM,4DAAA,CAAO,yBAAuB,IAAE,CAAA;AAAA,EAClG,MAAA,EAAQ,EAAE,IAAA,EAAM,CAAA,EAAA,GAAM,4DAAA,CAAO,0BAAwB,GAAA,EAAG,IAAA,EAAM,CAAA,EAAA,GAAM,4DAAA,CAAO,0BAAwB,IAAE,CAAA;AAAA,EACrG,SAAA,EAAW,EAAE,IAAA,EAAM,CAAA,EAAA,GAAM,4DAAA,CAAO,6BAA2B,GAAA,EAAG,IAAA,EAAM,CAAA,EAAA,GAAM,4DAAA,CAAO,6BAA2B,IAAE,CAAA;AAAA,EAC9G,KAAA,EAAO,EAAE,IAAA,EAAM,CAAA,EAAA,GAAM,4DAAA,CAAO,yBAAuB,GAAA,EAAG,IAAA,EAAM,CAAA,EAAA,GAAM,4DAAA,CAAO,yBAAuB,IAAE;AACpG,CAAA;ADPA;AACE;AACF,oCAAC","file":"/home/runner/work/icons/icons/packages/react/dist/_all-Q3TOEXIL.cjs","sourcesContent":[null,"// Auto-generated by scripts/generate.ts - DO NOT EDIT\nimport type { ComponentType } from 'react'\nimport type { IconProps } from '../../../icon-props'\n\ntype Loader = () => Promise<{ default: ComponentType<IconProps> }>\n\nexport const ICON_IMPORTS: Record<\n string,\n { full: Loader; mono: Loader }\n> = {\n \"aave\": { full: () => import('../../tokens/aave.full'), mono: () => import('../../tokens/aave.mono') },\n \"bnb\": { full: () => import('../../tokens/bnb.full'), mono: () => import('../../tokens/bnb.mono') },\n \"link\": { full: () => import('../../tokens/link.full'), mono: () => import('../../tokens/link.mono') },\n \"pteusde\": { full: () => import('../../tokens/pteusde.full'), mono: () => import('../../tokens/pteusde.mono') },\n \"uni\": { full: () => import('../../tokens/uni.full'), mono: () => import('../../tokens/uni.mono') },\n}\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["/home/runner/work/icons/icons/packages/react/dist/aave.full-KYPGIYIN.cjs"],"names":[],"mappings":"AAAA;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,sDAAC","file":"/home/runner/work/icons/icons/packages/react/dist/aave.full-KYPGIYIN.cjs"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["/home/runner/work/icons/icons/packages/react/dist/aave.mono-HESKUGIT.cjs"],"names":[],"mappings":"AAAA;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,sDAAC","file":"/home/runner/work/icons/icons/packages/react/dist/aave.mono-HESKUGIT.cjs"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["/home/runner/work/icons/icons/packages/react/dist/bnb.full-OVSE5GL5.cjs"],"names":[],"mappings":"AAAA;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,qDAAC","file":"/home/runner/work/icons/icons/packages/react/dist/bnb.full-OVSE5GL5.cjs"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["/home/runner/work/icons/icons/packages/react/dist/bnb.mono-ZGBCCQNU.cjs"],"names":[],"mappings":"AAAA;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,qDAAC","file":"/home/runner/work/icons/icons/packages/react/dist/bnb.mono-ZGBCCQNU.cjs"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["/home/runner/work/icons/icons/packages/react/dist/brands-FNU44Q5D.cjs","../src/generated/lazy/brands.ts"],"names":[],"mappings":"AAAA;ACSO,IAAM,cAAA,EAAsD,CACnE,CAAA;ADRA;AACE;AACF,sCAAC","file":"/home/runner/work/icons/icons/packages/react/dist/brands-FNU44Q5D.cjs","sourcesContent":[null,"// Auto-generated by scripts/generate.ts - DO NOT EDIT\nimport type { ComponentType } from 'react'\nimport type { IconProps } from '../../icon-props'\n\ntype Loader = () => Promise<{ default: ComponentType<IconProps> }>\ntype Shard = {\n ICON_IMPORTS: Record<string, { full: Loader; mono: Loader }>\n}\n\nexport const SHARD_IMPORTS: Record<string, () => Promise<Shard>> = {\n}\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/generated/lazy/brands.ts"],"sourcesContent":["// Auto-generated by scripts/generate.ts - DO NOT EDIT\nimport type { ComponentType } from 'react'\nimport type { IconProps } from '../../icon-props'\n\ntype Loader = () => Promise<{ default: ComponentType<IconProps> }>\ntype Shard = {\n ICON_IMPORTS: Record<string, { full: Loader; mono: Loader }>\n}\n\nexport const SHARD_IMPORTS: Record<string, () => Promise<Shard>> = {\n}\n"],"mappings":";AASO,IAAM,gBAAsD,CACnE;","names":[]}
|
package/dist/brands.cjs
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["/home/runner/work/icons/icons/packages/react/dist/brands.cjs"],"names":[],"mappings":"AAAA;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,sDAAC","file":"/home/runner/work/icons/icons/packages/react/dist/brands.cjs"}
|
package/dist/brands.d.ts
ADDED
package/dist/brands.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["/home/runner/work/icons/icons/packages/react/dist/chains-4PZO7QNB.cjs","../src/generated/lazy/chains.ts"],"names":[],"mappings":"AAAA;ACSO,IAAM,cAAA,EAAsD,CACnE,CAAA;ADRA;AACE;AACF,sCAAC","file":"/home/runner/work/icons/icons/packages/react/dist/chains-4PZO7QNB.cjs","sourcesContent":[null,"// Auto-generated by scripts/generate.ts - DO NOT EDIT\nimport type { ComponentType } from 'react'\nimport type { IconProps } from '../../icon-props'\n\ntype Loader = () => Promise<{ default: ComponentType<IconProps> }>\ntype Shard = {\n ICON_IMPORTS: Record<string, { full: Loader; mono: Loader }>\n}\n\nexport const SHARD_IMPORTS: Record<string, () => Promise<Shard>> = {\n}\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/generated/lazy/chains.ts"],"sourcesContent":["// Auto-generated by scripts/generate.ts - DO NOT EDIT\nimport type { ComponentType } from 'react'\nimport type { IconProps } from '../../icon-props'\n\ntype Loader = () => Promise<{ default: ComponentType<IconProps> }>\ntype Shard = {\n ICON_IMPORTS: Record<string, { full: Loader; mono: Loader }>\n}\n\nexport const SHARD_IMPORTS: Record<string, () => Promise<Shard>> = {\n}\n"],"mappings":";AASO,IAAM,gBAAsD,CACnE;","names":[]}
|
package/dist/chains.cjs
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["/home/runner/work/icons/icons/packages/react/dist/chains.cjs"],"names":[],"mappings":"AAAA;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,sDAAC","file":"/home/runner/work/icons/icons/packages/react/dist/chains.cjs"}
|
package/dist/chains.d.ts
ADDED
package/dist/chains.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
|