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/Code/CodeButtons/IconButton.vue

@@ -4,30 +4,30 @@
     type="button"
     @click="onClicked"
   >
-    <font-awesome-icon
+    <AppIcon
       class="button__icon"
-      :icon="[iconPrefix, iconName]"
-      size="2x"
+      :icon="iconName"
     />
     <div class="button__text">{{text}}</div>
   </button>
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { defineComponent, PropType } from 'vue';
+import { IconName } from '@/presentation/components/Shared/Icon/IconName';
+import AppIcon from '@/presentation/components/Shared/Icon/AppIcon.vue';
 
 export default defineComponent({
+  components: {
+    AppIcon,
+  },
   props: {
     text: {
       type: String,
       required: true,
     },
-    iconPrefix: {
-      type: String,
-      required: true,
-    },
     iconName: {
-      type: String,
+      type: String as PropType<IconName>,
       required: true,
     },
   },
@@ -64,6 +64,10 @@ export default defineComponent({
   box-shadow: 0 3px 9px $color-primary-darkest;
   border-radius: 4px;
 
+  &__icon {
+    font-size: 2em;
+  }
+
   @include clickable;
 
   width: 10%;

src/presentation/components/Code/CodeButtons/Instructions/CodeInstruction.vue

@@ -3,9 +3,9 @@
     <span class="dollar">$</span>
     <code><slot /></code>
     <TooltipWrapper>
-      <font-awesome-icon
+      <AppIcon
         class="copy-button"
-        :icon="['fas', 'copy']"
+        icon="copy"
         @click="copyCode"
       />
       <template v-slot:tooltip>
@@ -19,10 +19,12 @@
 import { defineComponent, useSlots } from 'vue';
 import { Clipboard } from '@/infrastructure/Clipboard';
 import TooltipWrapper from '@/presentation/components/Shared/TooltipWrapper.vue';
+import AppIcon from '@/presentation/components/Shared/Icon/AppIcon.vue';
 
 export default defineComponent({
   components: {
     TooltipWrapper,
+    AppIcon,
   },
   setup() {
     const slots = useSlots();

src/presentation/components/Code/CodeButtons/Instructions/InstructionList.vue

@@ -14,7 +14,7 @@
     <p>
       <strong>2. The hard (manual) alternative</strong>. This requires you to do additional manual
       steps. If you are unsure how to follow the instructions, hover on information
-      (<font-awesome-icon :icon="['fas', 'info-circle']" />)
+      (<AppIcon icon="circle-info" />)
       icons near the steps, or follow the easy alternative described above.
     </p>
     <p>
@@ -27,9 +27,9 @@
           <div class="step__action">
             <span>{{ step.action.instruction }}</span>
             <TooltipWrapper v-if="step.action.details">
-              <font-awesome-icon
+              <AppIcon
                 class="explanation"
-                :icon="['fas', 'info-circle']"
+                icon="circle-info"
               />
               <template v-slot:tooltip>
                 <div v-html="step.action.details" />
@@ -39,9 +39,9 @@
           <div v-if="step.code" class="step__code">
             <CodeInstruction>{{ step.code.instruction }}</CodeInstruction>
             <TooltipWrapper v-if="step.code.details">
-              <font-awesome-icon
+              <AppIcon
                 class="explanation"
-                :icon="['fas', 'info-circle']"
+                icon="circle-info"
               />
               <template v-slot:tooltip>
                 <div v-html="step.code.details" />
@@ -62,6 +62,7 @@ import {
 import { InjectionKeys } from '@/presentation/injectionSymbols';
 import { OperatingSystem } from '@/domain/OperatingSystem';
 import TooltipWrapper from '@/presentation/components/Shared/TooltipWrapper.vue';
+import AppIcon from '@/presentation/components/Shared/Icon/AppIcon.vue';
 import CodeInstruction from './CodeInstruction.vue';
 import { IInstructionListData } from './InstructionListData';
 
@@ -69,6 +70,7 @@ export default defineComponent({
   components: {
     CodeInstruction,
     TooltipWrapper,
+    AppIcon,
   },
   props: {
     data: {

src/presentation/components/Code/CodeButtons/TheCodeButtons.vue

@@ -4,19 +4,16 @@
       v-if="canRun"
       text="Run"
       v-on:click="executeCode"
-      icon-prefix="fas"
       icon-name="play"
     />
     <IconButton
       :text="isDesktopVersion ? 'Save' : 'Download'"
       v-on:click="saveCode"
-      icon-prefix="fas"
-      :icon-name="isDesktopVersion ? 'save' : 'file-download'"
+      :icon-name="isDesktopVersion ? 'floppy-disk' : 'file-arrow-down'"
     />
     <IconButton
       text="Copy"
       v-on:click="copyCode"
-      icon-prefix="fas"
       icon-name="copy"
     />
     <ModalDialog v-if="instructions" v-model="areInstructionsVisible">