Implement new UI component for icons #230

- Introduce `AppIcon.vue`, offering improved performance over the
  previous `fort-awesome` dependency. This implementation reduces bundle
  size by 67.31KB (tested for web using `npm run build -- --mode prod`).
- Migrate Font Awesome 5 icons to Font Awesome 6.

This commit facilitates migration to Vue 3.0 (#230) and ensures no Vue
component remains tightly bound to a specific Vue version, enhancing
code portability.

Font Awesome license is not included because Font Awesome revokes its
right:

> "Attribution is no longer required as of Font Awesome 3.0"
>
> Sources:
>
> - https://fontawesome.com/v4/license/ (archived: https://web.archive.org/web/20231003213441/https://fontawesome.com/v4/license/, https://archive.ph/Yy9j5)
> - https://github.com/FortAwesome/Font-Awesome/wiki (archived: https://web.archive.org/web/20231003214646/https://github.com/FortAwesome/Font-Awesome/wiki, https://archive.ph/C6sXv)

This commit removes following third-party production dependencies:

- `@fortawesome/vue-fontawesome`
- `@fortawesome/free-solid-svg-icons`
- `@fortawesome/free-regular-svg-icons`
- `@fortawesome/free-brands-svg-icons`
- `@fortawesome/fontawesome-svg-core`

src/presentation/components/Scripts/Slider/SliderHandle.vue

@@ -4,9 +4,9 @@
     :style="{ cursor: cursorCssValue }"
     @mousedown="startResize">
     <div class="line" />
-    <font-awesome-icon
+    <AppIcon
       class="icon"
-      :icon="['fas', 'arrows-alt-h']"
+      icon="left-right"
     />
     <div class="line" />
   </div>
@@ -14,8 +14,12 @@
 
 <script lang="ts">
 import { defineComponent, onUnmounted } from 'vue';
+import AppIcon from '@/presentation/components/Shared/Icon/AppIcon.vue';
 
 export default defineComponent({
+  components: {
+    AppIcon,
+  },
   emits: {
     /* eslint-disable @typescript-eslint/no-unused-vars */
     resized: (displacementX: number) => true,

src/presentation/components/Scripts/View/Cards/CardListItem.vue

@@ -17,18 +17,18 @@
       </span>
       <span v-else>Oh no 😢</span>
       <!-- Expand icon -->
-      <font-awesome-icon
+      <AppIcon
         class="card__inner__expand-icon"
-        :icon="['far', isExpanded ? 'folder-open' : 'folder']"
+        :icon="isExpanded ? 'folder-open' : 'folder'"
       />
       <!-- Indeterminate and full states -->
       <div class="card__inner__state-icons">
-        <font-awesome-icon
-          :icon="['fa', 'battery-half']"
+        <AppIcon
+          icon="battery-half"
           v-if="isAnyChildSelected && !areAllChildrenSelected"
         />
-        <font-awesome-icon
-          :icon="['fa', 'battery-full']"
+        <AppIcon
+          icon="battery-full"
           v-if="areAllChildrenSelected"
         />
       </div>
@@ -38,8 +38,8 @@
         <ScriptsTree :categoryId="categoryId" />
       </div>
       <div class="card__expander__close-button">
-        <font-awesome-icon
-          :icon="['fas', 'times']"
+        <AppIcon
+          icon="xmark"
           v-on:click="collapse()"
         />
       </div>
@@ -52,6 +52,7 @@ import {
   defineComponent, ref, watch, computed,
   inject,
 } from 'vue';
+import AppIcon from '@/presentation/components/Shared/Icon/AppIcon.vue';
 import { InjectionKeys } from '@/presentation/injectionSymbols';
 import ScriptsTree from '@/presentation/components/Scripts/View/Tree/ScriptsTree.vue';
 import { sleep } from '@/infrastructure/Threading/AsyncSleep';
@@ -59,6 +60,7 @@ import { sleep } from '@/infrastructure/Threading/AsyncSleep';
 export default defineComponent({
   components: {
     ScriptsTree,
+    AppIcon,
   },
   props: {
     categoryId: {

src/presentation/components/Scripts/View/TheScriptsView.vue

@@ -18,7 +18,7 @@
             class="search__query__close-button"
             v-on:click="clearSearchQuery()"
           >
-            <font-awesome-icon :icon="['fas', 'times']" />
+            <AppIcon icon="xmark" />
           </div>
         </div>
         <div v-if="!searchHasMatches" class="search-no-matches">
@@ -41,6 +41,7 @@ import {
   defineComponent, PropType, ref, computed,
   inject,
 } from 'vue';
+import AppIcon from '@/presentation/components/Shared/Icon/AppIcon.vue';
 import { InjectionKeys } from '@/presentation/injectionSymbols';
 import ScriptsTree from '@/presentation/components/Scripts/View/Tree/ScriptsTree.vue';
 import CardList from '@/presentation/components/Scripts/View/Cards/CardList.vue';
@@ -52,6 +53,7 @@ export default defineComponent({
   components: {
     ScriptsTree,
     CardList,
+    AppIcon,
   },
   props: {
     currentView: {

src/presentation/components/Scripts/View/Tree/NodeContent/Documentation/ToggleDocumentationButton.vue

@@ -6,14 +6,18 @@
     v-on:click.stop
     v-on:click="toggle()"
   >
-    <font-awesome-icon :icon="['fas', 'info-circle']" />
+    <AppIcon icon="circle-info" />
   </a>
 </template>
 
 <script lang="ts">
 import { defineComponent, ref } from 'vue';
+import AppIcon from '@/presentation/components/Shared/Icon/AppIcon.vue';
 
 export default defineComponent({
+  components: {
+    AppIcon,
+  },
   emits: [
     'show',
     'hide',
@@ -52,5 +56,4 @@ export default defineComponent({
     color: $color-primary-light;
   }
 }
-
 </style>