Skip to content

Instantly share code, notes, and snippets.

@Michael-Obele
Last active October 19, 2025 06:11
Show Gist options
  • Save Michael-Obele/5d3e9102ead6d54a458a1cebdf3ecc17 to your computer and use it in GitHub Desktop.
Save Michael-Obele/5d3e9102ead6d54a458a1cebdf3ecc17 to your computer and use it in GitHub Desktop.
Ways to use Lordicon in a sveltekit project
<script lang="ts">
// Best option
//
// onMount(() => {
// let lottieInstance: any;
// // eslint-disable-next-line @typescript-eslint/no-floating-promises
// void (async () => {
// try {
// const lottie = (await import('lottie-web')).default;
// const { defineElement } = await import('@lordicon/element');
// defineElement();
// // If you later create an animation, capture the instance:
// // lottieInstance = lottie.loadAnimation({...});
// } catch (err) {
// // eslint-disable-next-line no-console
// console.warn('could not load lottie / lordicon client libs:', err);
// }
// })();
// // synchronous cleanup function (must be sync)
// return () => {
// if (lottieInstance?.destroy) lottieInstance.destroy();
// };
// });
// Another alternative is to use IIFEs
//
onMount(() => {
// Use promise chaining to avoid an async function that might return a Promise
// (Svelte's onMount should return a synchronous cleanup function).
import('lottie-web')
.then((m) => m.default)
.then(() => import('@lordicon/element'))
.then(({ defineElement }) => defineElement())
.catch((err) => {
// Fail gracefully in environments where these client-only libs can't load
// (e.g., during certain dev-tooling runs). Keep a console warning for debug.
// No runtime-critical behavior depends on these imports here.
// eslint-disable-next-line no-console
console.warn('could not load lottie / lordicon client libs:', err);
});
});
// Another alternative is IIFEs
//
// onMount(() => {
// (async () => {
// try {
// const lottie = (await import('lottie-web')).default;
// const { defineElement } = await import('@lordicon/element');
// defineElement();
// // if you need the lottie instance later, store it (example below)
// // (globalThis as any).__LOTTIE__ = lottie;
// } catch (err) {
// // eslint-disable-next-line no-console
// console.warn('could not load lottie / lordicon client libs:', err);
// }
// })();
// });
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment