Neti Pot Manufacturer

    svelte-image-loader

    1.0.5 • Public • Published

    svelte-image-loader

    NPM version NPM downloads Svelte v3

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

    example

    🚀 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 {srcalt="" 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

    Install

    npm i svelte-image-loader

    DownloadsWeekly Downloads

    1

    Version

    1.0.5

    License

    MIT

    Unpacked Size

    3.35 kB

    Total Files

    3

    Last publish

    Collaborators

    • denisstasyev