Create rating Componnat

 myRating.html

<template>

    <h1>Review & Ratings</h1>

    <lightning-card title="Rate Customer">

        <div class="slds-m-around_medium">

            <template for:each={starItems} for:item="item">

                <lightning-button-icon

                    key={item.star}

                    icon-name="utility:favorite"

                    alternative-text="Rate"

                    data-id={item.star}

                    onclick={handleRating}

                    onmouseover={handleMouseOver}

                    onmouseout={handleMouseOut}

                    class={item.className}

                    variant="bare">

                </lightning-button-icon>

            </template>

        </div>

    </lightning-card>

</template>

===========================================================================

myRating.js

==========================================================================

import { LightningElement } from 'lwc';

export default class MyRating extends LightningElement {

    value = 0;

    hoverValue = 0;

    get starItems() {

        const compareValue = this.hoverValue || this.value;

        return [1, 2, 3, 4, 5].map(star => ({

            star,

            className: star <= compareValue ? 'star yellow' : 'star gray'

        }));

    }

    handleRating(event) {

        this.value = parseInt(event.currentTarget.dataset.id, 10);

    }

    handleMouseOver(event) {

        this.hoverValue = parseInt(event.currentTarget.dataset.id, 10);

    }

    handleMouseOut() {

        this.hoverValue = 0;

    }

}

=============================================================

myRating.css

=========================================================

.star {

    --slds-c-icon-color-foreground: gray;

    --slds-c-icon-color-background: transparent;

    transition: transform 0.2s ease;

    cursor: pointer;

}

.star.yellow {

    --slds-c-icon-color-foreground: gold;

}

.star.gray {

    --slds-c-icon-color-foreground: gray;

}

.star:hover {

    transform: scale(1.2);

}