Star rating component

liquidhtmlsvgcss

A neat way to show a 1–5 star rating element is a <p class="star-rating"> that loops five times, reuses one SVG symbol, and lets CSS handle filled vs. empty stars.

{%- comment -%}
SVG Symbols and Definitions Include, this allows for using symbols like so:

<svg>
    <use href="#id"></use>
</svg>
{%- endcomment -%}
<svg height="0" width="0" style="position: absolute;" xmlns="http://www.w3.org/2000/svg">
  <symbol id="svg_rating_star" viewBox="0 0 20 19">
    <path
        d="m9.07088.612343c.34374-.816458 1.51452-.816457 1.85822.000003l2.0288 4.818884c.145.3442.4727.57938.8488.60917l5.266.41708c.8922.07066 1.254 1.17065.5742 1.74592l-4.0121 3.3953c-.2866.2425-.4118.6231-.3242.9856l1.2257 5.0767c.2077.8601-.7394 1.54-1.5033 1.0791l-4.5085-2.7205c-.322-.1944-.727-.1944-1.04902 0l-4.50849 2.7205c-.76388.4609-1.71103-.219-1.50336-1.0791l1.22579-5.0767c.08756-.3625-.0376-.7431-.32416-.9856l-4.012198-3.3953c-.67978-.57527-.3179941-1.67526.574229-1.74592l5.266069-.41708c.37614-.02979.7038-.26497.84871-.60917z" />
  </symbol>
</svg>

For a rating of 3, stars 1–3 get filled; 4–5 get empty. One loop covers every value — no need to duplicate five blocks.

Each <svg> references a shared symbol via <use href="#svg_rating_star">. The shape is defined once in an SVG sprite:

<p class="star-rating">
  {% for i in (1..5) %}
  <svg width="22" height="22" class="{% if i <= review_item.rating %}filled{% else %}empty{% endif %}">
    <use href="#svg_rating_star"></use>
  </svg>
  {% endfor %}
</p>
<svg height="0" width="0" style="position: absolute;" xmlns="http://www.w3.org/2000/svg">
  <symbol id="svg_rating_star" viewBox="0 0 20.19 19.22">...</symbol>
</svg>

Color and size stay in CSS; the template only outputs structure and the filled / empty class.

.star-rating {
  display: flex;
  align-items: center;
  gap: 0.4rem;

  svg {
    width: 2rem;
    height: 2rem;
    fill: black;
    &.filled {
      fill: var(--color-1, gold)
    }
  }
}

CodePen example

Drag the slider to change the rating inside the CodePen below:

See the Pen Star Rating - Demo 1 - Outline by Wonky (@Wonky) on CodePen.