svelte-image-loader

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

: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).

API

Parameters

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

License

MIT © Denis Stasyev