svelte-image-loader

Svelte action to increase the level of UX by neatly preloading images (icons)

🚀 Features

This is Svelte's action to handle the error andload events of images correctly with filling it with color.

• Easy to use (an implementation through the Svelte action)
• Light size (zero-dependencies 🔥 💥)
• Any custom CSS for loading/error state

P.S. It's recommended to use this package only for icons (small images). If you want to achieve the best UX for middle or large images, use svelte-skeleton (NPM package).

Install

npm i svelte-image-loader

Usage

<script>
  import imageLoader from 'svelte-image-loader'
 
  ...
 
  const src = `...`
  const borderRadius = '50%'
</script> 
 
<img {src} alt="" use:imageLoader="{borderRadius}" />
 
<style lang="scss">
  $color-icon-secondary: #BFC1C7;
 
  ...
 
  :global(.svelte-image-loader) {
  	background-color: $color-icon-secondary;
  }
 
  ...
</style>

Also you can initially call initImageLoader function to set custom class name (other than .svelte-image-loader).

API

Parameters

Name	Type	Default	Description
borderRadius	string	empty string	CSS border-radius of loading/error state

License

MIT © Denis Stasyev