{"_id":"@lordicon/web","_rev":"8-e318d3f33b37ce0eebd9533bbbd58de6","name":"@lordicon/web","dist-tags":{"latest":"2.0.1"},"versions":{"1.0.0":{"name":"@lordicon/web","version":"1.0.0","keywords":["lordicon","lottie","icon","animation"],"author":{"name":"Lordicon","email":"dev@lordicon.com"},"license":"MIT","_id":"@lordicon/web@1.0.0","maintainers":[{"name":"willusz","email":"tom@lordicon.com"},{"name":"baszczewski","email":"marcin@baszczewski.pl"}],"homepage":"https://lordicon.com/","bugs":{"url":"https://github.com/lordicondev/player-web/issues"},"dist":{"shasum":"671ec2e0e4e83bed9cb6061b7ebd92dc8185def2","tarball":"https://registry.npmjs.org/@lordicon/web/-/web-1.0.0.tgz","fileCount":30,"integrity":"sha512-ffFZGtMpAJiYjFYiWOoPMCZt5Toacu7cvycC9yk8wDhc5WtXxnzhjaxHlZ3qM5PLYJlAF2dYeIUqcJCkH2f+dw==","signatures":[{"sig":"MEQCIHWLttxpjx1CeGdUueCR0d+srGBQ7U4vAw/Dq1H44xI6AiAOb8l2fXjJ+dvkVINrbMMFBD/gavTiFF1L6yvT00Edlg==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":472486},"main":"dist/index.js","type":"module","types":"dist/index.d.ts","gitHead":"4e163a2249c491ce2a3225d60d5187e718c14d89","private":false,"scripts":{"build":"vite build","start":"vite --config vite-examples.config.ts","prepack":"npm run build"},"_npmUser":{"name":"baszczewski","email":"marcin@baszczewski.pl"},"repository":{"url":"git+https://github.com/lordicondev/player-web.git","type":"git"},"_npmVersion":"10.9.2","description":"A lightweight and flexible player for seamlessly embedding, controlling, and customizing animated Lordicon icons in any web application.","directories":{},"sideEffects":false,"_nodeVersion":"22.17.0","_hasShrinkwrap":false,"devDependencies":{"vite":"^6.2.3","eslint":"^8.54.0","prettier":"^3.2.5","typescript":"^5.3.2","@types/node":"^22.13.13","concurrently":"^9.1.2","vite-plugin-dts":"^4.5.4","@lordicon/internal":"^0.5.0","eslint-config-prettier":"^9.1.0","@typescript-eslint/parser":"^6.12.0","@typescript-eslint/eslint-plugin":"^6.12.0"},"_npmOperationalInternal":{"tmp":"tmp/web_1.0.0_1752837666713_0.15449890956693157","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@lordicon/web","version":"1.0.1","keywords":["lordicon","lottie","icon","animation"],"author":{"name":"Lordicon","email":"dev@lordicon.com"},"license":"MIT","_id":"@lordicon/web@1.0.1","maintainers":[{"name":"willusz","email":"tom@lordicon.com"},{"name":"baszczewski","email":"marcin@baszczewski.pl"}],"homepage":"https://lordicon.com/","bugs":{"url":"https://github.com/lordicondev/player-web/issues"},"dist":{"shasum":"a6e7d8dee6d4114bbc7b291cc1396efba771e5f4","tarball":"https://registry.npmjs.org/@lordicon/web/-/web-1.0.1.tgz","fileCount":30,"integrity":"sha512-FXC7IkLAjPpCSAZmFLhoKUBLwv6KZq+ifTtp/+GHMEJpEdECUWGEZwWX2pnrpPgD9XJ/k9XKLe4wsW0YRzL2Mg==","signatures":[{"sig":"MEQCIH9ldWX8uA/kpLr3OjS1fHVBSEdQ0m3as+jM1l865UubAiAO91Rb6h+/3Vn6JBrL3wg9N2Fuv3Anqmetjez7TflRUQ==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":473056},"main":"dist/index.js","type":"module","types":"dist/index.d.ts","gitHead":"b8082bd0520cc8e583b7c057bbab37382d71c266","private":false,"scripts":{"build":"vite build","start":"vite --config vite-examples.config.ts","prepack":"npm run build"},"_npmUser":{"name":"baszczewski","email":"marcin@baszczewski.pl"},"repository":{"url":"git+https://github.com/lordicondev/player-web.git","type":"git"},"_npmVersion":"10.9.4","description":"A lightweight and flexible player for seamlessly embedding, controlling, and customizing animated Lordicon icons in any web application.","directories":{},"sideEffects":false,"_nodeVersion":"22.22.0","_hasShrinkwrap":false,"devDependencies":{"vite":"^6.2.3","eslint":"^8.54.0","prettier":"^3.2.5","typescript":"^5.3.2","@types/node":"^22.13.13","concurrently":"^9.1.2","vite-plugin-dts":"^4.5.4","@lordicon/internal":"^0.5.0","eslint-config-prettier":"^9.1.0","@typescript-eslint/parser":"^6.12.0","@typescript-eslint/eslint-plugin":"^6.12.0"},"_npmOperationalInternal":{"tmp":"tmp/web_1.0.1_1775739372470_0.8888412620444026","host":"s3://npm-registry-packages-npm-production"}},"1.1.0":{"name":"@lordicon/web","version":"1.1.0","keywords":["lordicon","lottie","icon","animation"],"author":{"name":"Lordicon","email":"dev@lordicon.com"},"license":"MIT","_id":"@lordicon/web@1.1.0","maintainers":[{"name":"willusz","email":"tom@lordicon.com"},{"name":"baszczewski","email":"marcin@baszczewski.pl"}],"homepage":"https://lordicon.com/","bugs":{"url":"https://github.com/lordicondev/player-web/issues"},"dist":{"shasum":"562b1cd32eb58d571dd98f2fb1e295bb8597151d","tarball":"https://registry.npmjs.org/@lordicon/web/-/web-1.1.0.tgz","fileCount":35,"integrity":"sha512-xf8GvH2Z1x6s+iaK1LV8Z9uZmBhNXdfq3iroScylWakL4Qp+RD7qxob5v4Lf/Bw9HE3TAIJg55kQ7qfjFa4kPg==","signatures":[{"sig":"MEUCIQDxwa0407QZZ9RhphhVXkAAu/LOOZIbfL2T7db7cnb8OQIgWy01dHTh832TY3H7BoLuiDhiMgQkGIsvTHj6FMTlsvk=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":457543},"main":"dist/index.js","type":"module","types":"dist/index.d.ts","gitHead":"7fa6e096299ac2a910b41aaabca1b859e18a15ed","private":false,"scripts":{"build":"vite build","start":"vite --config vite-examples.config.ts","prepack":"npm run build"},"_npmUser":{"name":"baszczewski","email":"marcin@baszczewski.pl"},"repository":{"url":"git+https://github.com/lordicondev/player-web.git","type":"git"},"_npmVersion":"10.9.7","description":"A lightweight and flexible player for seamlessly embedding, controlling, and customizing animated Lordicon icons in any web application.","directories":{},"sideEffects":false,"_nodeVersion":"22.22.2","_hasShrinkwrap":false,"devDependencies":{"vite":"^8.0.16","eslint":"^10.5.0","prettier":"^3.8.4","typescript":"^6.0.3","@types/node":"^22.13.13","concurrently":"^10.0.3","vite-plugin-dts":"^5.0.2","@lordicon/internal":"^0.5.0","eslint-config-prettier":"^10.1.8","@typescript-eslint/parser":"^8.61.1","@typescript-eslint/eslint-plugin":"^8.61.1"},"_npmOperationalInternal":{"tmp":"tmp/web_1.1.0_1781684747121_0.2906420166170869","host":"s3://npm-registry-packages-npm-production"}},"1.2.0":{"name":"@lordicon/web","version":"1.2.0","keywords":["lordicon","lottie","icon","animation"],"author":{"name":"Lordicon","email":"dev@lordicon.com"},"license":"MIT","_id":"@lordicon/web@1.2.0","maintainers":[{"name":"willusz","email":"tom@lordicon.com"},{"name":"baszczewski","email":"marcin@baszczewski.pl"}],"homepage":"https://lordicon.com/","bugs":{"url":"https://github.com/lordicondev/player-web/issues"},"dist":{"shasum":"cf6ad05f2370b3db78055c8089b05d9a7d832bdb","tarball":"https://registry.npmjs.org/@lordicon/web/-/web-1.2.0.tgz","fileCount":36,"integrity":"sha512-jIKIFdUZPxEurzdUJiS1eSJvxS7ODaFUpGcl9xUn8OK6tb8m0LkhY3NTS5Bza5F4b69dCFrsHqPrH316Cp2xAA==","signatures":[{"sig":"MEYCIQDGVxcEE163yw3HpLtSH7zgE760yQPOHAXE2pFiYmYoCQIhAK+ngIJpAPzxXrybryM7a+FmxENZyrAKeQUMTTePsUQy","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":458173},"main":"dist/index.js","type":"module","types":"dist/index.d.ts","gitHead":"186e09dc60726817ebf528a9f1ad8729049c7e98","private":false,"scripts":{"build":"vite build","start":"vite --config vite-examples.config.ts","prepack":"npm run build"},"_npmUser":{"name":"baszczewski","email":"marcin@baszczewski.pl"},"repository":{"url":"git+https://github.com/lordicondev/player-web.git","type":"git"},"_npmVersion":"10.9.7","description":"A lightweight and flexible player for seamlessly embedding, controlling, and customizing animated Lordicon icons in any web application.","directories":{},"sideEffects":false,"_nodeVersion":"22.22.2","_hasShrinkwrap":false,"devDependencies":{"vite":"^8.0.16","eslint":"^10.5.0","prettier":"^3.8.4","typescript":"^6.0.3","@types/node":"^22.13.13","concurrently":"^10.0.3","vite-plugin-dts":"^5.0.2","@lordicon/internal":"^0.5.0","eslint-config-prettier":"^10.1.8","@typescript-eslint/parser":"^8.61.1","@typescript-eslint/eslint-plugin":"^8.61.1"},"_npmOperationalInternal":{"tmp":"tmp/web_1.2.0_1781686718996_0.3482437779379701","host":"s3://npm-registry-packages-npm-production"}},"1.2.1":{"name":"@lordicon/web","version":"1.2.1","keywords":["lordicon","lottie","icon","animation"],"author":{"name":"Lordicon","email":"dev@lordicon.com"},"license":"MIT","_id":"@lordicon/web@1.2.1","maintainers":[{"name":"willusz","email":"tom@lordicon.com"},{"name":"baszczewski","email":"marcin@baszczewski.pl"}],"homepage":"https://lordicon.com/","bugs":{"url":"https://github.com/lordicondev/player-web/issues"},"dist":{"shasum":"3aa5eb1ccf2ac5a0f216e9074956b4f87d91e7cd","tarball":"https://registry.npmjs.org/@lordicon/web/-/web-1.2.1.tgz","fileCount":36,"integrity":"sha512-16djHCP6w6+y5WuCEl6D3I2tZhzLqcVhdSR8jynzxIrF384t0RTL2zNYEZhjCjNbw5taN0pbdqlqH8vJ1+spQg==","signatures":[{"sig":"MEUCIFR+njsnuLC579KSrj8aF9btpOJJ43RQnwycx/cAUGV9AiEAyu+Hw/qK2BfllTvBMVifspr7jzUgCLfaf4ZGxDfXMxQ=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":458526},"main":"dist/index.js","type":"module","types":"dist/index.d.ts","gitHead":"9e05a3df3ac34edcd4ab3b1833f165e608be57f9","private":false,"scripts":{"build":"vite build","start":"vite --config vite-examples.config.ts","prepack":"npm run build"},"_npmUser":{"name":"baszczewski","email":"marcin@baszczewski.pl"},"repository":{"url":"git+https://github.com/lordicondev/player-web.git","type":"git"},"_npmVersion":"10.9.7","description":"A lightweight and flexible player for seamlessly embedding, controlling, and customizing animated Lordicon icons in any web application.","directories":{},"sideEffects":false,"_nodeVersion":"22.22.2","_hasShrinkwrap":false,"devDependencies":{"vite":"^8.0.16","eslint":"^10.5.0","prettier":"^3.8.4","typescript":"^6.0.3","@types/node":"^22.13.13","concurrently":"^10.0.3","vite-plugin-dts":"^5.0.2","@lordicon/internal":"^0.5.0","eslint-config-prettier":"^10.1.8","@typescript-eslint/parser":"^8.61.1","@typescript-eslint/eslint-plugin":"^8.61.1"},"_npmOperationalInternal":{"tmp":"tmp/web_1.2.1_1781690338717_0.6654600052888051","host":"s3://npm-registry-packages-npm-production"}},"2.0.0":{"name":"@lordicon/web","version":"2.0.0","keywords":["lordicon","lottie","icon","animation"],"author":{"name":"Lordicon","email":"dev@lordicon.com"},"license":"MIT","_id":"@lordicon/web@2.0.0","maintainers":[{"name":"willusz","email":"tom@lordicon.com"},{"name":"baszczewski","email":"marcin@baszczewski.pl"}],"homepage":"https://lordicon.com/","bugs":{"url":"https://github.com/lordicondev/player-web/issues"},"dist":{"shasum":"02c5f34fe2b943390c73643d47f92a060364fee5","tarball":"https://registry.npmjs.org/@lordicon/web/-/web-2.0.0.tgz","fileCount":14,"integrity":"sha512-czxSMtvCqMxCWE70qTk8lE98laDMvqg74qAS+4EDX8HktkEWHph6ZhMwOgBi3WHYzq2JMcF/VybYO1DKuMixkg==","signatures":[{"sig":"MEQCIQDJc3iAAJjR+lYqddyvraAxCuFlEkVKxM4sMrPGfqUXGQIfI5VwlvECpFSIgeRnaBHtyciicqQf603a0QCeu2yNdg==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"},{"sig":"MEQCIGt1QrNl4uD+xDy++kR1EOhSLfNI8KM0AT6eBogSEI/+AiBaAmoU2L3D7q/I25gznc3rZzPlEA59Wom4M+haGIVdxg==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":254509},"main":"./dist/index.js","type":"module","types":"./dist/index.d.ts","engines":{"node":">=20"},"exports":{".":{"types":"./dist/index.d.ts","default":"./dist/index.js"},"./package.json":"./package.json"},"gitHead":"e4c575906321fa2201ce5f4b5b29be3b6208c996","scripts":{"lint":"eslint .","test":"vitest run","build":"vite build","check":"npm run check:types && npm run lint && npm run format:check","start":"vite --config vite-examples.config.ts","format":"prettier --write .","prepack":"npm run build","check:types":"tsc --noEmit","format:check":"prettier --check ."},"_npmUser":{"name":"baszczewski","email":"marcin@baszczewski.pl"},"repository":{"url":"git+https://github.com/lordicondev/player-web.git","type":"git"},"_npmVersion":"11.16.0","description":"Player for animated Lordicon icons: states, segments, colours and stroke on top of a small Lottie renderer.","directories":{},"sideEffects":false,"_nodeVersion":"24.18.0","dependencies":{"@lordicon/utils-lottie":"^2.0.0"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^8.3.0","eslint":"^10.11.0","vitest":"^5.0.1","globals":"^17.12.0","prettier":"^3.9.9","happy-dom":"^20.14.5","@eslint/js":"^10.0.1","typescript":"^6.0.3","@types/node":"^26.6.2","vite-plugin-dts":"^5.1.1","typescript-eslint":"^8.70.1","@lordicon/internal":"^0.5.0"},"_npmOperationalInternal":{"tmp":"tmp/web_2.0.0_1790173719327_0.13061754130995884","host":"s3://npm-registry-packages-npm-production"}},"2.0.1":{"_id":"@lordicon/web@2.0.1","bugs":{"url":"https://github.com/lordicondev/player-web/issues"},"dist":{"shasum":"50e5f2614bd4b0e3145ac07622676af32a99fbc4","tarball":"https://registry.npmjs.org/@lordicon/web/-/web-2.0.1.tgz","fileCount":14,"integrity":"sha512-cVI+xf51sJKAAVmer0ItyGJgwKjC6cFHOSGr/ZJxP6t3qQ0TRI4+FAWFp5A4jFmg4iQ/XXUCaZ6fM3ivc8sbYw==","signatures":[{"sig":"MEYCIQCGXJJQZ79S6cjwaJrLq5L2lb+Jw8+3gbjQN4RN+3fx4gIhAMxYse/sMtzE+Jq3P4cbBsnr63YKzgipGAa8m5D+Zt0T","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"},{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIAKdVv/tme5jjnZc5EG62bVaOzdho24RWuepzxkhBAqzAiEAiBs1txylD3neHcQr10+4P1yRSDwpwx9VjVLivK/k1DM="}],"unpackedSize":255114},"main":"./dist/index.js","name":"@lordicon/web","type":"module","types":"./dist/index.d.ts","author":{"name":"Lordicon","email":"dev@lordicon.com"},"engines":{"node":">=20"},"exports":{".":{"types":"./dist/index.d.ts","default":"./dist/index.js"},"./package.json":"./package.json"},"gitHead":"b23f4e51e06856fac6591ebbcdb8f8e4fe9c14d3","license":"MIT","scripts":{"lint":"eslint .","test":"vitest run","build":"vite build","check":"npm run check:types && npm run lint && npm run format:check","start":"vite --config vite-examples.config.ts","format":"prettier --write .","prepack":"npm run build","check:types":"tsc --noEmit","format:check":"prettier --check ."},"version":"2.0.1","_npmUser":{"name":"baszczewski","email":"marcin@baszczewski.pl"},"homepage":"https://lordicon.com/","keywords":["lordicon","lottie","icon","animation"],"repository":{"url":"git+https://github.com/lordicondev/player-web.git","type":"git"},"_npmVersion":"11.16.0","description":"Player for animated Lordicon icons: states, segments, colours and stroke on top of a small Lottie renderer.","directories":{},"maintainers":[{"name":"willusz","email":"tom@lordicon.com"},{"name":"baszczewski","email":"marcin@baszczewski.pl"}],"sideEffects":false,"_nodeVersion":"24.18.0","dependencies":{"@lordicon/utils-lottie":"^2.0.0"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^8.3.0","eslint":"^10.11.0","vitest":"^5.0.1","globals":"^17.12.0","prettier":"^3.9.9","happy-dom":"^20.14.5","@eslint/js":"^10.0.1","typescript":"^6.0.3","@types/node":"^26.6.2","vite-plugin-dts":"^5.1.1","typescript-eslint":"^8.70.1","@lordicon/internal":"^0.5.0"},"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/web_2.0.1_1790342731356_0.6628428030442153"}}},"time":{"created":"2025-07-18T11:21:06.712Z","modified":"2026-09-25T13:25:31.833Z","1.0.0":"2025-07-18T11:21:06.896Z","1.0.1":"2026-04-09T12:56:12.647Z","1.1.0":"2026-06-17T08:25:47.320Z","1.2.0":"2026-06-17T08:58:39.141Z","1.2.1":"2026-06-17T09:58:58.851Z","2.0.0":"2026-09-23T14:28:39.439Z","2.0.1":"2026-09-25T13:25:31.682Z"},"bugs":{"url":"https://github.com/lordicondev/player-web/issues"},"author":{"name":"Lordicon","email":"dev@lordicon.com"},"license":"MIT","homepage":"https://lordicon.com/","keywords":["lordicon","lottie","icon","animation"],"repository":{"url":"git+https://github.com/lordicondev/player-web.git","type":"git"},"description":"Player for animated Lordicon icons: states, segments, colours and stroke on top of a small Lottie renderer.","maintainers":[{"name":"willusz","email":"tom@lordicon.com"},{"name":"baszczewski","email":"marcin@baszczewski.pl"}],"readme":"# Lordicon Web Player\n\nPlays an animated [Lordicon](https://lordicon.com/) icon from JavaScript, in any element: its\nstates, colours and stroke.\n\n```sh\nnpm install @lordicon/web\n```\n\n```js\nimport { Player } from '@lordicon/web';\n\nconst data = await (await fetch('/icons/lock.json')).json();\nconst player = new Player(container, data);\n\ncontainer.addEventListener('pointerenter', () => player.play());\n```\n\n`data` is the icon's Lottie JSON. The icon plays its default state, usually a hover.\n\n## States\n\nAn icon holds several animations, its states: `in-reveal`, `hover-jump`, `morph-unlocked`.\n\n```js\nplayer.states; // [{ name: 'in-reveal', time: 0, duration: 120, ... }, ...]\nplayer.play({ state: 'in-reveal' }); // load a state and play it from its start\nplayer.state = 'hover-jump'; // or only load it\nplayer.currentState; // { name: 'hover-jump', time: 160, ... }, for the helpers below\nplayer.state = '*'; // the whole file\n```\n\nA morph goes to a second look and back. With a ratio in its marker (`morph-select:0.5`) the\nstate is two animations in a row, the way there and the way back, so play one half at a time:\n`play({ state })` would play both, and `reverse` would run both backwards. Without a ratio,\nthe state is the way there, and the way back is the same frames played backwards:\n\n```js\nimport { splitSegment, stateSegment } from '@lordicon/web';\n\nplayer.state = 'morph-select';\nconst morph = player.currentState;\nconst halves = splitSegment(morph); // null without a ratio\n\nif (halves) player.play({ segment: on ? halves[0] : halves[1] });\nelse player.play({ segment: stateSegment(morph), reverse: !on });\n```\n\n## Colours and stroke\n\n```js\nplayer.colors.primary = 'red'; // any hex value or CSS colour name\ndelete player.colors.primary; // the icon's own again\nplayer.colors = { secondary: '#08a88a' }; // replace them all; null resets\nplayer.stroke = 'bold'; // 'light', 'regular', 'bold', or 1, 2, 3; null resets\n```\n\nTo swap one of the icon's colours wherever it is used, whatever its name:\n\n```js\nimport { colorsByName } from '@lordicon/web';\n\nplayer.colors = colorsByName(player.defaultColors, { '#121331': '#ffffff' });\n```\n\nState, colours and stroke can also be given to the constructor:\n`new Player(container, data, { state: 'hover-jump', colors: { primary: 'red' }, stroke: 3 })`.\n\n## Playback\n\n```js\nplayer.pause();\nplayer.stop(); // back to the first frame\nplayer.seek('end'); // a frame, 'start' or 'end', and pause\nplayer.progress = 0.5; // halfway\nplayer.loop = true;\nplayer.speed = 2;\nplayer.direction = -1; // backwards\n\nplayer.play({ from: 'start' }); // restart\nplayer.play({ reverse: true }); // backwards, from the end\nplayer.play({ segment: [130, 191] }); // some frames\n```\n\n`play()` returns a promise: `true` when the animation plays to its end, `false` when\nsomething cuts it short: another `play()` with options, `stop()`, a new state, `destroy()`.\nIt never rejects.\n\n```js\nif (await player.play({ state: 'in-reveal' })) player.play({ state: 'hover-jump' });\n```\n\n## Events\n\n```js\nplayer.addEventListener('complete', (event) => {\n    const { segment, direction, state } = event.detail;\n});\n```\n\n| Event      | When                                                                 |\n| ---------- | -------------------------------------------------------------------- |\n| `ready`    | The animation exists. A listener added later still gets it.          |\n| `complete` | The animation played to its end, or its start when backwards.        |\n| `loop`     | A round of a looping animation ended; `complete` does not fire then. |\n| `frame`    | A frame was drawn.                                                   |\n| `refresh`  | Colours or stroke changed.                                           |\n| `destroy`  | `destroy()` ran.                                                     |\n\nThe player is an `EventTarget`: `{ once: true }` and `{ signal }` work.\n\n## Many icons on a page\n\nA player holds an animation and a copy of the icon data. With many icons on a page, create a\nplayer when its icon comes into view and destroy it when the icon leaves:\n\n```js\nconst player = new Player(container, data, null, { autoInit: false });\n\nplayer.init(); // when the icon is needed\nplayer.destroy(); // when it is not\n```\n\n- `autoInit: false` leaves rendering to `init()`. What is set before applies then.\n- `destroy()` empties the container. Keep one player per container: destroy the old one\n  before creating the next.\n- `init()` and `destroy()` can run more than once; a destroyed player does nothing.\n- `{ copy: false }` skips the copy of `data` when it was fetched for this player alone; the\n  renderer then changes it.\n\n## API\n\n`new Player(container, data, properties?, options?)`, with `properties`\n`{ state, colors, stroke }` and `options` `{ autoInit, copy }`.\n\n| Member                                | What it does                                                            |\n| ------------------------------------- | ----------------------------------------------------------------------- |\n| `play(options?)`                      | Plays. `{ state, segment, from: 'start', reverse }`.                    |\n| `pause()`                             | Pauses where it is.                                                     |\n| `stop()`                              | Pauses on the first frame.                                              |\n| `seek(frame)`                         | Shows a frame, `'start'` or `'end'`, and pauses.                        |\n| `init()`, `destroy()`                 | Create and remove the animation.                                        |\n| `ready`, `readyPromise`               | Ready now; a promise of `true` when ready, `false` if destroyed first.  |\n| `playing`                             | Whether it plays.                                                       |\n| `state`                               | The state's name. `null` sets the default one, `'*'` the whole file.    |\n| `currentState`                        | The state as an object, `null` for the whole file.                      |\n| `states`                              | The icon's states.                                                      |\n| `segment`                             | The loaded frames, `[start, end)`. `null` goes back to the state's.     |\n| `frame`                               | The frame on screen.                                                    |\n| `frameCount`, `frameRate`, `duration` | Frames in the segment, frames per second, seconds at the current speed. |\n| `progress`                            | 0 to 1 through the segment. Setting it seeks.                           |\n| `direction`, `speed`, `loop`          | How it plays: `1` or `-1`, `1` by default, `false` by default.          |\n| `colors`, `defaultColors`             | The colours by name; the icon's own.                                    |\n| `stroke`                              | `1`, `2` or `3`; null when the icon has no stroke setting.              |\n| `properties`                          | State, colours and stroke at once. What is left out resets.             |\n| `renderer`, `controls`                | The animation and its effect controls, for what the player lacks.       |\n\nAlso exported, from `@lordicon/utils-lottie`: `findState`, `defaultState`, `stateType`,\n`stateSegment`, `stateRatio`, `splitSegment`, `stateEndFrame`, `colorsByName`,\n`parseColors`, `parseStroke`, `resolveColor`, `strokeName`, `isIconData`.\n\n## Details\n\n**Frames** are absolute, as in the icon's markers: a state at frame 130 starts at `130`,\nwhatever is loaded. A state's segment is `[tm, tm + dr + 1)`: its last keyframes sit on\n`tm + dr`, and that frame has to play for the state to reach its final pose. The last frame\nof a segment is `segment[1] - 1`.\n\n**`play()` without options** resumes where the icon is, and starts over once the segment has\nfinished. With options it starts a new playback, and the previous promise gets `false`.\n\n**The default state** plays when none is given; `null` or an unknown name picks it too.\nAn icon without one plays the whole file, from its first state to the end of its last. A file\nwithout markers has no states, and plays its own frames, `ip` to `op`.\n\n**Subclassing.** Every playback goes through `play()`, a state change during play included,\nso overriding that one method wraps them all.\n\n**Before `init()`**, `state`, `speed`, `direction`, `loop`, colours and stroke can be set;\nthey apply when it runs. `play()` resolves `false`.\n\n## Upgrading\n\nWhat changed from 1.x, and what to write instead: [CHANGELOG.md](CHANGELOG.md).\n\n## Development\n\n```sh\nnpm install\nnpm start          # the examples\nnpm test           # Vitest, on the real renderer in happy-dom\nnpm run check      # types, lint, formatting\nnpm run build\n```\n\n## License\n\nMIT\n","readmeFilename":"README.md"}