🔨 Use proper icon slots for button components

Author: devmount

frontend/src/views/DashboardView/index.vue

@@ -98,7 +98,9 @@ export default {
       </li>
     </ul>
     <template #cta>
-      <primary-button class="dismiss" size="small" @click="dismiss">{{ t('label.dismiss') }}</primary-button>
+      <primary-button class="dismiss" size="small" @click="dismiss">
+        {{ t('label.dismiss') }}
+      </primary-button>
     </template>
   </notice-bar>
 

frontend/src/views/SettingsView/components/AccountSettings.vue

@@ -5,7 +5,7 @@ import { useI18n } from 'vue-i18n';
 import { storeToRefs } from 'pinia';
 import { callKey } from '@/keys';
 import { DangerButton, PrimaryButton, TextInput } from '@thunderbirdops/services-ui';
-import { IconCopy, IconArrowRight } from '@tabler/icons-vue';
+import { PhCopy, PhArrowRight } from '@phosphor-icons/vue';
 import { createUserStore } from '@/stores/user-store';
 import { useSettingsStore } from '@/stores/settings-store';
 import { BlobResponse, BooleanResponse } from '@/models';
@@ -112,7 +112,7 @@ const actuallyDownloadData = async () => {
         @click="copyLink"
         :tooltip="copyLinkTooltip"
       >
-        <icon-copy id="copy-booking-page-url-button" :aria-label="t('label.copy')" size="18" />
+        <ph-copy id="copy-booking-page-url-button" :aria-label="t('label.copy')" size="18" />
       </primary-button>
     </div>
   </div>
@@ -123,10 +123,10 @@ const actuallyDownloadData = async () => {
       variant="outline"
       @click="router.push({ name: 'availability' })"
     >
-      <span>
-        {{ t('label.bookingPageSettings') }}
-        <icon-arrow-right size="18" />
-      </span>
+      {{ t('label.bookingPageSettings') }}
+      <template #iconRight>
+        <ph-arrow-right />
+      </template>
     </primary-button>
   </div>
 
@@ -264,4 +264,4 @@ h2 {
     }
   }
 }
-</style>
+</style>

frontend/src/views/admin/InviteCodePanelView.vue

@@ -280,7 +280,9 @@ onMounted(async () => {
               @click="generateInvites"
               :title="t('label.generate')"
             >
-              <icon-send/>
+              <template #iconLeft>
+                <icon-send/>
+              </template>
               {{ t('label.generate') }}
             </primary-button>
           </div>

frontend/src/views/admin/SubscriberPanelView.vue

@@ -317,7 +317,9 @@ onMounted(async () => {
               />
             </label>
             <primary-button class="btn-send" :disabled="loading" @click="sendInvite" :title="t('label.send')">
-              <icon-send/>
+              <template #iconLeft>
+                <icon-send/>
+              </template>
               {{ t('label.send') }}
             </primary-button>
           </div>

frontend/src/views/admin/WaitingListPanelView.vue

@@ -290,7 +290,9 @@ onMounted(async () => {
             @click="sendInvites"
             :title="t('label.send')"
           >
-            <icon-send />
+            <template #iconLeft>
+              <icon-send />
+            </template>
             {{ t('label.send') }}
           </primary-button>
         </div>