Fix icon display issues in the Star Ratings component (#2007)

* fix #1998: star rating fix

* Create gentle-dingos-joke.md

* Fix typo in changeset description

.changeset/gentle-dingos-joke.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Fix icon display issues in the Star Ratings component

src/pages/_includes/ui/icon.html

@@ -13,10 +13,6 @@
 {% assign replace-to = replace-to | append: ' text-' | append: include.color %}
 {% endif %}
 
-{% if include.filled %}
-{% assign replace-to = replace-to | append: ' icon-filled' %}
-{% endif %}
-
 {% if include.inline %}
 {% assign replace-to = replace-to | append: ' icon-inline' %}
 {% endif %}
@@ -28,7 +24,7 @@
 {% assign replace-to = 'class="' | append: replace-to | append: '"' %}
 
 {% if site.use-iconfont %}
-	<i class="icon ti ti-{{ icon-name }}{% if include.color %} {{ include.color }}{% endif %}{% if include.filled %} icon-filled{% endif %}{% if include.class %} {{ include.class }}{% endif %}"></i>
+	<i class="icon ti ti-{{ icon-name }}{% if include.color %} {{ include.color }}{% endif %}{% if include.class %} {{ include.class }}{% endif %}"></i>
 {% else %}
 	<!-- Download SVG icon from http://tabler-icons.io/i/{{ icon-name }} -->
 	{% assign svg-icon = site.data.icons[icon-name].svg[type] | default: '' %}

src/pages/_includes/ui/rating.html

@@ -1,5 +1,5 @@
 {% assign id = include.id | default: include.icon | default: 'default' %}
-{% assign icon = include.icon | default: 'star-filled' %}
+{% assign icon = include.icon | default: 'star' %}
 {% assign color = include.color %}
 {% assign size = include.size | default: false %}
 {% assign value = include.value %}
@@ -14,7 +14,7 @@
 </select>
 
 {% capture star %}
-{% include ui/icon.html class="gl-star-full" icon=icon color=color size=size %}
+{% include ui/icon.html class="gl-star-full" icon=icon color=color type="filled" size=size %}
 {% endcapture %}
 {% assign star = star | strip | replace_regex: "\n\s+", "" %}
 
@@ -30,6 +30,8 @@
 		stars: function (el, item, index) {
 			 el.innerHTML = `{{ star }}`; 
 		},
+		classNames: {
+		}
 	 })		
     {% if jekyll.environment == 'development' %}window.tabler_rating["rating-{{ id }}"] = rating;{% endif %}
   })

src/pages/stars-rating.html

@@ -27,9 +27,9 @@ menu: base.stars-rating
 						<div class="h3 card-title">Different icon</div>
 						<div class="space-y">
 							{% include ui/rating.html value=4 %}
-							{% include ui/rating.html icon="heart-filled" value=4 color="red" %}
-							{% include ui/rating.html icon="ghost-filled" value=4 color="azure" %}
-							{% include ui/rating.html icon="circle-filled" value=4 color="green" %}
+							{% include ui/rating.html icon="heart" value=4 color="red" %}
+							{% include ui/rating.html icon="ghost" value=4 color="azure" %}
+							{% include ui/rating.html icon="circle" value=4 color="green" %}
 						</div>
 					</div>
 				</div>

src/scss/vendor/_stars-rating.scss

@@ -16,5 +16,7 @@
 
   .gl-active > .gl-star-full {
     color: var(--gl-star-color);
+    fill: currentColor;
+    stroke: currentColor;
   }
 }