Last active
          October 19, 2025 06:11 
        
      - 
      
 - 
        
Save Michael-Obele/5d3e9102ead6d54a458a1cebdf3ecc17 to your computer and use it in GitHub Desktop.  
    Ways to use Lordicon in a sveltekit project
  
        
  
    
      This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
      Learn more about bidirectional Unicode characters
    
  
  
    
  | <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