Distinguish between imagetools Picture and SveltePicture

Author: leoj3n

src/lib/SvelteImg.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">
-import Picture from './Picture.svelte'
+import SveltePicture from './SveltePicture.svelte'
 import { len, lqipToBackground } from './utils.js'
 import type { HTMLImgAttributes } from 'svelte/elements'
-import type { Picture as PictureType } from 'vite-imagetools'
+import type { Picture } from 'vite-imagetools'
 
 interface $$Props extends Omit<HTMLImgAttributes, 'src'> {
   /** imagetools import */
-  src: PictureType
+  src: Picture
 
   /** img tag `sizes` attr */
   sizes?: string
@@ -35,8 +35,8 @@ export let loading: $$Props['loading'] = 'lazy'
 export let decoding: $$Props['decoding'] = 'async'
 export let ref: $$Props['ref'] = undefined
 
-let sources: PictureType['sources'] | undefined
-let img: (PictureType['img'] & { lqip?: string }) | undefined
+let sources: Picture['sources'] | undefined
+let img: (Picture['img'] & { lqip?: string }) | undefined
 let background: string | undefined
 
 $: sources = src?.sources
@@ -47,7 +47,7 @@ $: if (len(img)) {
 </script>
 
 {#if len(img)}
-  <Picture {sources} {sizes}>
+  <SveltePicture {sources} {sizes}>
     <!-- svelte-ignore a11y-missing-attribute a11y-no-noninteractive-element-interactions -->
     <img
       {loading}
@@ -61,24 +61,28 @@ $: if (len(img)) {
       {...$$restProps}
       src={img?.src}
     />
-  </Picture>
+  </SveltePicture>
 {/if}
 
 <!--
-  @component
-  High-performance responsive/progressive images for SvelteKit
-  
-  ## Usage
-  ```tsx
-  <Img class="cool kitty" src="{cat}" alt="Very meow" />
-  ```
-  
-  ## Props
-  - `src: PictureType` - imagetools import
-  - `sizes?: string` - img tag `sizes` attr
-  - `width?: number` - img `width` override
-  - `height?: number` - img `height` override
-  - `loading?: 'lazy' | 'eager'` - img tag `loading` attr
-  - `decoding?: 'async' | 'auto' | 'sync'` - img tag `decoding` attr
-  - `ref?: HTMLImageElement` - bindable reference to `<img>` element
-  -->
+@component
+High-performance responsive/progressive images for SvelteKit
+
+## Usage
+```html
+<script>
+  import Img from '@zerodevx/svelte-img'
+  import cat from '$lib/assets/cat.jpg?as=run'
+</script>
+<Img class="cool kitty" src="{cat}" alt="Very meow" />
+```
+
+## Props
+- `src: Picture` - imagetools import
+- `sizes?: string` - img tag `sizes` attr
+- `width?: number` - img `width` override
+- `height?: number` - img `height` override
+- `loading?: 'lazy' | 'eager'` - img tag `loading` attr
+- `decoding?: 'async' | 'auto' | 'sync'` - img tag `decoding` attr
+- `ref?: HTMLImageElement` - bindable reference to `<img>` element
+-->