Only Explicitly use fa icons

This allows us to leverage tree-shaking to massively improve the amount of code that gets shipped. Signed-off-by: C0D3 M4513R <28912031+C0D3-M4513R@users.noreply.github.com>
kettingpowered · Aug 9, 2024 · 528b70b · 528b70b
1 parent 4823d5a
commit 528b70b
Showing 8 changed files with 50 additions and 34 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -10,10 +10,11 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^6.5.1",
-    "@fortawesome/free-brands-svg-icons": "^6.5.1",
-    "@fortawesome/free-regular-svg-icons": "^6.5.1",
-    "@fortawesome/free-solid-svg-icons": "^6.5.1",
+    "@fortawesome/fontawesome-common-types": "^6.6.0",
+    "@fortawesome/fontawesome-svg-core": "^6.6.0",
+    "@fortawesome/free-brands-svg-icons": "^6.6.0",
+    "@fortawesome/free-regular-svg-icons": "^6.6.0",
+    "@fortawesome/free-solid-svg-icons": "^6.6.0",
     "@fortawesome/vue-fontawesome": "^3.0.6",
     "@unhead/vue": "^1.9.3",
     "fast-xml-parser": "^4.3.6",

diff --git a/src/components/Navigation.vue b/src/components/Navigation.vue
@@ -1,3 +1,7 @@
+<script setup>
+import { faGithub, faDiscord } from "@fortawesome/free-brands-svg-icons";
+</script>
+
 <template>
   <div class="nav-menu">
     <div class="mobile-button-group">
@@ -16,10 +20,10 @@
       <div class="flex-grow-all"></div>
       <div class="navbar-icons" aria-label="Other Useful Links">
         <a class="navbar-icon" :href="global.discordUrl" target="_blank" aria-label="Discord Link">
-          <font-awesome-icon :icon="['fab', 'discord']" />
+          <font-awesome-icon :icon="faDiscord" />
         </a>
         <a class="navbar-icon" :href="global.githubUrl" target="_blank" aria-label="Github Link">
-          <font-awesome-icon :icon="['fab', 'github']" />
+          <font-awesome-icon :icon="faGithub" />
         </a>
       </div>
     </div>

diff --git a/src/components/Statistic.vue b/src/components/Statistic.vue
@@ -1,8 +1,11 @@
 <script setup>
+import { faSpinner, faCircleExclamation } from '@fortawesome/free-solid-svg-icons';
+
+
 defineProps({
   title: [String, Number],
   description: String,
-  icon: Array[String],
+  icon: Object,
   loading: Boolean,
   error: Boolean
 });
