Etoiles plus jolies

assets/vue/controllers/StarRating.vue

@@ -8,9 +8,9 @@
         @mouseleave="hovered = 0"
     >
         <span v-for="i in max" :key="i" class="star">
-            <svg v-if="isFull(i)" class="fill" viewBox="0 0 576 512" aria-hidden="true"><path :d="starPath" /></svg>
-            <svg v-else-if="isHalf(i)" class="fill half" viewBox="0 0 576 512" aria-hidden="true"><path :d="starPath" /></svg>
-            <svg class="base" viewBox="0 0 576 512" aria-hidden="true"><path :d="starPath" /></svg>
+            <svg v-if="isFull(i)" class="fill" viewBox="14 -32 549 526" aria-hidden="true"><path :d="starPath" /></svg>
+            <svg v-else-if="isHalf(i)" class="fill half" viewBox="14 -32 549 526" aria-hidden="true"><path :d="starPath" /></svg>
+            <svg class="base" viewBox="14 -32 549 526" aria-hidden="true"><path :d="starPath" /></svg>
         </span>
         <i
             v-if="!disabled && value > 0"
@@ -24,6 +24,8 @@
 
 <script setup>
 import { ref, watch, computed, onMounted } from 'vue';
+// Chemin de l'étoile Font Awesome, importé du paquet (@fortawesome/fontawesome-free 7.3.1)
+import starSvg from '@fortawesome/fontawesome-free/svgs/solid/star.svg?raw';
 
 const props = defineProps({
     value: { type: Number, default: 0 },
@@ -37,8 +39,8 @@ const props = defineProps({
 
 const emit = defineEmits(['change']);
 
-// Chemin de l'étoile Font Awesome (icône "star", viewBox 0 0 576 512)
-const starPath = 'M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-21.9 10.5-25.7 22.2s-2 24.5 6.9 33.3l104.8 104.5-24.8 145.5c-2 12 3 24.2 12.9 31.6s23 8 33.9 2.3l128.6-68.5 128.6 68.5c10.8 5.7 23.9 4.9 33.9-2.3s14.9-19.3 12.9-31.6L438.5 381.7 543.3 277.2c8.9-8.9 10.7-22.1 6.9-33.3s-13.7-20.4-25.7-22.2L380.9 150.3 316.9 18z';
+// Extraction du "d" depuis le SVG officiel (plus de risque de dérive avec la police)
+const starPath = starSvg.match(/ d="([^"]+)"/)[1];
 
 const value = ref(props.value);
 watch(() => props.value, (newValue) => { value.value = newValue; });
@@ -143,10 +145,16 @@ function handleClick(event) {
     vertical-align: -0.125em;
 }
 
+/* Petit espacement entre les étoiles */
+.star + .star {
+    margin-left: 0.125em;
+}
+
 .star svg {
     display: block;
     height: 1em;
-    width: 1.125em; /* ratio du viewBox 576/512, comme la glyphe FA */
+    /* ratio du viewBox 549/526 (boîte réelle de l'étoile FA 7) */
+    width: calc(1em * 549 / 526);
 }
 
 /* Remplissage jaune, superposé sous le contour */