feat: add optional icons before group name

Author: antond15

config.lua

@@ -54,6 +54,7 @@ return {
             label = 'Police',
             groups = {'police', 'sheriff'},
             includeOffDuty = false,
+            icon = 'ic:round-local-police',
         },
         {
             label = 'EMS',
@@ -64,6 +65,7 @@ return {
             label = 'Mechanics',
             groups = {'lsc', 'bennys', 'hayes'},
             includeOffDuty = true,
+            icon = 'mdi:wrench',
         },
         {
             label = 'Taxi',

fxmanifest.lua

@@ -5,7 +5,7 @@ use_experimental_fxv2_oal 'yes'
 
 name 'ac_scoreboard'
 author 'AC Scripts'
-version '2.1.0'
+version '2.2.0'
 description 'A framework-standalone scoreboard UI for FiveM.'
 repository 'https://github.com/acscripts/ac_scoreboard'
 

modules/client/main.lua

@@ -22,6 +22,7 @@ local function openScoreboard()
             groups[index] = {
                 label = group.label,
                 count = data.groups[index],
+                icon = group.icon,
             }
         end
 

web/src/components/groups.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import Icon from '@iconify/svelte';
   import data from '$store/data';
   import config from '$store/config';
   import locales from '$store/locales';
@@ -17,7 +18,12 @@
             $config.compactGroups ? 'py-1' : 'py-2'
           )}
         >
-          <span class="truncate">{group.label}</span>
+          <div class="flex items-center gap-2 truncate">
+            {#if group.icon}
+              <Icon icon={group.icon} class="h-4 min-w-4" />
+            {/if}
+            <span class="truncate">{group.label}</span>
+          </div>
           <span
             class={cn(
               'min-w-9 flex-shrink-0 select-none rounded-md bg-slate-800 px-2 text-center',

web/src/store/data.ts

@@ -8,9 +8,9 @@ export default writable<SheetData>({
     maxPlayers: 100,
   },
   groups: [
-    { label: 'Police', count: 7 },
+    { label: 'Police', count: 7, icon: 'ic:round-local-police' },
     { label: 'EMS', count: 6 },
-    { label: 'Mechanics', count: 2 },
+    { label: 'Mechanics', count: 2, icon: 'mdi:wrench' },
     { label: 'Taxi', count: 0 },
     { label: 'Unemployed', count: 47 },
   ],

web/src/types/data.ts

@@ -7,6 +7,7 @@ type Footer = {
 type Group = {
   label: string;
   count: number;
+  icon?: string;
 };
 
 type Player = {