Add customizable placeholder feature to Avatar component

src/lib/avatar/Avatar.svelte

@@ -3,6 +3,8 @@
   import { twMerge } from 'tailwind-merge';
 
   export let src: string = '';
+  export let fallbackSrc: string = ''; // Default fallback image
+  export let onError: boolean = true; // Control whether to handle the error event
   export let href: string | undefined = undefined;
   export let rounded: boolean = false;
   export let border: boolean = false;
@@ -23,16 +25,38 @@
   };
 
   let avatarClass: string;
-  $: avatarClass = twMerge(rounded ? 'rounded' : 'rounded-full', border && 'p-1 ring-2 ring-gray-300 dark:ring-gray-500', sizes[size], stacked && 'border-2 -ms-4 border-white dark:border-gray-800', 'bg-gray-100 dark:bg-gray-600 text-gray-600 dark:text-gray-300 object-cover', $$props.class);
+  $: avatarClass = twMerge(
+    rounded ? 'rounded' : 'rounded-full',
+    border && 'p-1 ring-2 ring-gray-300 dark:ring-gray-500',
+    sizes[size],
+    stacked && 'border-2 -ms-4 border-white dark:border-gray-800',
+    'bg-gray-100 dark:bg-gray-600 text-gray-600 dark:text-gray-300 object-cover',
+    $$props.class
+  );
+
+  // Reactive variable to manage the image source
+  let imageSrc: string = src;
+
+  // Error handler function to switch to the fallback image
+  const handleError = (event: Event) => {
+    if (onError) {
+      imageSrc = fallbackSrc;
+    }
+  };
 </script>
 
 {#if !src || !!href || $$slots.default || dot}
   <svelte:element this={href ? 'a' : 'div'} {href} {...$$restProps} class="relative flex justify-center items-center {avatarClass}">
-    {#if src}
-      <img {alt} {src} class={rounded ? 'rounded' : 'rounded-full'} />
+    {#if imageSrc}
+      <img
+        {alt}
+        src={imageSrc}
+        class={rounded ? 'rounded' : 'rounded-full'}
+        on:error={handleError}
+      />
     {:else}
       <slot>
-        <!-- default avatar placeholder -->
+        <!-- Default avatar placeholder SVG -->
         <svg class="w-full h-full {rounded ? 'rounded' : 'rounded-full'}" fill="currentColor" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
           <path fill-rule="evenodd" d="M8 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd" />
         </svg>
@@ -43,9 +67,16 @@
     {/if}
   </svelte:element>
 {:else}
-  <img {alt} {src} {...$$restProps} class={avatarClass} />
+  <img
+    {alt}
+    src={imageSrc}
+    {...$$restProps}
+    class={avatarClass}
+    on:error={handleError}
+  />
 {/if}
 
+
 <!--
 @component
 [Go to docs](https://flowbite-svelte.com/)
@@ -58,4 +89,4 @@
 @prop export let dot: object | undefined = undefined;
 @prop export let alt: string = '';
 @prop export let size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'none' = 'md';
--->
+-->

src/routes/docs/components/avatar.md

@@ -9,10 +9,10 @@ thumnailSize: w-64
 ---
 
 <script>
-  import { CompoAttributesViewer, GitHubCompoLinks, toKebabCase } from '../../utils'
-  import { P, A } from '$lib'
+  import { CompoAttributesViewer, GitHubCompoLinks, toKebabCase } from '../../utils';
+  import { P, A } from '$lib';
   let name;
-  const dirName = toKebabCase(component_title)
+  const dirName = toKebabCase(component_title);
 </script>
 
 The avatar component can be used as a visual identifier for a user profile on your website and you can use the examples from Flowbite to modify the styles and sizes of these components using the utility classes from Tailwind CSS.
@@ -44,9 +44,7 @@ Use this example to create a circle and rounded avatar on an image element.
 
 ## Bordered
 
-You can apply a border around the avatar component.
-
-If you can use the `ring-&#123;color&#125;` class from Tailwind CSS to modify ring color.
+You can apply a border around the avatar component. Use the `ring-&#123;color&#125;` class from Tailwind CSS to modify ring color.
 
 ```svelte example class="flex justify-center gap-4" hideScript hideResponsiveButtons
 <script>
@@ -103,7 +101,7 @@ Use this example to show a tooltip when hovering over the avatar.
 
 ## Dot indicator
 
-Use a dot element relative to the avatar component as an indicator for the user (eg. online or offline status).
+Use a dot element relative to the avatar component as an indicator for the user (e.g., online or offline status).
 
 ```svelte example class="flex justify-center gap-4" hideResponsiveButtons
 <script>
@@ -184,7 +182,7 @@ Use this example if you want to show a dropdown menu when clicking on the avatar
 
 ## Sizes
 
-You can set `size` property to preset values of `xs | sm | md | lg | xl`. Custom size can be achieved by setting size to `none` and adding any of the Tailwind Css size classes like `w-[x] h-[x]`.
+You can set the `size` property to preset values of `xs | sm | md | lg | xl`. Custom size can be achieved by setting size to `none` and adding any of the Tailwind CSS size classes like `w-[x] h-[x]`.
 
 Preset values are equivalents of:
 
@@ -201,7 +199,7 @@ Preset values are equivalents of:
   import { Avatar } from 'flowbite-svelte';
 </script>
 
-<div class=" flex flex-wrap justify-center space-x-4 rtl:space-x-reverse">
+<div class="flex flex-wrap justify-center space-x-4 rtl:space-x-reverse">
   <Avatar src="/images/profile-picture-3.webp" rounded size="xs" />
   <Avatar src="/images/profile-picture-3.webp" rounded size="sm" />
   <Avatar src="/images/profile-picture-3.webp" rounded size="md" />
@@ -211,6 +209,19 @@ Preset values are equivalents of:
 </div>
 ```
 
+## Customizable Placeholder
+
+This feature allows you to customize the placeholder avatar by providing a custom `fallbackSrc` image. This is useful when you want a specific placeholder image to show when the main avatar image fails to load.
+
+```svelte example class="flex justify-center gap-4" hideScript hideResponsiveButtons
+<script>
+  import { Avatar } from 'flowbite-svelte';
+</script>
+
+<Avatar src="/images/profile-picture-3.webp" fallbackSrc="/images/fallback-picture.webp" />
+<Avatar fallbackSrc="/images/fallback-picture.webp" />
+```
+
 ## Component data
 
 The component has the following props, type, and default values. See [types page](/docs/pages/typescript) for type information.
@@ -225,4 +236,4 @@ The component has the following props, type, and default values. See [types page
 
 - [Flowbite Avatar](https://flowbite.com/docs/components/avatar/)
 
-<GitHubCompoLinks />
+<GitHubCompoLinks />