fix: themesberg#1409 add iconFillColor and iconStrokeColor to Rating component

Author: shinokada

src/lib/carousel/Thumbnail.svelte

@@ -1,14 +1,20 @@
 <script lang="ts">
   import type { HTMLImgAttributes } from 'svelte/elements';
   import { twMerge } from 'tailwind-merge';
+  interface $$Props extends HTMLImgAttributes {
+    selected?: boolean;
+    alt?: string;
+    activeClass?: string;
+    inactiveClass?: string;
+  }
 
-  export let selected: boolean = false;
-
-  export let activeClass = 'opacity-100';
-  export let inactiveClass = 'opacity-60';
+  export let selected: $$Props['selected'] = false;
+  export let alt: $$Props['alt'] = '';
+  export let activeClass: $$Props['activeClass'] = 'opacity-100';
+  export let inactiveClass: $$Props['inactiveClass'] = 'opacity-60';
 </script>
 
-<img alt="..." {...$$restProps} class={twMerge(selected ? activeClass : inactiveClass, $$props.class)} />
+<img {...$$restProps} {alt} class={twMerge(selected ? activeClass : inactiveClass, $$props.class)} />
 
 <!--
 @component

src/lib/rating/Rating.svelte

@@ -3,39 +3,54 @@
   import { twMerge } from 'tailwind-merge';
   import generateId from '../utils/generateId.js';
   import type { ComponentType } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
 
-  export let divClass: string = 'flex items-center';
-  export let size: number = 24;
-  export let total: number = 5;
-  export let rating: number = 4;
-  export let partialId: string = 'partialStar' + generateId();
-  export let icon: ComponentType = Star;
-  export let count: boolean = false;
+  interface $$Props extends HTMLAttributes<HTMLDivElement> {
+    divClass?: string;
+    size?: number;
+    total?: number;
+    rating: number;
+    partialId?: string;
+    icon?: ComponentType;
+    count?: boolean;
+    iconFillColor?: string;
+    iconStrokeColor?: string;
+  }
+
+  export let divClass: $$Props['divClass'] = 'flex items-center';
+  export let size: $$Props['size'] = 24;
+  export let total: NonNullable<$$Props['total']> = 5;
+  export let rating: $$Props['rating'] = 4;
+  export let partialId: $$Props['partialId'] = 'partialStar' + generateId();
+  export let icon: $$Props['icon'] = Star;
+  export let count: $$Props['count'] = false;
+  export let iconFillColor: $$Props['iconFillColor'];
+  export let iconStrokeColor: $$Props['iconStrokeColor'];
 
   // generate unique id for full star and gray star
   const fullStarId: string = generateId();
   const grayStarId: string = generateId();
-  let fullStars: number = Math.floor(rating);
-  let rateDiffence = rating - fullStars;
-  let percentRating = Math.round(rateDiffence * 100);
-  let grayStars: number = total - (fullStars + Math.ceil(rateDiffence));
+  $: fullStars = Math.floor(rating);
+  $: rateDiffence = rating - fullStars;
+  $: percentRating = Math.round(rateDiffence * 100);
+  $: grayStars = total - (fullStars + Math.ceil(rateDiffence));
   // console.log(fullStars, grayStars, rateDiffence, percentRating)
 </script>
 
 <div class={twMerge(divClass, $$props.class)}>
   {#if count}
-    <svelte:component this={icon} fillPercent={100} {size} />
+    <svelte:component this={icon} fillColor={iconFillColor} strokeColor={iconStrokeColor} fillPercent={100} {size} />
     <p class="ms-2 text-sm font-bold text-gray-900 dark:text-white">{rating}</p>
     <slot />
   {:else}
     {#each Array(fullStars) as star}
-      <svelte:component this={icon} {size} fillPercent={100} id={fullStarId} />
+      <svelte:component this={icon} fillColor={iconFillColor} strokeColor={iconStrokeColor} {size} fillPercent={100} id={fullStarId} />
     {/each}
     {#if percentRating}
-      <svelte:component this={icon} {size} fillPercent={percentRating} id={partialId} />
+      <svelte:component this={icon} fillColor={iconFillColor} strokeColor={iconStrokeColor} {size} fillPercent={percentRating} id={partialId} />
     {/if}
     {#each Array(grayStars) as star}
-      <svelte:component this={icon} {size} fillPercent={0} id={grayStarId} />
+      <svelte:component this={icon} fillColor={iconFillColor} strokeColor={iconStrokeColor} {size} fillPercent={0} id={grayStarId} />
     {/each}
     {#if $$slots.text}
       <slot name="text" />

src/routes/docs/components/rating.md

@@ -39,13 +39,14 @@ The default rating icon is a star. Set the total and rating props. The `id` prop
 
 <Rating id="example-1" total={5} size={50} rating={1.4} />
 <Rating id="example-1b" total={5} size={50} rating={4.66} />
+<Rating id="example-1b" iconFillColor='#008800' iconStrokeColor='#008800' total={5} size={50} rating={4.66} />
 ```
 
 ## Stars
 
 You can use the Star component with the `id` and `fillPercent` props.
 
-```svelte example
+```svelte example class="flex"
 <script>
   import { Star } from 'flowbite-svelte';
 </script>
@@ -75,6 +76,9 @@ If you also want to show a text near the stars you can use the `text` slot to ad
 <Rating id="example-3" total={5} rating={3.4}>
   <p slot="text" class="ms-2 text-sm font-medium text-gray-500 dark:text-gray-400">3.4 out of 5</p>
 </Rating>
+<Rating id="example-3" total={5} rating={2.8} iconFillColor='#008800' iconStrokeColor='#008800'>
+  <p slot="text" class="ms-2 text-sm font-medium text-gray-500 dark:text-gray-400">2.8 out of 5</p>
+</Rating>
 ```
 
 ## Rating count
@@ -105,6 +109,7 @@ The default icon size is `24`. Import your icon and set it in a icon props.
 
 <Rating total={5} rating={3.3} id="example-5" icon={Heart} />
 <Rating total={10} rating={7.6} id="example-5b" icon={Heart} />
+<Rating total={10} rating={7.6} id="example-5b" icon={Heart} iconFillColor='#3752d6' iconStrokeColor='#3752d6'/>
 ```
 
 ```svelte example
@@ -114,6 +119,7 @@ The default icon size is `24`. Import your icon and set it in a icon props.
 
 <Rating total={5} rating={4.7} id="example-5c" icon={Thumbup} />
 <Rating total={10} rating={8.2} id="example-5d" icon={Thumbup} />
+<Rating total={10} rating={8.2} id="example-5d" icon={Thumbup} iconFillColor='#ff3f00' iconStrokeColor='#ff3f00'/>
 ```
 
 ## AdvancedRating component