Only load the required fontawesome icons

Not the whole libraries. The built files are much less heavy.

example/src/views/HomeView.vue

@@ -2,13 +2,11 @@
 import { inject, ref, onMounted } from "vue"
 
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome"
-import { library } from "@fortawesome/fontawesome-svg-core"
-import { fas } from "@fortawesome/free-solid-svg-icons"
-library.add(fas)
 
 import { time_ago } from "../utils"
 import MainLayout from "../layouts/MainLayout.vue"
 import Plan from "@/components/Plan.vue"
+import { faEdit, faTrash } from "@fortawesome/free-solid-svg-icons"
 import {
   plan1_source,
   plan1_source_json,
@@ -264,14 +262,14 @@ function handleDrop(event: DragEvent) {
                     title="Remove plan from list"
                     v-on:click.prevent="deletePlan(plan)"
                   >
-                    <font-awesome-icon icon="trash"></font-awesome-icon>
+                    <FontAwesomeIcon :icon="faTrash"></FontAwesomeIcon>
                   </button>
                   <button
                     class="btn btn-sm btn-outline-secondary py-0 float-end"
                     title="Edit plan details"
                     v-on:click.prevent="editPlan(plan)"
                   >
-                    <font-awesome-icon icon="edit"></font-awesome-icon>
+                    <FontAwesomeIcon :icon="faEdit"></FontAwesomeIcon>
                   </button>
                   <a
                     v-on:click.prevent="openPlan(plan)"

src/components/Copy.vue

@@ -3,6 +3,7 @@ import { ref } from "vue"
 import useClipboard from "vue-clipboard3"
 import { directive as vTippy } from "vue-tippy"
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome"
+import { faCheck, faClipboard } from "@fortawesome/free-solid-svg-icons"
 
 interface Props {
   content: string
@@ -28,15 +29,15 @@ function copyRaw() {
       :class="copied ? 'd-none' : 'd-block'"
       @click="copyRaw"
     >
-      <font-awesome-icon fixed-width icon="clipboard" />
+      <FontAwesomeIcon fixed-width :icon="faClipboard" />
     </button>
     <button
       class="btn btn-outline-secondary bg-light btn-sm m-2"
       :class="copied ? 'd-block' : 'd-none'"
       @click="copyRaw"
       v-tippy="{ placement: 'left', arrow: true, content: 'copied' }"
     >
-      <font-awesome-icon fixed-width icon="check" class="text-success" />
+      <FontAwesomeIcon fixed-width :icon="faCheck" class="text-success" />
     </button>
   </div>
 </template>

src/components/Diagram.vue

@@ -13,6 +13,7 @@ import {
 } from "vue"
 import type { Ref } from "vue"
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome"
+import { faInfoCircle } from "@fortawesome/free-solid-svg-icons"
 import { BufferLocation, NodeProp, Metric } from "../enums"
 import { HelpService, scrollChildIntoParentView } from "@/services/help-service"
 import type { IPlan, Node } from "@/interfaces"
@@ -266,14 +267,14 @@ provide("scrollTo", scrollTo)
               Write
             </li>
           </ul>
-          <font-awesome-icon
-            icon="info-circle"
+          <FontAwesomeIcon
+            :icon="faInfoCircle"
             class="cursor-help d-inline-block text-muted"
             v-tippy="{
               content: getHelpMessage('hint track_io_timing'),
               allowHTML: true,
             }"
-          ></font-awesome-icon>
+          ></FontAwesomeIcon>
         </template>
       </div>
     </div>

src/components/DiagramRow.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import { inject, reactive, ref, watch } from "vue"
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome"
+import { faArrowDown, faArrowUp } from "@fortawesome/free-solid-svg-icons"
 import type { Ref } from "vue"
 import {
   HighlightedNodeIdKey,
@@ -193,14 +194,14 @@ watch(
         v-else-if="diagramViewOptions.metric == Metric.estimate_factor"
       >
         <span class="text-muted small">
-          <font-awesome-icon
+          <FontAwesomeIcon
             fixed-width
-            icon="arrow-down"
+            :icon="faArrowDown"
             v-if="
               node[NodeProp.PLANNER_ESTIMATE_DIRECTION] ===
               EstimateDirection.under
             "
-          ></font-awesome-icon>
+          ></FontAwesomeIcon>
           <i class="fa fa-fw d-inline-block" v-else />
         </span>
         <div
@@ -241,14 +242,14 @@ watch(
           aria-valuemax="100"
         ></div>
         <span class="text-muted small">
-          <font-awesome-icon
+          <FontAwesomeIcon
             fixed-width
-            icon="arrow-up"
+            :icon="faArrowUp"
             v-if="
               node[NodeProp.PLANNER_ESTIMATE_DIRECTION] ===
               EstimateDirection.over
             "
-          ></font-awesome-icon>
+          ></FontAwesomeIcon>
           <i class="fa fa-fw d-inline-block" v-else />
         </span>
       </div>

src/components/NodeBadges.vue

@@ -3,6 +3,13 @@ import { inject, reactive } from "vue"
 import type { Ref } from "vue"
 import { directive as vTippy } from "vue-tippy"
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome"
+import {
+  faClock,
+  faDollarSign,
+  faThumbsDown,
+  faFilter,
+  faExchangeAlt,
+} from "@fortawesome/free-solid-svg-icons"
 import useNode from "@/node"
 import type { IPlan, Node, ViewOptions } from "@/interfaces"
 import { PlanKey, ViewOptionsKey } from "@/symbols"
@@ -29,21 +36,21 @@ const {
     v-if="durationClass"
     :class="'p-0  d-inline-block mb-0 ms-1 text-nowrap alert ' + durationClass"
     v-tippy="'Slow'"
-    ><font-awesome-icon fixed-width icon="clock"></font-awesome-icon>
+    ><FontAwesomeIcon fixed-width :icon="faClock"></FontAwesomeIcon>
   </span>
   <span
     v-if="costClass"
     :class="'p-0  d-inline-block mb-0 ms-1 text-nowrap alert ' + costClass"
     v-tippy="'Cost is high'"
-    ><font-awesome-icon fixed-width icon="dollar-sign"></font-awesome-icon
+    ><FontAwesomeIcon fixed-width :icon="faDollarSign"></FontAwesomeIcon
   ></span>
   <span
     v-if="estimationClass"
     :class="
       'p-0  d-inline-block mb-0 ms-1 text-nowrap alert ' + estimationClass
     "
     v-tippy="'Bad estimation for number of rows'"
-    ><font-awesome-icon fixed-width icon="thumbs-down"></font-awesome-icon
+    ><FontAwesomeIcon fixed-width :icon="faThumbsDown"></FontAwesomeIcon
   ></span>
   <span
     v-if="rowsRemovedClass"
@@ -52,7 +59,7 @@ const {
     "
     v-tippy="filterTooltip"
   >
-    <font-awesome-icon fixed-width icon="filter"></font-awesome-icon>
+    <FontAwesomeIcon fixed-width :icon="faFilter"></FontAwesomeIcon>
   </span>
   <span
     v-if="heapFetchesClass"
@@ -64,17 +71,17 @@ const {
       content: 'Heap Fetches number is high',
     }"
   >
-    <font-awesome-icon fixed-width icon="exchange-alt"></font-awesome-icon>
+    <FontAwesomeIcon fixed-width :icon="faExchangeAlt"></FontAwesomeIcon>
   </span>
   <span
     v-if="rowsRemoved && !rowsRemovedClass"
     class="p-0 d-inline-block mb-0 ms-1 text-nowrap"
     v-tippy="filterTooltip"
   >
-    <font-awesome-icon
+    <FontAwesomeIcon
       fixed-width
-      icon="filter"
+      :icon="faFilter"
       class="text-muted"
-    ></font-awesome-icon>
+    ></FontAwesomeIcon>
   </span>
 </template>

src/components/PlanNode.vue

@@ -16,6 +16,11 @@ import { HighlightType, NodeProp } from "@/enums"
 import { findNodeBySubplanName } from "@/services/help-service"
 import useNode from "@/node"
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome"
+import {
+  faChevronDown,
+  faChevronUp,
+  faSearch,
+} from "@fortawesome/free-solid-svg-icons"
 
 const outerEl = ref<Element | null>(null) // The outer Element, useful for CTE and subplans
 
@@ -136,16 +141,16 @@ function centerCte() {
               @click.prevent.stop="showDetails = !showDetails"
             >
               <span class="text-muted">
-                <font-awesome-icon
+                <FontAwesomeIcon
                   fixed-width
-                  icon="chevron-up"
+                  :icon="faChevronUp"
                   v-if="showDetails"
-                ></font-awesome-icon>
-                <font-awesome-icon
+                ></FontAwesomeIcon>
+                <FontAwesomeIcon
                   fixed-width
-                  icon="chevron-down"
+                  :icon="faChevronDown"
                   v-else
-                ></font-awesome-icon>
+                ></FontAwesomeIcon>
               </span>
               {{ nodeName }}
             </h4>
@@ -230,10 +235,10 @@ function centerCte() {
             </div>
             <div v-if="node[NodeProp.CTE_NAME]">
               <a class="text-reset" href="" @click.prevent.stop="centerCte">
-                <font-awesome-icon
-                  icon="search"
+                <FontAwesomeIcon
+                  :icon="faSearch"
                   class="text-muted"
-                ></font-awesome-icon>
+                ></FontAwesomeIcon>
                 <span class="text-muted">CTE</span>
                 {{ node[NodeProp.CTE_NAME] }}
               </a>

src/components/PlanNodeDetail.vue

@@ -12,6 +12,17 @@ import MiscDetail from "@/components/MiscDetail.vue"
 import { PlanKey, ViewOptionsKey } from "@/symbols"
 import _ from "lodash"
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome"
+import {
+  faAlignJustify,
+  faArrowDown,
+  faArrowUp,
+  faClock,
+  faDollarSign,
+  faExchangeAlt,
+  faFilter,
+  faInfoCircle,
+  faUndo,
+} from "@fortawesome/free-solid-svg-icons"
 
 const viewOptions = inject(ViewOptionsKey) as ViewOptions
 
@@ -183,11 +194,11 @@ watch(activeTab, () => {
     <div class="tab-pane" :class="{ 'show active': activeTab === 'general' }">
       <!-- general -->
       <div v-if="plan.isAnalyze">
-        <font-awesome-icon
+        <FontAwesomeIcon
           fixed-width
-          icon="clock"
+          :icon="faClock"
           class="text-muted"
-        ></font-awesome-icon>
+        ></FontAwesomeIcon>
         <b>Timing:</b>
         <span
           class="p-0 px-1 rounded alert"
@@ -201,11 +212,11 @@ watch(activeTab, () => {
         </template>
       </div>
       <div>
-        <font-awesome-icon
+        <FontAwesomeIcon
           fixed-width
-          icon="align-justify"
+          :icon="faAlignJustify"
           class="text-muted"
-        ></font-awesome-icon>
+        ></FontAwesomeIcon>
         <b>Rows:</b>
         <span class="px-1">{{
           tilde + formattedProp("ACTUAL_ROWS_REVISED")
@@ -221,11 +232,10 @@ watch(activeTab, () => {
         >
           |
           <span v-if="plannerRowEstimateDirection === EstimateDirection.over"
-            ><font-awesome-icon icon="arrow-up"></font-awesome-icon> over</span
+            ><FontAwesomeIcon :icon="faArrowUp"></FontAwesomeIcon> over</span
           >
           <span v-if="plannerRowEstimateDirection === EstimateDirection.under"
-            ><font-awesome-icon icon="arrow-down"></font-awesome-icon>
-            under</span
+            ><FontAwesomeIcon :icon="faArrowDown"></FontAwesomeIcon> under</span
           >
           estimated
           <span v-if="plannerRowEstimateValue != Infinity">
@@ -239,11 +249,11 @@ watch(activeTab, () => {
         </span>
       </div>
       <div v-if="rowsRemoved">
-        <font-awesome-icon
+        <FontAwesomeIcon
           fixed-width
-          icon="filter"
+          :icon="faFilter"
           class="text-muted"
-        ></font-awesome-icon>
+        ></FontAwesomeIcon>
         <b> {{ NodeProp[rowsRemovedProp] }}: </b>
         <span>
           <span class="px-1">{{ tilde + formattedProp(rowsRemovedProp) }}</span
@@ -254,19 +264,19 @@ watch(activeTab, () => {
         </span>
       </div>
       <div v-if="node[NodeProp.HEAP_FETCHES]">
-        <font-awesome-icon
+        <FontAwesomeIcon
           fixed-width
-          icon="exchange-alt"
+          :icon="faExchangeAlt"
           class="text-muted"
-        ></font-awesome-icon>
+        ></FontAwesomeIcon>
         <b>Heap Fetches:</b>
         <span
           class="p-0 px-1 rounded alert"
           :class="heapFetchesClass"
           v-html="formattedProp('HEAP_FETCHES')"
         ></span>
-        <font-awesome-icon
-          icon="info-circle"
+        <FontAwesomeIcon
+          :icon="faInfoCircle"
           fixed-width
           class="text-muted"
           v-if="heapFetchesClass"
@@ -275,14 +285,14 @@ watch(activeTab, () => {
             content:
               'Visibility map may be out-of-date. Consider using VACUUM or change autovacuum settings.',
           }"
-        ></font-awesome-icon>
+        ></FontAwesomeIcon>
       </div>
       <div v-if="node[NodeProp.EXCLUSIVE_COST]">
-        <font-awesome-icon
+        <FontAwesomeIcon
           fixed-width
-          icon="dollar-sign"
+          :icon="faDollarSign"
           class="text-muted"
-        ></font-awesome-icon>
+        ></FontAwesomeIcon>
         <b>Cost:</b>
         <span class="p-0 px-1 me-1 alert" :class="costClass">{{
           formattedProp("EXCLUSIVE_COST")
@@ -292,11 +302,11 @@ watch(activeTab, () => {
         >
       </div>
       <div v-if="node[NodeProp.ACTUAL_LOOPS] > 1">
-        <font-awesome-icon
+        <FontAwesomeIcon
           fixed-width
-          icon="undo"
+          :icon="faUndo"
           class="text-muted"
-        ></font-awesome-icon>
+        ></FontAwesomeIcon>
         <b>Loops:</b>
         <span class="px-1">{{ formattedProp("ACTUAL_LOOPS") }} </span>
       </div>