tlp-icons 0.1.1 → 0.2.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.
Files changed (60) hide show
  1. package/README.md +243 -34
  2. package/dist/core.js +3 -185
  3. package/dist/core.js.map +7 -0
  4. package/dist/element.js +3 -75
  5. package/dist/element.js.map +7 -0
  6. package/dist/icons/arrows.js +2 -369
  7. package/dist/icons/brands.js +2 -379
  8. package/dist/icons/buildings.js +2 -113
  9. package/dist/icons/charts.js +2 -77
  10. package/dist/icons/commerce.js +2 -129
  11. package/dist/icons/communication.js +2 -199
  12. package/dist/icons/connectivity.js +2 -105
  13. package/dist/icons/design.js +2 -284
  14. package/dist/icons/development.js +2 -163
  15. package/dist/icons/devices.js +2 -425
  16. package/dist/icons/emoji.js +2 -167
  17. package/dist/icons/files.js +2 -315
  18. package/dist/icons/finance.js +2 -223
  19. package/dist/icons/food.js +2 -119
  20. package/dist/icons/health.js +2 -145
  21. package/dist/icons/home.js +2 -127
  22. package/dist/icons/interface.js +2 -504
  23. package/dist/icons/layout.js +2 -208
  24. package/dist/icons/legal.js +2 -123
  25. package/dist/icons/maps.js +2 -256
  26. package/dist/icons/math.js +2 -329
  27. package/dist/icons/media.js +2 -179
  28. package/dist/icons/nature.js +2 -113
  29. package/dist/icons/notifications.js +2 -118
  30. package/dist/icons/people.js +2 -82
  31. package/dist/icons/photography.js +2 -175
  32. package/dist/icons/science.js +2 -38
  33. package/dist/icons/security.js +2 -119
  34. package/dist/icons/shapes.js +2 -110
  35. package/dist/icons/sport.js +2 -148
  36. package/dist/icons/text.js +2 -459
  37. package/dist/icons/time.js +2 -134
  38. package/dist/icons/tools.js +2 -52
  39. package/dist/icons/vehicles.js +2 -134
  40. package/dist/icons/weather.js +2 -105
  41. package/dist/index.d.ts +39 -5
  42. package/dist/index.js +3 -45
  43. package/dist/index.js.map +7 -0
  44. package/dist/jsx.d.ts +62 -0
  45. package/dist/jsx.js +1 -0
  46. package/dist/manifest.js +3 -6
  47. package/dist/manifest.js.map +7 -0
  48. package/dist/react.d.ts +19 -0
  49. package/dist/react.js +3 -0
  50. package/dist/react.js.map +7 -0
  51. package/dist/stats.json +47 -0
  52. package/dist/tlp-icon.d.ts +75 -0
  53. package/dist/tlp-icon.js +3 -12
  54. package/dist/tlp-icon.js.map +7 -0
  55. package/dist/tlp-icons.css +2 -52
  56. package/dist/tlp-icons.runtime.js +3 -265
  57. package/dist/tlp-icons.runtime.js.map +7 -0
  58. package/package.json +74 -7
  59. package/dist/tlp-icons.all.js +0 -6888
  60. package/dist/tlp-icons.json +0 -1
package/README.md CHANGED
@@ -13,25 +13,40 @@
13
13
  <a href="https://github.com/Tamer-Mansour/tlp-icons">GitHub</a>
14
14
  </p>
15
15
 
16
+ <!-- badges:start -->
16
17
  <p align="center">
18
+ <a href="https://www.npmjs.com/package/tlp-icons"><img alt="npm version" src="https://img.shields.io/npm/v/tlp-icons?color=4f46e5"></a>
19
+ <a href="https://www.npmjs.com/package/tlp-icons"><img alt="npm downloads" src="https://img.shields.io/npm/dm/tlp-icons?color=4f46e5"></a>
20
+ <a href="#bundle-size"><img alt="element size" src="https://img.shields.io/badge/element-5.3%20KB%20gzip-16a34a"></a>
21
+ <a href="https://github.com/Tamer-Mansour/tlp-icons/actions/workflows/ci.yml"><img alt="CI" src="https://github.com/Tamer-Mansour/tlp-icons/actions/workflows/ci.yml/badge.svg"></a>
22
+ <a href="https://github.com/Tamer-Mansour/tlp-icons/blob/main/LICENSE"><img alt="license" src="https://img.shields.io/npm/l/tlp-icons?color=16a34a"></a>
17
23
  <img alt="icons" src="https://img.shields.io/badge/icons-6%2C620-4f46e5">
18
- <img alt="animated" src="https://img.shields.io/badge/animated-100%25-4f46e5">
19
- <img alt="license" src="https://img.shields.io/badge/license-MIT-16a34a">
20
- <img alt="dependencies" src="https://img.shields.io/badge/dependencies-0-0ea5e9">
21
24
  </p>
25
+ <!-- badges:end -->
22
26
 
