[5637] Upgrade hericons to v 2.1.5

frontend/src/components/Accordion.vue

@@ -16,7 +16,7 @@
 </template>
 
 <script>
-import { ChevronLeftIcon } from '@heroicons/vue/solid'
+import { ChevronLeftIcon } from '@heroicons/vue/20/solid'
 
 export default {
     name: 'ff-accordion',

frontend/src/components/CopySnippet.vue

@@ -1,20 +1,20 @@
 <template>
     <div class="flex flex-row justify-end space-x-2 mt-1">
         <ff-button kind="tertiary" size="small" @click="copy(snippet)">
-            <template #icon-right><ClipboardCopyIcon /></template>
+            <template #icon-right><ClipboardDocumentIcon /></template>
             <span class="">Copy</span>
         </ff-button>
     </div>
 </template>
 <script>
-import { ClipboardCopyIcon } from '@heroicons/vue/outline'
+import { ClipboardDocumentIcon } from '@heroicons/vue/24/outline'
 
 import clipboardMixin from '../mixins/Clipboard.js'
 import Alerts from '../services/alerts.js'
 export default {
     name: 'CopySnippet',
     components: {
-        ClipboardCopyIcon
+        ClipboardDocumentIcon
     },
     mixins: [clipboardMixin],
     props: {

frontend/src/components/DevicesBrowser.vue

@@ -58,7 +58,7 @@
                         </template>
                     </ff-popover>
                     <DropdownMenu v-if="hasPermission('team:device:bulk-delete', applicationContext) || hasPermission('team:device:bulk-edit', applicationContext)" :disabled="!checkedDevices?.length" data-el="bulk-actions-dropdown" buttonClass="ff-btn ff-btn--secondary ff-btn-icon" :options="bulkActionsDropdownOptions">
-                        <CogIcon class="ff-btn--icon ff-btn--icon-left" />
+                        <Cog8ToothIcon class="ff-btn--icon ff-btn--icon-left" />
                         <span class="hidden sm:inline bulk-actions-text">Actions</span>
                     </DropdownMenu>
                     <ff-button
@@ -84,7 +84,7 @@
                         @click="showCreateDeviceDialog"
                     >
                         <template #icon-left>
-                            <PlusSmIcon />
+                            <PlusSmallIcon />
                         </template>
                         <span class="hidden sm:inline add-remote-instance-text">Add Remote Instance</span>
                     </ff-button>
@@ -161,7 +161,7 @@
                                 @click="showCreateDeviceDialog"
                             >
                                 <template #icon-left>
-                                    <PlusSmIcon />
+                                    <PlusSmallIcon />
                                 </template>
                                 <span class="hidden sm:inline add-remote-instance-text">Add Remote Instance</span>
                             </ff-button>
@@ -200,7 +200,7 @@
                                 @click="showCreateDeviceDialog"
                             >
                                 <template #icon-left>
-                                    <PlusSmIcon />
+                                    <PlusSmallIcon />
                                 </template>
                                 <span class="hidden sm:inline add-remote-instance-text">Add Remote Instance</span>
                             </ff-button>
@@ -239,7 +239,7 @@
                                 @click="showCreateDeviceDialog"
                             >
                                 <template #icon-left>
-                                    <PlusSmIcon />
+                                    <PlusSmallIcon />
                                 </template>
                                 <span class="hidden sm:inline add-remote-instance-text">Add Remote Instance</span>
                             </ff-button>
@@ -343,8 +343,8 @@
 </template>
 
 <script>
-import { ClockIcon } from '@heroicons/vue/outline'
-import { CogIcon, PlusSmIcon } from '@heroicons/vue/solid'
+import { Cog8ToothIcon, PlusSmallIcon } from '@heroicons/vue/20/solid'
+import { ClockIcon } from '@heroicons/vue/24/outline'
 
 import { mapActions, mapState } from 'pinia'
 import { markRaw } from 'vue'
@@ -399,13 +399,13 @@ export default {
         PopoverItem,
         FfPopover,
         ClockIcon,
-        CogIcon,
+        Cog8ToothIcon,
         DeviceAssignApplicationDialog,
         DeviceAssignInstanceDialog,
         DeviceCredentialsDialog,
         DropdownMenu,
         FeatureUnavailableToTeam,
-        PlusSmIcon,
+        PlusSmallIcon,
         SnapshotAssignDialog,
         TeamDeviceCreateDialog,
         EmptyState,

frontend/src/components/DropdownMenu.vue

@@ -52,7 +52,7 @@
 
 <script>
 import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue'
-import { ChevronDownIcon } from '@heroicons/vue/solid'
+import { ChevronDownIcon } from '@heroicons/vue/20/solid'
 import { ref } from 'vue'
 
 import TeleportedMenuMixin from '../mixins/TeleportedMenuMixin.js'

frontend/src/components/FileUpload.vue

@@ -18,7 +18,7 @@
                     <PaperClipIcon class="ff-icon ff-icon-sm" />
                     <span>{{ file.name }} (<FileSize :size="file.size" />)</span>
                     <span class="ff-file-upload--clear ff-clickable" data-action="clear-file" @click="file=null">
-                        <XIcon class="ff-btn--icon" />
+                        <XMarkIcon class="ff-btn--icon" />
                     </span>
                 </div>
                 <ff-button
@@ -27,7 +27,7 @@
                     @click="$refs.fileUpload.click()"
                 >
                     <template #icon-left>
-                        <DocumentAddIcon />
+                        <DocumentPlusIcon />
                     </template>
                     <template #default>
                         Select File
@@ -39,7 +39,7 @@
 </template>
 
 <script>
-import { DocumentAddIcon, PaperClipIcon, XIcon } from '@heroicons/vue/outline'
+import { DocumentPlusIcon, PaperClipIcon, XMarkIcon } from '@heroicons/vue/24/outline'
 
 import FileSize from './FileSize.vue'
 import FormRow from './FormRow.vue'
@@ -49,9 +49,9 @@ export default {
     components: {
         FileSize,
         PaperClipIcon,
-        DocumentAddIcon,
+        DocumentPlusIcon,
         FormRow,
-        XIcon
+        XMarkIcon
     },
     props: {
         modelValue: {

frontend/src/components/FinishSetup.vue

@@ -1,20 +1,20 @@
 <template>
     <ff-button :kind="kind" data-action="finish-setup" @click="finishSetup">
-        <template #icon-left><ExclamationIcon class="ff-icon" /></template>
+        <template #icon-left><ExclamationTriangleIcon class="ff-icon" /></template>
         Finish Setup
     </ff-button>
     <DeviceCredentialsDialog ref="deviceCredentialsDialog" />
 </template>
 
 <script>
-import { ExclamationIcon } from '@heroicons/vue/outline'
+import { ExclamationTriangleIcon } from '@heroicons/vue/24/outline'
 
 import DeviceActions from '../mixins/DeviceActions.js'
 import DeviceCredentialsDialog from '../pages/team/Devices/dialogs/DeviceCredentialsDialog.vue'
 
 export default {
     name: 'FinishSetupButton',
-    components: { ExclamationIcon, DeviceCredentialsDialog },
+    components: { ExclamationTriangleIcon, DeviceCredentialsDialog },
     mixins: [DeviceActions],
     props: {
         device: {

frontend/src/components/NavItem.vue

@@ -17,7 +17,7 @@
 
 <script>
 
-import { ExclamationCircleIcon, SparklesIcon } from '@heroicons/vue/outline'
+import { ExclamationCircleIcon, SparklesIcon } from '@heroicons/vue/24/outline'
 
 import { useNavigationHelper } from '../composables/NavigationHelper.js'
 

frontend/src/components/NotificationsButton.vue

@@ -1,14 +1,14 @@
 <template>
     <div class="notifications-button-wrapper">
         <button class="notifications-button" data-el="notifications-button" data-click-exclude="right-drawer" @click="onClick">
-            <MailIcon />
+            <EnvelopeIcon />
             <ff-notification-pill v-if="hasNotifications" data-el="notification-pill" class="ml-3" :count="notificationsCount" />
         </button>
     </div>
 </template>
 
 <script>
-import { MailIcon } from '@heroicons/vue/outline'
+import { EnvelopeIcon } from '@heroicons/vue/24/outline'
 import { mapActions, mapState } from 'pinia'
 import { markRaw } from 'vue'
 
@@ -19,7 +19,7 @@ import { useUxDrawersStore } from '@/stores/ux-drawers.js'
 
 export default {
     name: 'NotificationsButton',
-    components: { MailIcon },
+    components: { EnvelopeIcon },
     computed: {
         ...mapState(useUxDrawersStore, ['rightDrawer']),
         ...mapState(useAccountStore, ['hasNotifications', 'unreadNotificationsCount']),

frontend/src/components/PageHeader.vue

@@ -3,8 +3,8 @@
         <!-- Mobile: Toggle(Team & Team Admin Options) -->
         <i v-if="!hiddenLeftDrawer && !editorImmersiveDrawer.active" class="ff-header--mobile-toggle">
             <transition name="mobile-menu-fade" mode="out-in">
-                <MenuIcon v-if="!leftDrawer.state" class="ff-avatar cursor-pointer" @click="toggleLeftDrawer" />
-                <XIcon v-else class="ff-avatar cursor-pointer" @click="toggleLeftDrawer" />
+                <Bars3Icon v-if="!leftDrawer.state" class="ff-avatar cursor-pointer" @click="toggleLeftDrawer" />
+                <XMarkIcon v-else class="ff-avatar cursor-pointer" @click="toggleLeftDrawer" />
             </transition>
         </i>
         <!-- FlowFuse Logo -->
@@ -101,7 +101,7 @@
     </div>
 </template>
 <script>
-import { AcademicCapIcon, AdjustmentsIcon, CogIcon, CursorClickIcon, LogoutIcon, MenuIcon, PlusIcon, QuestionMarkCircleIcon, XIcon } from '@heroicons/vue/solid'
+import { AcademicCapIcon, AdjustmentsVerticalIcon, ArrowLeftOnRectangleIcon, Bars3Icon, Cog8ToothIcon, CursorArrowRaysIcon, PlusIcon, QuestionMarkCircleIcon, XMarkIcon } from '@heroicons/vue/20/solid'
 import { mapActions, mapState } from 'pinia'
 import { ref } from 'vue'
 
@@ -141,15 +141,15 @@ export default {
             return [
                 {
                     label: 'User Settings',
-                    icon: CogIcon,
+                    icon: Cog8ToothIcon,
                     tag: 'user-settings',
                     onclick: this.$router.push,
                     onclickparams: { name: 'User Settings' },
                     hidden: false
                 },
                 {
                     label: 'Admin Settings',
-                    icon: AdjustmentsIcon,
+                    icon: AdjustmentsVerticalIcon,
                     tag: 'admin-settings',
                     onclick: this.$router.push,
                     onclickparams: { name: 'Admin Settings' },
@@ -170,13 +170,13 @@ export default {
                 },
                 {
                     label: 'Welcome Tour',
-                    icon: CursorClickIcon,
+                    icon: CursorArrowRaysIcon,
                     tag: 'welcome-tour',
                     onclick: this.startWelcomeTour
                 },
                 {
                     label: 'Sign Out',
-                    icon: LogoutIcon,
+                    icon: ArrowLeftOnRectangleIcon,
                     tag: 'sign-out',
                     onclick: this.signOut,
                     class: 'danger'
@@ -196,8 +196,8 @@ export default {
         GlobalSearch,
         NavItem,
         'ff-team-selection': TeamSelection,
-        MenuIcon,
-        XIcon,
+        Bars3Icon,
+        XMarkIcon,
         NotificationsButton,
         ExpertButton
     },

frontend/src/components/SectionNavigationHeader.vue

@@ -41,7 +41,7 @@
 </template>
 <script>
 
-import { InformationCircleIcon } from '@heroicons/vue/outline'
+import { InformationCircleIcon } from '@heroicons/vue/24/outline'
 import { ref } from 'vue'
 
 export default {

frontend/src/components/SectionTopMenu.vue

@@ -39,7 +39,7 @@
     </ff-dialog>
 </template>
 <script>
-import { InformationCircleIcon } from '@heroicons/vue/outline'
+import { InformationCircleIcon } from '@heroicons/vue/24/outline'
 import { ref } from 'vue'
 
 export default {

frontend/src/components/StatusBadge.vue

@@ -1,5 +1,5 @@
 <template>
-    <div v-if="!status && text === null" class="forge-badge"><RefreshIcon class="w-4 h-4 animate-spin" /></div>
+    <div v-if="!status && text === null" class="forge-badge"><ArrowPathIcon class="w-4 h-4 animate-spin" /></div>
     <div
         v-else
         class="forge-badge"
@@ -10,7 +10,7 @@
         <slot name="icon">
             <AnimIconStarting v-if="status === null" class="w-4 h-4" />
             <ExclamationCircleIcon v-if="status === 'error' || status === 'crashed'" class="w-4 h-4" />
-            <ExclamationIcon v-if="status === 'suspended' || status === 'stopped' || status === 'warning'" class="w-4 h-4" />
+            <ExclamationTriangleIcon v-if="status === 'suspended' || status === 'stopped' || status === 'warning'" class="w-4 h-4" />
             <PlayIcon v-if="['running', 'connected'].includes(status)" class="w-4 h-4" />
             <InformationCircleIcon v-if="status === 'info'" class="w-4 h-4" />
             <CheckCircleIcon v-if="status === 'success'" class="w-4 h-4" />
@@ -20,9 +20,9 @@
             <AnimIconPushing v-if="status === 'pushing'" class="w-4 h-4" />
             <AnimIconPulling v-if="status === 'pulling'" class="w-4 h-4" />
             <AnimIconStarting v-if="status === 'starting'" class="w-4 h-4" />
-            <CloudUploadIcon v-if="status === 'loading'" class="w-4 h-4" />
+            <CloudArrowUpIcon v-if="status === 'loading'" class="w-4 h-4" />
             <AnimIconInstalling v-if="status === 'installing' || status === 'updating'" class="w-3 h-3" />
-            <SupportIcon v-if="status === 'safe'" class="w-4 h-4" />
+            <LifebuoyIcon v-if="status === 'safe'" class="w-4 h-4" />
             <LockClosedIcon v-if="status === 'protected'" class="w-4 h-4" />
         </slot>
         <span v-if="text !== ''" class="ml-1">{{ text === null ? status : text }}</span>
@@ -31,17 +31,17 @@
 
 <script>
 import {
+    ArrowPathIcon,
     CheckCircleIcon,
-    CloudUploadIcon,
+    CloudArrowUpIcon,
     ExclamationCircleIcon,
-    ExclamationIcon,
+    ExclamationTriangleIcon,
     InformationCircleIcon,
+    LifebuoyIcon,
     LockClosedIcon,
     PlayIcon,
-    RefreshIcon,
-    StopIcon,
-    SupportIcon
-} from '@heroicons/vue/outline'
+    StopIcon
+} from '@heroicons/vue/24/outline'
 
 import {
     AnimIconInstalling,
@@ -55,15 +55,15 @@ export default {
     name: 'StatusBadge',
     components: {
         CheckCircleIcon,
-        CloudUploadIcon,
+        CloudArrowUpIcon,
         ExclamationCircleIcon,
-        ExclamationIcon,
+        ExclamationTriangleIcon,
         InformationCircleIcon,
         LockClosedIcon,
         PlayIcon,
         StopIcon,
-        SupportIcon,
-        RefreshIcon,
+        LifebuoyIcon,
+        ArrowPathIcon,
         AnimIconInstalling,
         AnimIconPushing,
         AnimIconPulling,

frontend/src/components/TeamSelection.vue

@@ -41,7 +41,7 @@ import {
     ListboxButton,
     ListboxOption
 } from '@headlessui/vue'
-import { PlusIcon, UserAddIcon } from '@heroicons/vue/solid'
+import { PlusIcon, UserPlusIcon } from '@heroicons/vue/20/solid'
 import { mapState } from 'pinia'
 
 import usePermissions from '../composables/Permissions.js'
@@ -62,7 +62,7 @@ export default {
     },
     setup () {
         const { hasPermission } = usePermissions()
-        return { PlusIcon, UserAddIcon, hasPermission }
+        return { PlusIcon, UserPlusIcon, hasPermission }
     },
     computed: {
         ...mapState(useContextStore, ['team']),
@@ -75,7 +75,7 @@ export default {
                 }),
                 (
                     this.team && this.hasPermission('team:user:invite')
-                        ? { label: 'Invite Members', value: 'invite-members', icon: UserAddIcon }
+                        ? { label: 'Invite Members', value: 'invite-members', icon: UserPlusIcon }
                         : undefined
                 ),
                 (