Minor fixes to Heading component; correct imports and default props.

client/src/components/Common/Heading.vue

@@ -1,7 +1,11 @@
 <script setup lang="ts">
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { faAngleDoubleDown, faAngleDoubleUp } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { computed } from "vue";
 
+library.add(faAngleDoubleDown, faAngleDoubleUp);
+
 interface Props {
     h1?: boolean;
     h2?: boolean;
@@ -20,12 +24,14 @@ interface Props {
 
 const props = withDefaults(defineProps<Props>(), {
     collapse: "none",
+    icon: "",
+    size: "lg",
 });
 
 defineEmits(["click"]);
 
 const sizeClass = computed(() => {
-    return `h-${props.size ?? "lg"}`;
+    return `h-${props.size}`;
 });
 
 const collapsible = computed(() => {
@@ -55,7 +61,12 @@ const element = computed(() => {
         <div v-else class="stripe"></div>
         <component
             :is="element"
-            :class="[sizeClass, props.bold ? 'font-weight-bold' : '', collapsible ? 'collapsible' : '', props.truncate ? 'truncate' : '']">
+            :class="[
+                sizeClass,
+                props.bold ? 'font-weight-bold' : '',
+                collapsible ? 'collapsible' : '',
+                props.truncate ? 'truncate' : '',
+            ]">
             @click="$emit('click')">
             <slot />
         </component>