Svelte-image-loader NPM

svelte-image-loader

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

example

:rocket: 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 :fire: :boom:)
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).