🖼️ ui: use array notation for icons

ui/src/components/AdminButton.vue

@@ -3,7 +3,7 @@
 
   <BulmaButton
     v-bind="$attrs"
-    :icon="'fa-solid fa-toggle-' + (store.is_admin ? 'on' : 'off')"
+    :icon="['fas', store.is_admin ? 'fa-toggle-on' : 'fa-toggle-off']"
     :busy="is_busy"
     text="Admin"
     @click.left="on_click"

ui/src/components/LoginModal.vue

@@ -33,13 +33,13 @@
         <BulmaButton
           class="is-success"
           @click.left="submit"
-          icon="fa-solid fa-unlock"
+:icon="['fas', 'fa-unlock']"
           text="Login"
         />
         <BulmaButton
           class="is-danger"
           @click.left="cancel"
-          icon="fa-solid fa-circle-xmark"
+:icon="['fas', 'fa-circle-xmark']"
           text="Abbrechen"
         />
       </footer>

ui/src/components/TouchButton.vue

@@ -2,10 +2,7 @@
   <span>Eingabemodus:&nbsp;</span>
   <BulmaButton
     v-bind="$attrs"
-    :icon="
-      'fa-solid fa-' +
-      (store.is_touch_device ? 'hand-pointer' : 'arrow-pointer')
-    "
+    :icon="['fas', store.is_touch_device ? 'hand-pointer' : 'arrow-pointer']"
     :text="store.is_touch_device ? 'Touch' : 'Desktop'"
     @click.left="store.toggle_touch_device"
   />

ui/src/components/admin/CalendarAssistant.vue

@@ -35,7 +35,7 @@
             v-for="(data, day) in day_data"
             :key="`btn-${day}`"
             :class="'tag is-' + (data.part === '' ? 'warning' : 'info')"
-            icon="fa-solid fa-door-open"
+            :icon="['fas', 'fa-door-open']"
             :text="day.toString()"
             @click.left="door_click(Number(day))"
           />

ui/src/components/admin/DoorMapEditor.vue

@@ -5,7 +5,7 @@
         :disabled="current_step === 0"
         class="level-item is-link"
         @click="current_step--"
-        icon="fa-solid fa-backward"
+:icon="['fas', 'fa-backward']"
       />
 
       <BulmaBreadcrumbs
@@ -18,7 +18,7 @@
         :disabled="current_step === 2"
         class="level-item is-link"
         @click="current_step++"
-        icon="fa-solid fa-forward"
+:icon="['fas', 'fa-forward']"
       />
     </nav>
 
@@ -47,20 +47,20 @@
       <BulmaButton
         class="card-footer-item is-danger"
         @click="on_download"
-        icon="fa-solid fa-cloud-arrow-down"
+:icon="['fas', 'fa-cloud-arrow-down']"
         :busy="loading_doors"
         text="Laden"
       />
       <BulmaButton
         class="card-footer-item is-warning"
         @click="on_discard"
-        icon="fa-solid fa-trash"
+:icon="['fas', 'fa-trash']"
         text="Löschen"
       />
       <BulmaButton
         class="card-footer-item is-success"
         @click="on_upload"
-        icon="fa-solid fa-cloud-arrow-up"
+:icon="['fas', 'fa-cloud-arrow-up']"
         :busy="saving_doors"
         text="Speichern"
       />
@@ -85,9 +85,9 @@ import DoorChooser from "../editor/DoorChooser.vue";
 import DoorPlacer from "../editor/DoorPlacer.vue";
 
 const steps: BCStep[] = [
-  { label: "Platzieren", icon: "fa-solid fa-crosshairs" },
-  { label: "Ordnen", icon: "fa-solid fa-list-ol" },
-  { label: "Vorschau", icon: "fa-solid fa-magnifying-glass" },
+  { label: "Platzieren", icon: ["fas", "fa-crosshairs"] },
+  { label: "Ordnen", icon: ["fas", "fa-list-ol"] },
+  { label: "Vorschau", icon: ["fas", "fa-magnifying-glass"] },
 ];
 
 const doors = ref<Door[]>([]);