A simple blade component to display a rating between 0 and 5 with stars ⭐⭐⭐⭐⭐

stars_rating.blade.php

@for($i = 0 ; $i < 5 ; $i++)
    @if(floor($ratingAvg) > floatval($i) || (floor($ratingAvg) === floatval($i) && ($ratingAvg - floor($ratingAvg)) > 0.75))
        <svg fill="{{ $color ?? '#FFB100' }}" xmlns="http://www.w3.org/2000/svg" width="{{ $size ?? '24' }}" height="{{ $size ?? '24' }}" viewBox="0 0 24 24">
            <path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z"/>
        </svg>
    @elseif(floor($ratingAvg) === floatval($i) && ($ratingAvg - floor($ratingAvg)) > 0.25 && ($ratingAvg - floor($ratingAvg)) < 0.75)
        <svg fill="{{ $color ?? '#FFB100' }}" xmlns="http://www.w3.org/2000/svg" width="{{ $size ?? '24' }}" height="{{ $size ?? '24' }}" viewBox="0 0 24 24">
            <path d="M12 5.173l2.335 4.817 5.305.732-3.861 3.71.942 5.27-4.721-2.524v-12.005zm0-4.586l-3.668 7.568-8.332 1.151 6.064 5.828-1.48 8.279 7.416-3.967 7.416 3.966-1.48-8.279 6.064-5.827-8.332-1.15-3.668-7.569z"/>
        </svg>
    @else
        <svg fill="{{ $color ?? '#FFB100' }}" xmlns="http://www.w3.org/2000/svg" width="{{ $size ?? '24' }}" height="{{ $size ?? '24' }}" viewBox="0 0 24 24">
            <path d="M12 5.173l2.335 4.817 5.305.732-3.861 3.71.942 5.27-4.721-2.524-4.721 2.525.942-5.27-3.861-3.71 5.305-.733 2.335-4.817zm0-4.586l-3.668 7.568-8.332 1.151 6.064 5.828-1.48 8.279 7.416-3.967 7.416 3.966-1.48-8.279 6.064-5.827-8.332-1.15-3.668-7.569z"/>
        </svg>
    @endif
@endfor

Variables

• $ratingAvg
  Required
  Should be the rating between 0 and 5 (it will not cause any error if the value is outside, it's just... useless :D)
• $size
  Optional
  Should be the size of the stars (default is 24px)
• $color
  Optional
  Define the color of the stars (yellow by default)

Usage
Just put this file where you want, then include it
@include('components.stars_note', ['ratingAvg' => 3.7, 'color' => 'blue', 'size' => '18'])

Credits
These icons comes from https://iconmonstr.com/