Avoid adding icons to font awesome library

report-viewer/report-viewer/package.json

@@ -14,8 +14,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@fortawesome/free-brands-svg-icons": "^7.0.1",
-    "@fortawesome/free-solid-svg-icons": "^7.0.0",
+    "@fortawesome/free-brands-svg-icons": "^7.1.0",
+    "@fortawesome/free-solid-svg-icons": "^7.1.0",
     "@fortawesome/vue-fontawesome": "^3.1.1",
     "@jplag/model": "../model",
     "@jplag/parser": "../parser",

report-viewer/ui-components/base/SearchBarComponent.vue

@@ -4,7 +4,7 @@
 <template>
   <Interactable class="flex flex-row items-center space-x-2 px-2 py-2">
     <FontAwesomeIcon
-      :icon="['fas', 'magnifying-glass']"
+      :icon="faMagnifyingGlass"
       class="text-gray-500"
       @click="emit('searchClicked', value)"
     />
@@ -20,13 +20,10 @@
 
 <script setup lang="ts">
 import Interactable from './InteractableComponent.vue'
-import { library } from '@fortawesome/fontawesome-svg-core'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import { faMagnifyingGlass } from '@fortawesome/free-solid-svg-icons'
 import InfoIcon from './InfoIcon.vue'
 
-library.add(faMagnifyingGlass)
-
 defineProps({
   placeholder: {
     type: String,

report-viewer/ui-components/package.json

@@ -13,7 +13,7 @@
     "vue-virtual-scroller": "^2.0.0-beta.8"
   },
   "peerDependencies": {
-    "@fortawesome/free-solid-svg-icons": "^7.0.0",
+    "@fortawesome/free-solid-svg-icons": "^7.1.0",
     "@fortawesome/vue-fontawesome": "^3.1.1",
     "pinia": "^3.0.3",
     "tailwindcss": "^4.1.12",

report-viewer/ui-components/widget/NameElement.vue

@@ -7,22 +7,15 @@
       class="invisible absolute top-0 right-0 z-10 flex h-full cursor-pointer items-center p-2 delay-0 group-hover:visible group-hover:delay-100"
       @click="(e) => emit('changeAnonymous', e)"
     >
-      <FontAwesomeIcon
-        class="text-gray-500"
-        :icon="isAnonymous ? ['fas', 'eye'] : ['fas', 'eye-slash']"
-      />
+      <FontAwesomeIcon class="text-gray-500" :icon="isAnonymous ? faEye : faEyeSlash" />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-import { library } from '@fortawesome/fontawesome-svg-core'
 import { faEye, faEyeSlash } from '@fortawesome/free-solid-svg-icons'
 
-library.add(faEye)
-library.add(faEyeSlash)
-
 defineProps({
   displayedName: {
     type: String,

report-viewer/ui-components/widget/fileDisplaying/FilesContainer.vue

@@ -14,14 +14,14 @@
         >
       </div>
       <ButtonComponent v-if="allCollapsed" class="space-x-2 print:hidden" @click="expandAll()"
-        ><FontAwesomeIcon :icon="['fas', 'expand-alt']" />
+        ><FontAwesomeIcon :icon="faExpandAlt" />
         <p>Expand All</p></ButtonComponent
       >
       <ButtonComponent
         v-else
         class="w-full space-x-2 md:max-w-fit print:hidden"
         @click="collapseAll()"
-        ><FontAwesomeIcon :icon="['fas', 'compress-alt']" />
+        ><FontAwesomeIcon :icon="faCompressAlt" />
         <p>Collapse All</p></ButtonComponent
       >
     </div>
@@ -59,13 +59,9 @@ import { VueDraggableNext } from 'vue-draggable-next'
 import { computed, nextTick, ref, type PropType, type Ref } from 'vue'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import { faCompressAlt, faExpandAlt } from '@fortawesome/free-solid-svg-icons'
-import { library } from '@fortawesome/fontawesome-svg-core'
 import { FileSortingOptions } from './FileSortingOptions'
 import MetricIcon from '../MetricIcon.vue'
 
-library.add(faCompressAlt)
-library.add(faExpandAlt)
-
 const props = defineProps({
   /**
    * Files of the submission.