fix: extends svelte/element for Img

Author: shinokada

src/lib/typography/Img.svelte

@@ -1,27 +1,23 @@
 <script lang="ts">
   import { twMerge } from 'tailwind-merge';
-  interface Props {
+  import type { HTMLImgAttributes } from 'svelte/elements';
+
+  interface Props extends HTMLImgAttributes{
     caption?: string;
-    src?: string;
-    srcset?: string;
-    size?: string;
-    alignment?: string;
     imgClass?: string;
     figClass?: string;
-    alt?: string;
-    effect?: string;
     captionClass?: string;
     class?: string;
   }
   
-  let { caption='', src='', srcset='', size = 'max-w-full', alignment = '', imgClass = 'h-auto', figClass = 'max-w-lg', alt = '', effect = '', captionClass = 'mt-2 text-sm text-center text-gray-500 dark:text-gray-400', class: className = '', ...attributes } = $props()
+  let { caption='', imgClass = 'max-w-full h-auto', figClass = 'max-w-lg', captionClass = 'mt-2 text-sm text-center text-gray-500 dark:text-gray-400', class: className = '', ...attributes } = $props()
 </script>
 
 {#if caption}
   <figure class={figClass}>
-    <img class={twMerge(imgClass, size, alignment, effect, className)} {src} {srcset} {alt} />
+    <img {...attributes} class={twMerge(imgClass, className)}/>
     <figcaption class={captionClass}>{@html caption}</figcaption>
   </figure>
 {:else}
-  <img {...attributes} class={twMerge(imgClass, size, alignment, effect, className)} {src} {srcset} {alt} />
+  <img {...attributes} class={twMerge(imgClass, className)}/>
 {/if}

src/routes/typography/image/+page.svelte

@@ -45,31 +45,31 @@
 <p>Use this example to apply rounded corners to the image by using the rounded-size class where the size can be anything from small to extra large.</p>
 
 <CodeWrapper class="flex justify-center">
-<Img src="/images/examples/[email protected]" alt="sample 1" size="max-w-lg" class="rounded-lg" />
+<Img src="/images/examples/[email protected]" alt="sample 1" class="max-w-lg rounded-lg" />
 </CodeWrapper>
 
 <H3>Full circle</H3>
 
 <p>Use this example to mask the image inside a circle using the rounded-full utility class from Tailwind CSS.</p>
 
 <CodeWrapper class="flex justify-center">
-<Img src="/images/examples/[email protected]" alt="sample 1" size="w-96" imgClass="h-96" class="rounded-full" />
+<Img src="/images/examples/[email protected]" alt="sample 1" imgClass="h-96" class="w-96 rounded-full" />
 </CodeWrapper>
 
 <H2>Image shadow</H2>
 
 <p>This example can be used to show a shadow effect for the image using the shadow-size utility class.</p>
 
 <CodeWrapper class="flex justify-center">
-<Img src="/images/examples/[email protected]" alt="sample 1" size="max-w-xl" class="shadow-xl dark:shadow-gray-800" />
+<Img src="/images/examples/[email protected]" alt="sample 1" class="max-w-xl shadow-xl dark:shadow-gray-800" />
 </CodeWrapper>
 
 <H2>Retina-ready</H2>
 
 <p>Use the srcset attribute to set Retina-ready images with double resolution.</p>
 
-<CodeWrapper>svelte example class="flex justify-center" hideScript
-<Img srcset="/images/examples/image-1.jpg 1x, /images/examples/[email protected] 2x" alt="sample 1" size="w-full max-w-xl" class="rounded-lg" />
+<CodeWrapper class="flex justify-center">
+<Img srcset="/images/examples/image-1.jpg 1x, /images/examples/[email protected] 2x" alt="sample 1" class="w-full max-w-xl rounded-lg" />
 </CodeWrapper>
 
 <H2>Image card</H2>
@@ -91,7 +91,7 @@ Use the filter option and apply a grayscale to the image element using the grays
 
 <CodeWrapper class="flex justify-center" >
 
-<Img src="/images/examples/content-gallery-3.png" size="max-w-lg" alt="My gallery" class="rounded-lg transition-all duration-300 cursor-pointer filter grayscale hover:grayscale-0" />
+<Img src="/images/examples/content-gallery-3.png" alt="My gallery" class="max-w-lg rounded-lg transition-all duration-300 cursor-pointer filter grayscale hover:grayscale-0" />
 </CodeWrapper>
 
 <H3>Blur</H3>
@@ -100,7 +100,7 @@ Apply a blur by using the blur-size utility class from Tailwind CSS to an image
 
 <CodeWrapper class="flex justify-center" >
 
-<Img src="/images/examples/content-gallery-3.png" size="max-w-lg" alt="My gallery" class="rounded-lg transition-all duration-300 blur-sm hover:blur-none" />
+<Img src="/images/examples/content-gallery-3.png" alt="My gallery" class="max-w-lg rounded-lg transition-all duration-300 blur-sm hover:blur-none" />
 </CodeWrapper>
 
 <H2>Alignment</H2>
@@ -113,16 +113,15 @@ By default, the image component will be aligned to the left side of the page.
 
 <CodeWrapper>
 
-<Img src="/images/examples/[email protected]" size="max-w-lg" alt="sample 1" />
+<Img src="/images/examples/[email protected]" class="max-w-lg" alt="sample 1" />
 </CodeWrapper>
 
 <H3>Center</H3>
 
-Horizontally align the image to the center of the page using the `mx-auto` class.
+Horizontally align the image to the center of the page using the `class` class.
 
 <CodeWrapper>
-
-<Img src="/images/examples/[email protected]" size="max-w-lg" alignment="mx-auto" alt="sample 1" />
+<Img src="/images/examples/[email protected]" class="mx-auto max-w-lg" alt="sample 1" />
 </CodeWrapper>
 
 <H3>Right</H3>
@@ -131,7 +130,7 @@ Use the `ms-auto` class to align the image to the right side of the page.
 
 <CodeWrapper>
 
-<Img src="/images/examples/[email protected]" size="max-w-lg" alignment="ms-auto" alt="sample 1" />
+<Img src="/images/examples/[email protected]" class="ms-auto max-w-lg" alt="sample 1" />
 </CodeWrapper>
 
 <H2>Sizes</H2>
@@ -144,7 +143,7 @@ Use the `max-w-xs` class to set a small size of the image.
 
 <CodeWrapper class="flex justify-center">
 
-<Img src="/images/examples/[email protected]" size="max-w-xs" alt="sample 1" />
+<Img src="/images/examples/[email protected]" class="max-w-xs" alt="sample 1" />
 </CodeWrapper>
 
 <H3>Medium</H3>
@@ -153,23 +152,21 @@ Use the `max-w-md` class to set a medium size of the image.
 
 <CodeWrapper class="flex justify-center" >
 
-<Img src="/images/examples/[email protected]" size="max-w-md" alt="sample 1" />
+<Img src="/images/examples/[email protected]" class="max-w-md" alt="sample 1" />
 </CodeWrapper>
 
 <H3>Large</H3>
 
 Use the max-w-xl class to set a large size of the image.
 
 <CodeWrapper class="flex justify-center" >
-
-<Img src="/images/examples/[email protected]" size="max-w-xl" alt="sample 1" />
+<Img src="/images/examples/[email protected]" class="max-w-xl" alt="sample 1" />
 </CodeWrapper>
 
 <H3>Full width</H3>
 
 Use the max-w-full class to set the full width of the image as long as it doesn’t become larger than the original source.
 
 <CodeWrapper class="flex justify-center" >
-
-<Img src="/images/examples/[email protected]" size="max-w-full" alt="sample 1" />
+<Img src="/images/examples/[email protected]" class="max-w-full" alt="sample 1" />
 </CodeWrapper>