@@ -11,11 +14,11 @@ defineProps({
 <template>
   <div class="stat">
     <div v-if="loading" class="loading-spinner">
-      <font-awesome-icon icon="spinner" pulse size="3x" />
+      <font-awesome-icon :icon="faSpinner" pulse size="3x" />
     </div>
     <div v-else>
       <div class="error-icon" v-if="error">
-        <font-awesome-icon icon="exclamation-circle" size="lg" />
+        <font-awesome-icon :icon="faCircleExclamation" size="lg" />
       </div>
       <font-awesome-icon :icon="icon" size="3x"/>
       <p id="title">{{ title }}</p>
@@ -66,4 +69,4 @@ defineProps({
   top: 5px;
   right: 5px;
 }
-</style>
+</style>
diff --git a/src/components/faq/QnAComponent.vue b/src/components/faq/QnAComponent.vue
@@ -1,3 +1,6 @@
+<script setup>
+import { faLink } from "@fortawesome/free-solid-svg-icons";
+</script>
 <script>
 export default {
   name: "QnAComponent",
@@ -69,7 +72,7 @@ export default {
     <details class="detail">
       <summary @mouseover="showCopyIcon = true" @mouseleave="showCopyIcon = false">
         {{ qna.question }}
-        <font-awesome-icon class="copy-icon" v-if="showIcon" icon="chain" @click="copyToClipboard"/>
+        <font-awesome-icon class="copy-icon" v-if="showIcon" :icon="faLink" @click="copyToClipboard"/>
       </summary>
       <div class="desc" v-html="desc"></div>
     </details>
@@ -168,4 +171,4 @@ summary {
   border-radius: 5px;
   z-index: 9999;
 }
-</style>
+</style>
diff --git a/src/components/home/sections/Stats.vue b/src/components/home/sections/Stats.vue
@@ -1,3 +1,8 @@
+<script setup>
+import { faServer, faUsers} from "@fortawesome/free-solid-svg-icons";
+import { faGithub } from "@fortawesome/free-brands-svg-icons";
+
+</script>
 <script>
 import Stat from "@/components/Statistic.vue";
 
@@ -80,9 +85,9 @@ export default {
       <div id="info">
         <h1>Stats</h1>
         <div id="stat-container">
-          <Stat :title="`${openIssues} / ${closedIssues}`" description="Open / Closed issues" :loading="loadingIssues" :error="loadingIssuesError" :icon="['fab', 'github']"/>
-          <Stat :title="servers" description="Servers" :loading="loadingBstats" :error="loadingBstatsError" :icon="['fas', 'server']"/>
-          <Stat :title="players" description="Players" :loading="loadingBstats" :error="loadingBstatsError" :icon="['fas', 'users']"/>
+          <Stat :title="`${openIssues} / ${closedIssues}`" description="Open / Closed issues" :loading="loadingIssues" :error="loadingIssuesError" :icon="faGithub"/>
+          <Stat :title="servers" description="Servers" :loading="loadingBstats" :error="loadingBstatsError" :icon="faServer"/>
+          <Stat :title="players" description="Players" :loading="loadingBstats" :error="loadingBstatsError" :icon="faUsers"/>
         </div>
       </div>
     </div>
@@ -103,4 +108,4 @@ export default {
   align-items: center;
   flex-wrap: wrap;
 }
-</style>
+</style>
diff --git a/src/components/team/Member.vue b/src/components/team/Member.vue
@@ -1,3 +1,8 @@
+<script setup>
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+import { faGithub, faTwitter, faTwitch, faYoutube } from "@fortawesome/free-brands-svg-icons";
+</script>
+
 <script>
 export default {
   name: "Member",
@@ -40,18 +45,18 @@ export default {
   methods: {
     determineSocialIconFromUrl(url) {
       if (url.includes('github.com'))
-        return ['fab', 'github'];
+        return faGithub;
 
       if (url.includes('twitter.com') || url.includes('x.com'))
-        return ['fab', 'twitter'];
+        return faTwitter;
 
       //twitch
       if (url.includes('twitch.tv'))
-        return ['fab', 'twitch'];
+        return faTwitch;
 
       //youtube
       if (url.includes('youtube.com'))
-        return ['fab', 'youtube'];
+        return faYoutube;
     },
     getLabelFromUrl(url) {
       if (url.includes('github.com'))
@@ -81,7 +86,7 @@ export default {
       <div class="info">
         <h2>{{ name }}</h2>
         <div v-for="aName in alternateNames" class="alternate-names" v-if="alternateNames">
-          <font-awesome-icon :icon="aName.icon" />
+          <font-awesome-icon :icon="aName.icon"></font-awesome-icon>
           <span>{{ aName.name }}</span>
         </div>
       </div>
@@ -100,7 +105,7 @@ export default {
     </details>
     <div class="socials">
       <a v-for="social in socials" :href="social" target="_blank" :aria-label="getLabelFromUrl(social)">
-        <font-awesome-icon :icon="determineSocialIconFromUrl(social)" />
+        <font-awesome-icon :icon="determineSocialIconFromUrl(social)"></font-awesome-icon>
       </a>
     </div>
   </div>
@@ -226,4 +231,4 @@ export default {
 .socials a:hover {
   color: var(--color-link-secondary-hover);
 }
-</style>
+</style>
diff --git a/src/main.js b/src/main.js
@@ -8,14 +8,8 @@ import App from './App.vue'
 import { library, config} from '@fortawesome/fontawesome-svg-core'
 config.autoAddCss = false; //This causes a CSP error
 import "@fortawesome/fontawesome-svg-core/styles.css"; //we include it instead directly here.
-
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 
-/* ICONS HERE */
-import { fas } from "@fortawesome/free-solid-svg-icons";
-import { far } from "@fortawesome/free-regular-svg-icons";
-import { fab } from "@fortawesome/free-brands-svg-icons";
-library.add(fas, far, fab);
 
 export const createApp = ViteSSG(
     // the root component
@@ -75,8 +69,8 @@ export const createApp = ViteSSG(
 
         app.mixin(VueHeadMixin);
         //unhead setup end
+        app.component("font-awesome-icon", FontAwesomeIcon);
 
-        app.component('font-awesome-icon', FontAwesomeIcon)
         //Create some global properties
         app.config.globalProperties.global = {
             url: "https://kettingpowered.org/",