23
- A free, open-source (MIT) library of 6,620 stroke icons, built from the best free sets (Lucide and Tabler) plus
24
- our own **tlp originals**, sorted into 35 hand-curated categories, including **376 brand logos** (Facebook,
27
+ A free, open-source (MIT) library of <!--s:icons-->6,620<!--/s--> stroke icons, built from the best free sets (Lucide and Tabler) plus
28
+ our own **tlp originals**, sorted into <!--s:categories-->35<!--/s--> hand-curated categories, including **<!--s:brands-->376<!--/s--> brand logos** (Facebook,
25
29
  Instagram, WhatsApp, X, TikTok, YouTube...). Every single one moves on hover: clock hands sweep around the face,
26
30
  gears spin on their axle, bells swing from the top, trash lids lift, arrows move the way they point.
27
31
 
32
+ <table>
33
+ <tr>
34
+ <td align="center"><img src="https://raw.githubusercontent.com/Tamer-Mansour/tlp-icons/main/docs/media/hover.gif" width="420" alt="Hovering a button plays its icon"><br><sub>Hover a button, its icon plays</sub></td>
35
+ <td align="center"><img src="https://raw.githubusercontent.com/Tamer-Mansour/tlp-icons/main/docs/media/loop.gif" width="420" alt="Loaders with trigger=loop"><br><sub><code>trigger="loop"</code></sub></td>
36
+ </tr>
37
+ <tr>
38
+ <td align="center"><img src="https://raw.githubusercontent.com/Tamer-Mansour/tlp-icons/main/docs/media/rtl.gif" width="420" alt="The same arrow in LTR and RTL with flip=rtl"><br><sub><code>flip="rtl"</code> mirrors the icon and its motion</sub></td>
39
+ <td align="center"><img src="https://raw.githubusercontent.com/Tamer-Mansour/tlp-icons/main/docs/media/duotone.gif" width="420" alt="Icons without and with duotone"><br><sub><code>duotone</code> adds a soft tinted body</sub></td>
40
+ </tr>
41
+ </table>
42
+
28
43
  [![tlp-icons website](https://raw.githubusercontent.com/Tamer-Mansour/tlp-icons/main/docs/website.png)](https://tlp-icons.netlify.app)
29
44
 
30
45
  <table><tr>
31
46
  <td><a href="https://tlp-icons.netlify.app/categories/legal/"><img src="https://raw.githubusercontent.com/Tamer-Mansour/tlp-icons/main/docs/category.png" alt="Legal category page"></a></td>
32
47
  <td><a href="https://tlp-icons.netlify.app/icons/courthouse/"><img src="https://raw.githubusercontent.com/Tamer-Mansour/tlp-icons/main/docs/icon-page.png" alt="Icon page with live playground and code"></a></td>
33
48
  </tr><tr>
34
- <td align="center">Category pages (legal: 120 icons)</td>
49
+ <td align="center">Category pages (legal: <!--s:cat.legal-->120<!--/s--> icons)</td>
35
50
  <td align="center">One page per icon: playground + code</td>
36
51
  </tr></table>
37
52
 
@@ -41,15 +56,15 @@ gears spin on their axle, bells swing from the top, trash lids lift, arrows move
41
56
  ![Frame strips](https://raw.githubusercontent.com/Tamer-Mansour/tlp-icons/main/docs/frame-strips.png)
42
57
  </details>
43
58
 
44
- - **6,620 icons**: 24×24 grid, 2px stroke, round caps, `currentColor`. One consistent style.
45
- - **100% animated**: 300+ hand-made choreographies, plus a motion engine that reads each icon's geometry.
46
- - **Deep fields**: we draw our own icons where the free sets stop. Legal went from 18 to 120 first; the
59
+ - **<!--s:icons-->6,620<!--/s--> icons**: 24×24 grid, 2px stroke, round caps, `currentColor`. One consistent style.
60
+ - **100% animated**: <!--s:handmade-->439<!--/s--> hand-made choreographies, plus a motion engine that reads each icon's geometry.
61
+ - **Deep fields**: we draw our own icons where the free sets stop. Legal went from 18 to <!--s:cat.legal-->120<!--/s--> first; the
47
62
  [roadmap](https://github.com/Tamer-Mansour/tlp-icons/blob/main/ROADMAP.md) takes it to 1,180 and the whole library to 26,000.
48
- - **Brand logos**: 376 brands in the same outline style, animated (trademarks of their owners, see `NOTICE.md`).
63
+ - **Brand logos**: <!--s:brands-->376<!--/s--> brands in the same outline style, animated (trademarks of their owners, see `NOTICE.md`).
49
64
  - **Tiny runtime**: one custom element, `<tlp-icon>`. Works in plain HTML, React, Angular, Vue, Svelte...
50
- - **Lazy**: icons load per category, so a page that uses 10 icons doesn't download 6,000.
65
+ - **Lazy**: icons load per category, so a page that uses 10 icons doesn't download all <!--s:icons-->6,620<!--/s-->.
51
66
  - **Polite motion**: plays once to the end, never animates a whole card at once, respects `prefers-reduced-motion`.
52
- - **Works offline**: the gallery opens straight from disk, and the build never needs the network.
67
+ - **Works offline**: one classic script with every icon (in `tlp-icons-data`) runs from `file://`, and the build never needs the network.
53
68
 
54
69
  ## Install
55
70
 
@@ -64,10 +79,12 @@ Or with no build step, from a CDN:
64
79
  <tlp-icon name="bell"></tlp-icon>
65
80
  ```
66
81
 
67
- Offline / no modules (for example opened from `file://`): one classic script with every icon inside (about 2.2 MB):
82
+ Offline / no modules (for example opened from `file://`): one classic script with every icon inside (about 2.3 MB,
83
+ 390 KB gzip). Since 0.2.0 it ships in the [`tlp-icons-data`](packages/tlp-icons-data) package:
68
84
 
69
85
  ```html
70
- <script src="node_modules/tlp-icons/dist/tlp-icons.all.js"></script>
86
+ <script src="node_modules/tlp-icons-data/tlp-icons.all.js"></script>
87
+ <!-- or https://cdn.jsdelivr.net/npm/tlp-icons-data/tlp-icons.all.js -->
71
88
  <tlp-icon name="bell"></tlp-icon>
72
89
  ```
73
90
 
@@ -104,39 +121,179 @@ exactly one icon (a button, a menu item) and animates that icon. If it reaches a
104
121
  (a card, a menu, a table row), nothing animates. So hovering a button animates its icon, while a big card never
105
122
  lights up all its icons at once.
106
123
 
107
- ### React
124
+ ## Framework recipes
108
125
 
109
- ```jsx
110
- import 'tlp-icons/element';
126
+ Copy-paste setups. Every snippet below is a real file in [`test/recipes/`](test/recipes) that the test suite
127
+ compiles with that framework's own compiler (TypeScript, `vue/compiler-sfc`, `svelte/compiler`,
128
+ `@astrojs/compiler`), so they stay correct.
129
+
130
+ `import 'tlp-icons/element'` is safe during server rendering: on the server it registers nothing and never touches
131
+ the DOM.
132
+
133
+ ### React 18: the wrapper
111
134
 
112
- export function SaveButton() {
113
- return <button><tlp-icon name="save" /> Save</button>;
135
+ React 18 turns boolean props into strings and can't set custom element properties, so use the tiny optional
136
+ wrapper (`react` is an optional peer dependency and is never bundled):
137
+
138
+ <!-- recipe:react18/Toolbar.tsx -->
139
+ ```tsx
140
+ import { TlpIcon } from 'tlp-icons/react';
141
+
142
+ export function Toolbar() {
143
+ return (
144
+ <nav>
145
+ <button type="button">
146
+ <TlpIcon name="bell" /> Alerts
147
+ </button>
148
+ <TlpIcon name="loader-circle" trigger="loop" aria-label="Loading" />
149
+ <TlpIcon name="heart" size={32} duotone className="like" />
150
+ </nav>
151
+ );
114
152
  }
115
153
  ```
154
+ <!-- /recipe -->
155
+
156
+ ### React 19: the tag directly
157
+
158
+ React 19 supports custom elements natively. `tlp-icons/jsx` types the tag (`name` is required, `trigger` and
159
+ `flip` are checked):
160
+
161
+ <!-- recipe:react19/Toolbar.tsx -->
162
+ ```tsx
163
+ import 'tlp-icons/element';
164
+ import 'tlp-icons/jsx'; // types <tlp-icon> in JSX
165
+
166
+ export function Toolbar() {
167
+ return (
168
+ <nav>
169
+ <button type="button">
170
+ <tlp-icon name="bell" /> Alerts
171
+ </button>
172
+ <tlp-icon name="loader-circle" trigger="loop" aria-label="Loading" />
173
+ <tlp-icon name="heart" size={32} duotone className="like" />
174
+ </nav>
175
+ );
176
+ }
177
+ ```
178
+ <!-- /recipe -->
179
+
180
+ ### Next.js (App Router)
116
181
 
117
- React 19 supports custom elements directly. For TypeScript JSX, declare `tlp-icon` in `JSX.IntrinsicElements`.
182
+ Put the element behind one small client component and use it from server components. Server rendering outputs the
183
+ tag; the browser upgrades it.
118
184
 
119
- ### Angular
185
+ <!-- recipe:nextjs/app/components/Icon.tsx -->
186
+ ```tsx
187
+ 'use client';
188
+ // app/components/Icon.tsx - use <Icon name="bell" /> from any server or client component.
189
+ // The import is safe during server rendering (it registers the element only in the browser).
190
+ import 'tlp-icons/element';
191
+ import 'tlp-icons/jsx';
192
+
193
+ export function Icon(props: { name: string; size?: number; trigger?: 'hover' | 'loop' | 'click' | 'none'; duotone?: boolean }) {
194
+ return <tlp-icon {...props} />;
195
+ }
196
+ ```
197
+ <!-- /recipe -->
120
198
 
199
+ ### Angular 17+ (standalone)
200
+
201
+ <!-- recipe:angular/toolbar.component.ts -->
121
202
  ```ts
122
- // main.ts
203
+ // toolbar.component.ts (Angular 17+, standalone)
204
+ import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
123
205
  import 'tlp-icons/element';
124
206
 
125
- // component
126
- @Component({ schemas: [CUSTOM_ELEMENTS_SCHEMA], template: `<tlp-icon name="bell"></tlp-icon>` })
207
+ @Component({
208
+ selector: 'app-toolbar',
209
+ standalone: true,
210
+ schemas: [CUSTOM_ELEMENTS_SCHEMA],
211
+ template: `
212
+ <button type="button"><tlp-icon name="bell"></tlp-icon> Alerts</button>
213
+ <tlp-icon [attr.name]="icon" trigger="loop"></tlp-icon>
214
+ `,
215
+ })
216
+ export class ToolbarComponent {
217
+ icon = 'loader-circle';
218
+ }
127
219
  ```
220
+ <!-- /recipe -->
221
+
222
+ ### Vue 3 + Vite
128
223
 
129
- ### Vue
224
+ Tell Vue that `tlp-icon` is a custom element, then use it in any template:
225
+
226
+ <!-- recipe:vue/vite.config.ts,vue/App.vue -->
227
+ `vite.config.ts`
130
228
 
131
229
  ```ts
132
- // main.ts
230
+ // vite.config.ts
231
+ import { defineConfig } from 'vite';
232
+ import vue from '@vitejs/plugin-vue';
233
+
234
+ export default defineConfig({
235
+ plugins: [
236
+ vue({ template: { compilerOptions: { isCustomElement: tag => tag === 'tlp-icon' } } }),
237
+ ],
238
+ });
239
+ ```
240
+
241
+ `App.vue`
242
+
243
+ ```vue
244
+ <script setup>
245
+ import { ref } from 'vue';
133
246
  import 'tlp-icons/element';
134
- // vite.config.ts -> vue({ template: { compilerOptions: { isCustomElement: tag => tag === 'tlp-icon' } } })
247
+
248
+ const done = ref(false);
249
+ </script>
250
+
251
+ <template>
252
+ <button type="button" @click="done = !done">
253
+ <tlp-icon :name="done ? 'circle-check' : 'circle'" duotone></tlp-icon>
254
+ {{ done ? 'Done' : 'Mark done' }}
255
+ </button>
256
+ </template>
135
257
  ```
258
+ <!-- /recipe -->
136
259
 
137
- ```html
138
- <tlp-icon name="bell" />
260
+ ### SvelteKit
261
+
262
+ <!-- recipe:sveltekit/+page.svelte -->
263
+ ```svelte
264
+ <script>
265
+ import { onMount } from 'svelte';
266
+
267
+ // load the element in the browser only (SvelteKit renders on the server first)
268
+ onMount(() => import('tlp-icons/element'));
269
+ </script>
270
+
271
+ <button type="button">
272
+ <tlp-icon name="bell"></tlp-icon> Alerts
273
+ </button>
274
+ <tlp-icon name="loader-circle" trigger="loop"></tlp-icon>
139
275
  ```
276
+ <!-- /recipe -->
277
+
278
+ ### Astro
279
+
280
+ <!-- recipe:astro/index.astro -->
281
+ ```astro
282
+ ---
283
+ // src/pages/index.astro
284
+ const icon = 'bell';
285
+ ---
286
+ <button type="button">
287
+ <tlp-icon name={icon}></tlp-icon> Alerts
288
+ </button>
289
+ <tlp-icon name="loader-circle" trigger="loop"></tlp-icon>
290
+
291
+ <script>
292
+ // Astro bundles and runs this in the browser
293
+ import 'tlp-icons/element';
294
+ </script>
295
+ ```
296
+ <!-- /recipe -->
140
297
 
141
298
  ### Raw data and SVG strings (Node / SSR)
142
299
 
@@ -151,6 +308,51 @@ icons.bell; // { svg, m: [[part, anim, dur, d
151
308
 
152
309
  Importing `icons` pulls in the whole set. For pages, use `<tlp-icon>`, which loads one category chunk at a time.
153
310
 
311
+ **One category only:** import a category chunk directly and skip the manifest entirely:
312
+
313
+ ```js
314
+ import legal from 'tlp-icons/icons/legal.js'; // { 'courthouse': { svg, m }, ... }
315
+ import { register } from 'tlp-icons/element';
316
+ register(legal); // <tlp-icon name="courthouse"> now renders with no lookup
317
+ ```
318
+
319
+ ### Full dataset: `tlp-icons-data`
320
+
321
+ Every icon's SVG, motion, category, tags and source in one JSON file (3.4 MB) ships as a separate package, so
322
+ `npm install tlp-icons` stays small:
323
+
324
+ ```bash
325
+ npm install tlp-icons-data
326
+ ```
327
+
328
+ ```js
329
+ import data from 'tlp-icons-data' with { type: 'json' }; // bundlers: import data from 'tlp-icons-data'
330
+ data.icons.bell; // { category, source, tags, svg, m }
331
+ ```
332
+
333
+ It replaces the old `tlp-icons/data` export (removed in 0.2.0). Typed (`TlpIconsData`).
334
+
335
+ ## Bundle size
336
+
337
+ Measured on every build (minified, gzip level 9) and written to `dist/size-report.json`. The build fails if the
338
+ element core goes over 8 KB gzip or the manifest over 15 KB gzip.
339
+
340
+ <!-- sizes:start -->
341
+ | What | Minified | Gzip |
342
+ | --- | ---: | ---: |
343
+ | element core (tlp-icon + core + element) | 15.7 KB | **5.3 KB** |
344
+ | manifest | 21.7 KB | **11.1 KB** |
345
+ | smallest category chunk (science.js) | 11.5 KB | **3.5 KB** |
346
+ | largest category chunk (interface.js) | 180.6 KB | **32.4 KB** |
347
+ | all icons, offline bundle (tlp-icons.all.js) | 2280.5 KB | **387.3 KB** |
348
+ | stylesheet (tlp-icons.css) | 4.9 KB | **1.3 KB** |
349
+ <!-- sizes:end -->
350
+
351
+ What a page actually downloads: the element core, the manifest, then **one chunk per category it uses**. A page
352
+ with a few interface and arrow icons loads about <!--s:size.0.gzip-->5.3 KB<!--/s--> + <!--s:size.1.gzip-->11.1 KB<!--/s-->
353
+ plus those two chunks. Import a chunk directly (`tlp-icons/icons/<category>.js`) to skip the manifest. The
354
+ stylesheet is injected by the element; `tlp-icons/css` is there if you prefer a `<link>`.
355
+
154
356
  ## Website
155
357
 
156
358
  **https://tlp-icons.netlify.app** is built with **Next.js (React)** in `web/` and runs on the **published npm
@@ -161,7 +363,7 @@ pre-rendered static HTML for search engines, and the whole site is about 45 MB:
161
363
  | --- | --- |
162
364
  | Home | `/` |
163
365
  | Icon gallery (search, filters, size / stroke / color / duotone) | `/icons/` |
164
- | One page per icon: preview, sizes, buttons, code for React / HTML / Angular / Vue / SVG, related icons | `/icons/<name>/` (6,620 pages) |
366
+ | One page per icon: preview, sizes, buttons, code for React / HTML / Angular / Vue / SVG, related icons | `/icons/<name>/` (<!--s:icons-->6,620<!--/s--> pages) |
165
367
  | Categories, one page each, including Brands | `/categories/`, `/categories/<id>/` |
166
368
  | Documentation with live examples and the animation library | `/docs/` |
167
369
  | Roadmap with live progress | `/roadmap/` |
@@ -178,7 +380,7 @@ Netlify runs the same steps (see `netlify.toml`) and publishes `web/out` on ever
178
380
  After publishing a new tlp-icons version to npm, run `npm install tlp-icons@latest` in `web/` and redeploy.
179
381
  For a manual deploy, drag the `web/out` folder onto the site's **Deploys** tab in Netlify.
180
382
 
181
- **Offline use:** `dist/tlp-icons.all.js` is a single classic script with every icon; it works from `file://`
383
+ **Offline use:** `tlp-icons-data/tlp-icons.all.js` is a single classic script with every icon; it works from `file://`
182
384
  with no server and no internet.
183
385
 
184
386
  ## How it works
@@ -201,7 +403,7 @@ npm run test:browser optional Playwright tests + frame strips (npm run setup:b
201
403
  - `scripts/adapters/`: one adapter per icon source (`latest`, `fetch`, `load`). Add a set by adding an adapter.
202
404
  - `scripts/engine/`: SVG parsing, geometry, the motion engine and serialisation.
203
405
  - `src/runtime/`: `core.js` (registry, baking, run engine, hover rule), `element.js` (`<tlp-icon>`) and
204
- `tlp-icons.css` (the 34 `tlp-` keyframes).
406
+ `tlp-icons.css` (the <!--s:animations-->34<!--/s--> `tlp-` keyframes).
205
407
 
206
408
  **Motion engine.** Every icon is split into atoms (one per element or sub-path) and measured. Then:
207
409
 
@@ -230,11 +432,18 @@ Every motion is small and springy and ends exactly at rest. The default `speed`
230
432
  - Wrong category: add a name pattern or an explicit entry in `config/categories.json`.
231
433
  - Run `npm run build && npm test` before opening a PR.
232
434
 
233
- The GitHub Actions (CI and upstream sync) are manual: run them from the Actions tab when needed.
435
+ See [CONTRIBUTING.md](https://github.com/Tamer-Mansour/tlp-icons/blob/main/CONTRIBUTING.md) for the full workflow
436
+ and the release process, and [CHANGELOG.md](https://github.com/Tamer-Mansour/tlp-icons/blob/main/CHANGELOG.md) for
437
+ what changed in each version.
234
438
 
235
439
  ## License
236
440
 
237
441
  MIT © tlp-icons contributors. Icon geometry from [Lucide](https://lucide.dev) (ISC) and
238
442
  [Tabler Icons](https://tabler.io/icons) (MIT), plus tlp originals (MIT). See [NOTICE.md](https://github.com/Tamer-Mansour/tlp-icons/blob/main/NOTICE.md) and `licenses/`.
239
443
 
240
- Brand logos are trademarks of their respective owners and are included only to identify their products.
444
+ ### Trademarks
445
+
446
+ The <!--s:brands-->376<!--/s--> brand icons (the Brands category, names starting with `brand-`) are provided for
447
+ referential, nominative use only: to identify a product or service, for example a "Sign in with GitHub" button or a
448
+ list of supported platforms. The logos remain the property of their respective owners, and their inclusion does not
449
+ imply any affiliation with or endorsement by those owners. Follow each owner's brand guidelines when you use them.
package/dist/core.js CHANGED
@@ -1,185 +1,3 @@
1
- /* tlp-icons 0.1.1 - MIT. Icons from Lucide 1.55.0 (ISC), Tabler Icons 3.49.0 (MIT). Generated file, do not edit. */
2
- /* tlp-icons runtime core: icon registry, choreography baking, run engine and the hover rule.
3
- Plain ES module without imports so the build can also wrap it into a classic <script> bundle. */
4
-
5
- export const config = { speed: 0.6 };
6
-
7
- const OUT = 'cubic-bezier(.22,1,.36,1)';
8
- const TURN = 'cubic-bezier(.65,0,.35,1)';
9
- const SINE = 'cubic-bezier(.45,.05,.55,.95)';
10
- export const EASE = {
11
- draw: 'cubic-bezier(.65,.05,.36,1)', fillIn: 'ease', popIn: OUT, fadeIn: 'ease', slideIn: OUT, riseIn: OUT, dropIn: OUT,
12
- grow: OUT, growX: OUT, spin: TURN, spinBack: TURN, spinHalf: TURN, sweep: TURN, sweepHour: TURN, orbit: TURN,
13
- };
14
-
15
- const NS = 'http://www.w3.org/2000/svg';
16
- const DRAWABLE = 'path,circle,rect,line,polyline,polygon,ellipse';
17
- const registry = Object.create(null);
18
- const aliases = Object.create(null);
19
- let loader = null;
20
-
21
- /** Adds icons: { name: { svg, m } }. */
22
- const waiting = Object.create(null);
23
- export function register(icons, aliasMap) {
24
- for (const k in icons) registry[k] = icons[k];
25
- if (aliasMap) for (const k in aliasMap) aliases[k] = aliasMap[k];
26
- for (const k in waiting) {
27
- const icon = getIcon(k);
28
- if (icon) { waiting[k].forEach(fn => fn(icon)); delete waiting[k]; }
29
- }
30
- }
31
- export function setLoader(fn) { loader = fn; }
32
- export function resolve(name) { return registry[name] ? name : aliases[name] || name; }
33
- export function getIcon(name) { return registry[resolve(name)] || null; }
34
- /** Resolves with the icon data. Without a loader it waits for a later register() (classic script bundles). */
35
- export function loadIcon(name) {
36
- const icon = getIcon(name);
37
- if (icon) return Promise.resolve(icon);
38
- if (loader) return Promise.resolve(loader(resolve(name))).then(() => getIcon(name));
39
- return new Promise(res => { (waiting[name] = waiting[name] || []).push(res); });
40
- }
41
-
42
- /** Scaled timing of every step and the total length in ms. */
43
- export function timings(icon, speed = config.speed) {
44
- let total = 0;
45
- const steps = (icon.m || []).map(([part, anim, dur, delay, origin]) => {
46
- const t = Math.round(dur * speed), dl = Math.round((delay || 0) * speed);
47
- total = Math.max(total, t + dl);
48
- return { part, anim, t, dl, origin };
49
- });
50
- return { steps, total };
51
- }
52
-
53
- const varsOf = s => {
54
- const v = { '--a': `tlp-${s.anim}`, '--t': `${s.t}ms`, '--dl': `${s.dl}ms`, '--e': EASE[s.anim] || SINE };
55
- if (s.origin) v['--o'] = s.origin;
56
- return v;
57
- };
58
- const clsOf = s => `p${s.origin && /px/.test(s.origin) ? ' vb' : ''}${s.anim === 'sweepHour' ? ' hh' : ''}`;
59
- const hasClass = (cls, part) => (` ${cls} `).indexOf(` ${part} `) >= 0;
60
-
61
- /** Builds a live <svg> element (CSP friendly: CSS variables are set through the CSSOM). */
62
- export function createSvg(icon, doc = document) {
63
- const svg = doc.createElementNS(NS, 'svg');
64
- svg.setAttribute('viewBox', '0 0 24 24');
65
- svg.setAttribute('class', 'tlp');
66
- svg.setAttribute('aria-hidden', 'true');
67
- svg.setAttribute('focusable', 'false');
68
- svg.innerHTML = icon.svg;
69
- const { steps, total } = timings(icon);
70
- svg.dataset.total = String(total);
71
- for (const s of steps) {
72
- let targets;
73
- if (s.part === 'all') {
74
- const g = doc.createElementNS(NS, 'g');
75
- while (svg.firstChild) g.appendChild(svg.firstChild);
76
- svg.appendChild(g);
77
- targets = [g];
78
- } else {
79
- targets = Array.prototype.filter.call(svg.querySelectorAll('[class]'), el => hasClass(el.getAttribute('class'), s.part));
80
- }
81
- const vars = varsOf(s);
82
- for (const el of targets) {
83
- el.setAttribute('class', `${el.getAttribute('class') || ''} ${clsOf(s)}`.trim());
84
- for (const k in vars) el.style.setProperty(k, vars[k]);
85
- }
86
- }
87
- svg.querySelectorAll(DRAWABLE).forEach(el => el.setAttribute('pathLength', '1'));
88
- return svg;
89
- }
90
-
91
- /** Static or animated SVG markup string (animated markup uses inline style for the CSS variables). */
92
- export function toSvgString(icon, opts = {}) {
93
- const sw = opts.stroke ?? 2, size = opts.size ?? 24;
94
- const head = `<svg xmlns="${NS}" width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="${sw}" stroke-linecap="round" stroke-linejoin="round"`;
95
- if (!opts.animated) {
96
- const clean = icon.svg.replace(/ class="([^"]*)"/g, (_, c) => {
97
- const keep = c.split(/\s+/).filter(x => x === 'd' || x === 'f');
98
- return keep.length ? ` class="${keep.join(' ')}"` : '';
99
- });
100
- const duo = opts.duotone ? '<style>.d{fill:currentColor;fill-opacity:.16}.f{fill:currentColor}</style>' : '<style>.f{fill:currentColor}</style>';
101
- return `${head}>${clean.includes('class="') ? duo : ''}${clean}</svg>`;
102
- }
103
- let inner = icon.svg;
104
- const { steps, total } = timings(icon);
105
- for (const s of steps) {
106
- const style = Object.entries(varsOf(s)).map(([k, v]) => `${k}:${v}`).join(';');
107
- if (s.part === 'all') { inner = `<g class="${clsOf(s)}" style="${style}">${inner}</g>`; continue; }
108
- inner = inner.replace(new RegExp(`<([a-z]+)([^>]*?) class="([^"]*\\b${s.part}\\b[^"]*)"`, 'g'), (_, tag, pre, c) => `<${tag}${pre} class="${c} ${clsOf(s)}" style="${style}"`);
109
- }
110
- inner = inner.replace(/<(path|circle|rect|line|polyline|polygon|ellipse)\b/g, '<$1 pathLength="1"');
111
- return `${head} class="tlp" data-tlp-icon data-total="${total}">${inner}</svg>`;
112
- }
113
-
114
- const reduced = () => typeof matchMedia === 'function' && matchMedia('(prefers-reduced-motion: reduce)').matches;
115
-
116
- /** Plays an icon's choreography once. It always finishes, even if the pointer leaves. */
117
- export function run(svg, delay = 0) {
118
- if (!svg || svg._tlpBusy || reduced()) return false;
119
- svg._tlpBusy = true;
120
- const go = () => {
121
- svg.classList.remove('tlp-run');
122
- void svg.getBoundingClientRect();
123
- svg.classList.add('tlp-run');
124
- setTimeout(() => {
125
- svg.querySelectorAll('.hh').forEach(h => h.style.setProperty('--h0', `${(parseFloat(h.style.getPropertyValue('--h0')) || 0) + 30}deg`));
126
- svg.classList.remove('tlp-run');
127
- svg._tlpBusy = false;
128
- }, (+svg.dataset.total || 0) + 40);
129
- };
130
- if (delay) setTimeout(go, delay); else go();
131
- return true;
132
- }
133
-
134
- export const ICON_SELECTOR = 'tlp-icon,svg[data-tlp-icon]';
135
- const HOST = 'button,a,[role=button],[role=menuitem],[role=tab],[role=option],li,tr,td,th,label,summary,input,select,textarea';
136
-
137
- function svgOf(icon) { return icon.tagName.toLowerCase() === 'svg' ? icon : icon.querySelector('svg.tlp'); }
138
- function triggerOf(icon) { return icon.getAttribute('trigger') || icon.getAttribute('data-trigger') || 'hover'; }
139
-
140
- /**
141
- * Hover rule: hovering an icon animates it. Otherwise walk up to the nearest element that contains exactly one
142
- * icon and animate that one. If an element with several icons is reached first (card, menu, table row), do nothing.
143
- */
144
- export function hoverTarget(target) {
145
- let el = target && target.nodeType === 1 ? target : target && target.parentElement;
146
- if (!el) return null;
147
- const own = el.closest(ICON_SELECTOR);
148
- if (own) return own.closest('tlp-icon') || own;
149
- for (let depth = 0; el && el.nodeType === 1 && el !== el.ownerDocument.body && depth < 8; depth++, el = el.parentElement) {
150
- const list = el.querySelectorAll(ICON_SELECTOR);
151
- let n = 0, found = null;
152
- for (const i of list) { if (i.tagName.toLowerCase() === 'svg' && i.closest('tlp-icon')) continue; n++; found = i; }
153
- if (n > 1) return null;
154
- if (n === 1) return { icon: found, scope: el };
155
- if (el.matches(HOST)) return null;
156
- }
157
- return null;
158
- }
159
-
160
- let hoverInstalled = false;
161
- export function installHover(doc = document) {
162
- if (hoverInstalled) return;
163
- hoverInstalled = true;
164
- doc.addEventListener('mouseover', e => {
165
- const hit = hoverTarget(e.target);
166
- if (!hit) return;
167
- const icon = hit.icon || hit;
168
- const scope = hit.scope || icon;
169
- if (scope.contains(e.relatedTarget)) return;
170
- if (triggerOf(icon) !== 'hover') return;
171
- run(svgOf(icon));
172
- }, true);
173
- }
174
-
175
- let styleInjected = false;
176
- export const CSS = "tlp-icon{display:inline-flex;align-items:center;justify-content:center;flex:none;width:var(--tlp-size,24px);height:var(--tlp-size,24px);line-height:0;vertical-align:middle;color:inherit}tlp-icon>svg,svg.tlp{width:100%;height:100%}svg.tlp{fill:none;stroke:currentColor;stroke-width:var(--tlp-stroke,2);stroke-linecap:round;stroke-linejoin:round;overflow:visible}svg.tlp .d{fill:currentColor;fill-opacity:var(--tlp-duo,0)}tlp-icon[duotone],.tlp-duotone{--tlp-duo:.16}tlp-icon[duotone=false]{--tlp-duo:0}svg.tlp .f{fill:currentColor}svg.tlp .p{transform-box:fill-box;transform-origin:var(--o,center)}svg.tlp .p.vb{transform-box:view-box}svg.tlp .p.hh{transform:rotate(var(--h0,0deg))}svg.tlp.tlp-run .p{animation:var(--a) var(--t,1000ms) var(--e,cubic-bezier(.45,.05,.55,.95)) var(--dl,0ms) 1 both}tlp-icon[flip=x]>svg,[dir=rtl] tlp-icon[flip=rtl]>svg{transform:scaleX(-1)}@keyframes tlp-draw{0%{stroke-dasharray:1;stroke-dashoffset:1}100%{stroke-dasharray:1;stroke-dashoffset:0}}@keyframes tlp-fillIn{0%{fill-opacity:0}100%{fill-opacity:var(--tlp-duo,0)}}@keyframes tlp-popIn{0%{opacity:0;transform:scale(.4)}55%{opacity:1;transform:scale(1.08)}78%{transform:scale(.98)}100%{opacity:1;transform:scale(1)}}@keyframes tlp-fadeIn{0%{opacity:0}100%{opacity:1}}@keyframes tlp-slideIn{0%{opacity:0;transform:translateX(-4px)}100%{opacity:1;transform:translateX(0)}}@keyframes tlp-riseIn{0%{opacity:0;transform:translateY(4px)}100%{opacity:1;transform:translateY(0)}}@keyframes tlp-dropIn{0%{opacity:0;transform:translateY(-5px)}60%{opacity:1;transform:translateY(.8px)}80%{transform:translateY(-.3px)}100%{opacity:1;transform:translateY(0)}}@keyframes tlp-grow{0%{transform:scaleY(0)}70%{transform:scaleY(1.06)}100%{transform:scaleY(1)}}@keyframes tlp-growX{0%{transform:scaleX(0)}100%{transform:scaleX(1)}}@keyframes tlp-pop{0%,100%{transform:scale(1)}40%{transform:scale(1.14)}68%{transform:scale(.97)}86%{transform:scale(1.02)}}@keyframes tlp-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}@keyframes tlp-jelly{0%,100%{transform:scale(1,1)}30%{transform:scale(1.1,.9)}50%{transform:scale(.94,1.06)}70%{transform:scale(1.03,.97)}85%{transform:scale(.99,1.01)}}@keyframes tlp-swing{0%,100%{transform:rotate(0)}15%{transform:rotate(13deg)}32%{transform:rotate(-10deg)}50%{transform:rotate(6deg)}68%{transform:rotate(-3deg)}84%{transform:rotate(1deg)}}@keyframes tlp-wiggle{0%,100%{transform:rotate(0)}20%{transform:rotate(-8deg)}45%{transform:rotate(6deg)}68%{transform:rotate(-3deg)}86%{transform:rotate(1deg)}}@keyframes tlp-tilt{0%,100%{transform:rotate(0)}40%{transform:rotate(-12deg)}72%{transform:rotate(3deg)}88%{transform:rotate(-1deg)}}@keyframes tlp-nod{0%,100%{transform:rotate(0)}45%{transform:rotate(7deg)}75%{transform:rotate(-1.5deg)}}@keyframes tlp-strike{0%,100%{transform:rotate(0)}38%{transform:rotate(-24deg)}56%{transform:rotate(7deg)}70%{transform:rotate(-2deg)}84%{transform:rotate(.6deg)}}@keyframes tlp-hop{0%,100%{transform:translateY(0) scale(1,1)}10%{transform:translateY(0) scale(1.04,.95)}40%{transform:translateY(-3px) scale(.97,1.04)}68%{transform:translateY(0) scale(1.04,.96)}84%{transform:translateY(0) scale(.99,1.01)}}@keyframes tlp-lift{0%,100%{transform:translateY(0)}45%{transform:translateY(-2.5px)}75%{transform:translateY(.4px)}}@keyframes tlp-sink{0%,100%{transform:translateY(0)}45%{transform:translateY(2.5px)}75%{transform:translateY(-.4px)}}@keyframes tlp-nudge{0%,100%{transform:translateX(0)}45%{transform:translateX(2.6px)}75%{transform:translateX(-.4px)}}@keyframes tlp-nudgeBack{0%,100%{transform:translateX(0)}45%{transform:translateX(-2.6px)}75%{transform:translateX(.4px)}}@keyframes tlp-float{0%,100%{transform:translateY(0)}25%{transform:translateY(-2px)}50%{transform:translateY(0)}75%{transform:translateY(-1.2px)}}@keyframes tlp-flip{0%,100%{transform:scaleX(1)}50%{transform:scaleX(-1)}}@keyframes tlp-spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}@keyframes tlp-spinBack{0%{transform:rotate(0)}100%{transform:rotate(-360deg)}}@keyframes tlp-spinHalf{0%{transform:rotate(0)}80%{transform:rotate(188deg)}100%{transform:rotate(180deg)}}@keyframes tlp-sweep{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}@keyframes tlp-sweepHour{0%{transform:rotate(var(--h0,0deg))}100%{transform:rotate(calc(var(--h0,0deg) + 30deg))}}@keyframes tlp-blink{0%,100%{transform:scaleY(1)}35%{transform:scaleY(.08)}60%{transform:scaleY(1)}}@keyframes tlp-shake{0%,100%{transform:translateX(0)}18%{transform:translateX(-1.6px)}36%{transform:translateX(1.4px)}54%{transform:translateX(-1px)}72%{transform:translateX(.6px)}88%{transform:translateX(-.2px)}}@keyframes tlp-pulseRing{0%,100%{opacity:1;transform:scale(1)}55%{opacity:0;transform:scale(1.5)}56%{opacity:0;transform:scale(.6)}}@keyframes tlp-orbit{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}@keyframes tlp-stretch{0%,100%{transform:scaleX(1)}45%{transform:scaleX(1.12)}75%{transform:scaleX(.98)}}@media (prefers-reduced-motion:reduce){svg.tlp .p{animation:none!important}}";
177
- export function ensureStyles(doc = document) {
178
- if (styleInjected || !doc || !doc.head) return;
179
- styleInjected = true;
180
- if (doc.getElementById('tlp-icons-style') || CSS.length < 20) return;
181
- const style = doc.createElement('style');
182
- style.id = 'tlp-icons-style';
183
- style.textContent = CSS;
184
- doc.head.appendChild(style);
185
- }
1
+ /* tlp-icons 0.2.0 - MIT. Icons from Lucide 1.55.0 (ISC), Tabler Icons 3.49.0 (MIT). Generated file, do not edit. */
2
+ const O={speed:.6},m="cubic-bezier(.22,1,.36,1)",u="cubic-bezier(.65,0,.35,1)",L="cubic-bezier(.45,.05,.55,.95)",j={draw:"cubic-bezier(.65,.05,.36,1)",fillIn:"ease",popIn:m,fadeIn:"ease",slideIn:m,riseIn:m,dropIn:m,grow:m,growX:m,spin:u,spinBack:u,spinHalf:u,sweep:u,sweepHour:u,orbit:u},k="http://www.w3.org/2000/svg",v=()=>typeof document>"u"?null:document,B="path,circle,rect,line,polyline,polygon,ellipse",x=Object.create(null),Y=Object.create(null);let b=null;const c=Object.create(null);function q(t,e){for(const r in t)x[r]=t[r];if(e)for(const r in e)Y[r]=e[r];for(const r in c){const s=h(r);s&&(c[r].forEach(n=>n(s)),delete c[r])}}function M(t){if(b=t,!!t)for(const e in c)Promise.resolve(t(w(e))).then(()=>{const r=c[e];if(!r)return;delete c[e];const s=h(e);r.forEach(n=>n(s))},()=>{})}function w(t){return x[t]?t:Y[t]||t}function h(t){return x[w(t)]||null}function D(t){const e=h(t);return e?Promise.resolve(e):b?Promise.resolve(b(w(t))).then(()=>h(t)):new Promise(r=>{(c[t]=c[t]||[]).push(r)})}function X(t,e=O.speed){let r=0;return{steps:(t.m||[]).map(([n,a,l,i,o])=>{const f=Math.round(l*e),p=Math.round((i||0)*e);return r=Math.max(r,f+p),{part:n,anim:a,t:f,dl:p,origin:o}}),total:r}}const C=t=>{const e={"--a":`tlp-${t.anim}`,"--t":`${t.t}ms`,"--dl":`${t.dl}ms`,"--e":j[t.anim]||L};return t.origin&&(e["--o"]=t.origin),e},$=t=>`p${t.origin&&/px/.test(t.origin)?" vb":""}${t.anim==="sweepHour"?" hh":""}`,T=(t,e)=>` ${t} `.indexOf(` ${e} `)>=0;function U(t,e=v()){if(!e)return null;const r=e.createElementNS(k,"svg");r.setAttribute("viewBox","0 0 24 24"),r.setAttribute("class","tlp"),r.setAttribute("aria-hidden","true"),r.setAttribute("focusable","false"),r.innerHTML=t.svg;const{steps:s,total:n}=X(t);r.dataset.total=String(n);for(const a of s){let l;if(a.part==="all"){const o=e.createElementNS(k,"g");for(;r.firstChild;)o.appendChild(r.firstChild);r.appendChild(o),l=[o]}else l=Array.prototype.filter.call(r.querySelectorAll("[class]"),o=>T(o.getAttribute("class"),a.part));const i=C(a);for(const o of l){o.setAttribute("class",`${o.getAttribute("class")||""} ${$(a)}`.trim());for(const f in i)o.style.setProperty(f,i[f])}}return r.querySelectorAll(B).forEach(a=>a.setAttribute("pathLength","1")),r}function F(t,e={}){const r=e.stroke??2,s=e.size??24,n=`<svg xmlns="${k}" width="${s}" height="${s}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="${r}" stroke-linecap="round" stroke-linejoin="round"`;if(!e.animated){const o=t.svg.replace(/ class="([^"]*)"/g,(p,d)=>{const g=d.split(/\s+/).filter(y=>y==="d"||y==="f");return g.length?` class="${g.join(" ")}"`:""}),f=e.duotone?"<style>.d{fill:currentColor;fill-opacity:.16}.f{fill:currentColor}</style>":"<style>.f{fill:currentColor}</style>";return`${n}>${o.includes('class="')?f:""}${o}</svg>`}let a=t.svg;const{steps:l,total:i}=X(t);for(const o of l){const f=Object.entries(C(o)).map(([p,d])=>`${p}:${d}`).join(";");if(o.part==="all"){a=`<g class="${$(o)}" style="${f}">${a}</g>`;continue}a=a.replace(new RegExp(`<([a-z]+)([^>]*?) class="([^"]*\\b${o.part}\\b[^"]*)"`,"g"),(p,d,g,y)=>`<${d}${g} class="${y} ${$(o)}" style="${f}"`)}return a=a.replace(/<(path|circle|rect|line|polyline|polygon|ellipse)\b/g,'<$1 pathLength="1"'),`${n} class="tlp" data-tlp-icon data-total="${i}">${a}</svg>`}const z=()=>typeof matchMedia=="function"&&matchMedia("(prefers-reduced-motion: reduce)").matches;function H(t,e=0){if(!t||t._tlpBusy||z())return!1;t._tlpBusy=!0;const r=()=>{t.classList.remove("tlp-run"),t.getBoundingClientRect(),t.classList.add("tlp-run"),setTimeout(()=>{t.querySelectorAll(".hh").forEach(s=>s.style.setProperty("--h0",`${(parseFloat(s.style.getPropertyValue("--h0"))||0)+30}deg`)),t.classList.remove("tlp-run"),t._tlpBusy=!1},(+t.dataset.total||0)+40)};return e?setTimeout(r,e):r(),!0}const I="tlp-icon,svg[data-tlp-icon]",N="button,a,[role=button],[role=menuitem],[role=tab],[role=option],li,tr,td,th,label,summary,input,select,textarea";function P(t){return t.tagName.toLowerCase()==="svg"?t:t.querySelector("svg.tlp")}function R(t){return t.getAttribute("trigger")||t.getAttribute("data-trigger")||"hover"}function _(t){let e=t&&t.nodeType===1?t:t&&t.parentElement;if(!e)return null;const r=e.closest(I);if(r)return r.closest("tlp-icon")||r;for(let s=0;e&&e.nodeType===1&&e!==e.ownerDocument.body&&s<8;s++,e=e.parentElement){const n=e.querySelectorAll(I);let a=0,l=null;for(const i of n)i.tagName.toLowerCase()==="svg"&&i.closest("tlp-icon")||(a++,l=i);if(a>1)return null;if(a===1)return{icon:l,scope:e};if(e.matches(N))return null}return null}let S=!1;function V(t=v()){S||!t||(S=!0,t.addEventListener("mouseover",e=>{const r=_(e.target);if(!r)return;const s=r.icon||r;(r.scope||s).contains(e.relatedTarget)||R(s)==="hover"&&H(P(s))},!0))}let A=!1;const E="tlp-icon{display:inline-flex;align-items:center;justify-content:center;flex:none;width:var(--tlp-size,24px);height:var(--tlp-size,24px);line-height:0;vertical-align:middle;color:inherit}tlp-icon>svg,svg.tlp{width:100%;height:100%}svg.tlp{fill:none;stroke:currentColor;stroke-width:var(--tlp-stroke,2);stroke-linecap:round;stroke-linejoin:round;overflow:visible}svg.tlp .d{fill:currentColor;fill-opacity:var(--tlp-duo,0)}tlp-icon[duotone],.tlp-duotone{--tlp-duo:.16}tlp-icon[duotone=false]{--tlp-duo:0}svg.tlp .f{fill:currentColor}svg.tlp .p{transform-box:fill-box;transform-origin:var(--o,center)}svg.tlp .p.vb{transform-box:view-box}svg.tlp .p.hh{transform:rotate(var(--h0,0deg))}svg.tlp.tlp-run .p{animation:var(--a) var(--t,1000ms) var(--e,cubic-bezier(.45,.05,.55,.95)) var(--dl,0ms) 1 both}tlp-icon[flip=x]>svg,[dir=rtl] tlp-icon[flip=rtl]>svg{transform:scaleX(-1)}@keyframes tlp-draw{0%{stroke-dasharray:1;stroke-dashoffset:1}100%{stroke-dasharray:1;stroke-dashoffset:0}}@keyframes tlp-fillIn{0%{fill-opacity:0}100%{fill-opacity:var(--tlp-duo,0)}}@keyframes tlp-popIn{0%{opacity:0;transform:scale(.4)}55%{opacity:1;transform:scale(1.08)}78%{transform:scale(.98)}100%{opacity:1;transform:scale(1)}}@keyframes tlp-fadeIn{0%{opacity:0}100%{opacity:1}}@keyframes tlp-slideIn{0%{opacity:0;transform:translateX(-4px)}100%{opacity:1;transform:translateX(0)}}@keyframes tlp-riseIn{0%{opacity:0;transform:translateY(4px)}100%{opacity:1;transform:translateY(0)}}@keyframes tlp-dropIn{0%{opacity:0;transform:translateY(-5px)}60%{opacity:1;transform:translateY(.8px)}80%{transform:translateY(-.3px)}100%{opacity:1;transform:translateY(0)}}@keyframes tlp-grow{0%{transform:scaleY(0)}70%{transform:scaleY(1.06)}100%{transform:scaleY(1)}}@keyframes tlp-growX{0%{transform:scaleX(0)}100%{transform:scaleX(1)}}@keyframes tlp-pop{0%,100%{transform:scale(1)}40%{transform:scale(1.14)}68%{transform:scale(.97)}86%{transform:scale(1.02)}}@keyframes tlp-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}@keyframes tlp-jelly{0%,100%{transform:scale(1,1)}30%{transform:scale(1.1,.9)}50%{transform:scale(.94,1.06)}70%{transform:scale(1.03,.97)}85%{transform:scale(.99,1.01)}}@keyframes tlp-swing{0%,100%{transform:rotate(0)}15%{transform:rotate(13deg)}32%{transform:rotate(-10deg)}50%{transform:rotate(6deg)}68%{transform:rotate(-3deg)}84%{transform:rotate(1deg)}}@keyframes tlp-wiggle{0%,100%{transform:rotate(0)}20%{transform:rotate(-8deg)}45%{transform:rotate(6deg)}68%{transform:rotate(-3deg)}86%{transform:rotate(1deg)}}@keyframes tlp-tilt{0%,100%{transform:rotate(0)}40%{transform:rotate(-12deg)}72%{transform:rotate(3deg)}88%{transform:rotate(-1deg)}}@keyframes tlp-nod{0%,100%{transform:rotate(0)}45%{transform:rotate(7deg)}75%{transform:rotate(-1.5deg)}}@keyframes tlp-strike{0%,100%{transform:rotate(0)}38%{transform:rotate(-24deg)}56%{transform:rotate(7deg)}70%{transform:rotate(-2deg)}84%{transform:rotate(.6deg)}}@keyframes tlp-hop{0%,100%{transform:translateY(0) scale(1,1)}10%{transform:translateY(0) scale(1.04,.95)}40%{transform:translateY(-3px) scale(.97,1.04)}68%{transform:translateY(0) scale(1.04,.96)}84%{transform:translateY(0) scale(.99,1.01)}}@keyframes tlp-lift{0%,100%{transform:translateY(0)}45%{transform:translateY(-2.5px)}75%{transform:translateY(.4px)}}@keyframes tlp-sink{0%,100%{transform:translateY(0)}45%{transform:translateY(2.5px)}75%{transform:translateY(-.4px)}}@keyframes tlp-nudge{0%,100%{transform:translateX(0)}45%{transform:translateX(2.6px)}75%{transform:translateX(-.4px)}}@keyframes tlp-nudgeBack{0%,100%{transform:translateX(0)}45%{transform:translateX(-2.6px)}75%{transform:translateX(.4px)}}@keyframes tlp-float{0%,100%{transform:translateY(0)}25%{transform:translateY(-2px)}50%{transform:translateY(0)}75%{transform:translateY(-1.2px)}}@keyframes tlp-flip{0%,100%{transform:scaleX(1)}50%{transform:scaleX(-1)}}@keyframes tlp-spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}@keyframes tlp-spinBack{0%{transform:rotate(0)}100%{transform:rotate(-360deg)}}@keyframes tlp-spinHalf{0%{transform:rotate(0)}80%{transform:rotate(188deg)}100%{transform:rotate(180deg)}}@keyframes tlp-sweep{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}@keyframes tlp-sweepHour{0%{transform:rotate(var(--h0,0deg))}100%{transform:rotate(calc(var(--h0,0deg) + 30deg))}}@keyframes tlp-blink{0%,100%{transform:scaleY(1)}35%{transform:scaleY(.08)}60%{transform:scaleY(1)}}@keyframes tlp-shake{0%,100%{transform:translateX(0)}18%{transform:translateX(-1.6px)}36%{transform:translateX(1.4px)}54%{transform:translateX(-1px)}72%{transform:translateX(.6px)}88%{transform:translateX(-.2px)}}@keyframes tlp-pulseRing{0%,100%{opacity:1;transform:scale(1)}55%{opacity:0;transform:scale(1.5)}56%{opacity:0;transform:scale(.6)}}@keyframes tlp-orbit{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}@keyframes tlp-stretch{0%,100%{transform:scaleX(1)}45%{transform:scaleX(1.12)}75%{transform:scaleX(.98)}}@media (prefers-reduced-motion:reduce){svg.tlp .p{animation:none!important}}";function W(t=v()){if(A||!t||!t.head||(A=!0,t.getElementById("tlp-icons-style")||E.length<20))return;const e=t.createElement("style");e.id="tlp-icons-style",e.textContent=E,t.head.appendChild(e)}export{E as CSS,j as EASE,I as ICON_SELECTOR,O as config,U as createSvg,W as ensureStyles,h as getIcon,_ as hoverTarget,V as installHover,D as loadIcon,q as register,w as resolve,H as run,M as setLoader,X as timings,F as toSvgString};
3
+ //# sourceMappingURL=core.js.map