Import only the required icons instead of bundling the whole icon pack

FreeTubeApp · Aug 31, 2022 · 7834ebf · 7834ebf
1 parent faf8b5c
commit 7834ebf
Show file tree

Hide file tree

Showing 27 changed files with 191 additions and 88 deletions.
diff --git a/src/renderer/components/ft-channel-bubble/ft-channel-bubble.vue b/src/renderer/components/ft-channel-bubble/ft-channel-bubble.vue
@@ -12,7 +12,7 @@
       class="bubble selected"
     >
       <font-awesome-icon
-        icon="check"
+        :icon="['fas', 'check']"
         class="icon"
       />
     </div>

diff --git a/src/renderer/components/ft-icon-button/ft-icon-button.js b/src/renderer/components/ft-icon-button/ft-icon-button.js
@@ -9,8 +9,8 @@ export default Vue.extend({
       default: ''
     },
     icon: {
-      type: String,
-      default: 'ellipsis-v'
+      type: Array,
+      default: () => ['fas', 'ellipsis-v']
     },
     theme: {
       type: String,

diff --git a/src/renderer/components/ft-input/ft-input.js b/src/renderer/components/ft-input/ft-input.js
@@ -67,7 +67,7 @@ export default Vue.extend({
       // As the text input box should be empty
       clearTextButtonExisting: false,
       clearTextButtonVisible: false,
-      actionButtonIconName: 'search'
+      actionButtonIconName: ['fas', 'search']
     }
   },
   computed: {
@@ -136,7 +136,7 @@ export default Vue.extend({
 
       if (!this.inputDataPresent) {
         // Change back to default icon if text is blank
-        this.actionButtonIconName = 'search'
+        this.actionButtonIconName = ['fas', 'search']
         return
       }
 
@@ -165,15 +165,15 @@ export default Vue.extend({
 
           if (isYoutubeLink) {
             // Go to URL (i.e. Video/Playlist/Channel
-            this.actionButtonIconName = 'arrow-right'
+            this.actionButtonIconName = ['fas', 'arrow-right']
           } else {
             // Search with text
-            this.actionButtonIconName = 'search'
+            this.actionButtonIconName = ['fas', 'search']
           }
         })
       } catch (ex) {
         // On exception, consider text as invalid URL
-        this.actionButtonIconName = 'search'
+        this.actionButtonIconName = ['fas', 'search']
         // Rethrow exception
         throw ex
       }

diff --git a/src/renderer/components/ft-input/ft-input.vue b/src/renderer/components/ft-input/ft-input.vue
@@ -24,7 +24,7 @@
     </label>
     <font-awesome-icon
       v-if="showClearTextButton"
-      icon="times-circle"
+      :icon="['fas', 'times-circle']"
       class="clearInputTextButton"
       :class="{
         visible: inputDataPresent

diff --git a/src/renderer/components/ft-list-dropdown/ft-list-dropdown.vue b/src/renderer/components/ft-list-dropdown/ft-list-dropdown.vue
@@ -4,7 +4,7 @@
       {{ title }}
       <font-awesome-icon
         class="angleDownIcon"
-        icon="angle-down"
+        :icon="['fas', 'angle-down']"
       />
     </div>
     <ul>

diff --git a/src/renderer/components/ft-list-playlist/ft-list-playlist.vue b/src/renderer/components/ft-list-playlist/ft-list-playlist.vue
@@ -18,15 +18,15 @@
         <div class="background" />
         <div class="inner">
           <div>{{ videoCount }}</div>
-          <div><font-awesome-icon icon="list" /></div>
+          <div><font-awesome-icon :icon="['fas','list']" /></div>
         </div>
       </div>
     </router-link>
     <div class="info">
       <ft-icon-button
         v-if="externalPlayer !== ''"
         :title="$t('Video.External Player.OpenInTemplate').replace('$', externalPlayer)"
-        icon="external-link-alt"
+        :icon="['fas', 'external-link-alt']"
         class="externalPlayerButton"
         theme="base-no-default"
         :size="16"

diff --git a/src/renderer/components/ft-list-video/ft-list-video.vue b/src/renderer/components/ft-list-video/ft-list-video.vue
@@ -34,7 +34,7 @@
       <ft-icon-button
         v-if="externalPlayer !== ''"
         :title="$t('Video.External Player.OpenInTemplate').replace('$', externalPlayer)"
-        icon="external-link-alt"
+        :icon="['fas', 'external-link-alt']"
         class="externalPlayerIcon"
         theme="base"
         :padding="appearance === `watchPlaylistItem` ? 6 : 7"
@@ -44,7 +44,7 @@
       <ft-icon-button
         v-if="!isLive"
         :title="$t('Video.Save Video')"
-        icon="star"
+        :icon="['fas', 'star']"
         class="favoritesIcon"
         :theme="favoriteIconTheme"
         :padding="appearance === `watchPlaylistItem` ? 5 : 6"
@@ -66,7 +66,7 @@
     <div class="info">
       <ft-icon-button
         class="optionsButton"
-        icon="ellipsis-v"
+        :icon="['fas', 'ellipsis-v']"
         title="More Options"
         theme="base-no-default"
         :size="16"

diff --git a/src/renderer/components/ft-notification-banner/ft-notification-banner.vue b/src/renderer/components/ft-notification-banner/ft-notification-banner.vue
@@ -14,7 +14,7 @@
     </div>
     <font-awesome-icon
       class="bannerIcon"
-      icon="times"
+      :icon="['fas', 'times']"
       @click="handleClose"
     />
   </div>

diff --git a/src/renderer/components/ft-profile-selector/ft-profile-selector.vue b/src/renderer/components/ft-profile-selector/ft-profile-selector.vue
@@ -22,7 +22,7 @@
       </h3>
       <ft-icon-button
         class="profileSettings"
-        icon="sliders-h"
+        :icon="['fas', 'sliders-h']"
         @click="openProfileSettings"
       />
       <div

diff --git a/src/renderer/components/ft-select/ft-select.vue b/src/renderer/components/ft-select/ft-select.vue
@@ -16,7 +16,7 @@
       </option>
     </select>
     <font-awesome-icon
-      icon="sort-down"
+      :icon="['fas', 'sort-down']"
       class="iconSelect"
     />
     <span class="select-highlight" />

diff --git a/src/renderer/components/ft-share-button/ft-share-button.vue b/src/renderer/components/ft-share-button/ft-share-button.vue
@@ -3,7 +3,7 @@
     ref="iconButton"
     :title="$t('Share.Share Video')"
     theme="secondary"
-    icon="share-alt"
+    :icon="['fas', 'share-alt']"
     dropdown-position-x="left"
     :force-dropdown="true"
   >
@@ -31,30 +31,30 @@
           class="action"
           @click="copyYoutube()"
         >
-          <font-awesome-icon icon="copy" />
+          <font-awesome-icon :icon="['fas', 'copy']" />
           {{ $t("Share.Copy Link") }}
         </ft-button>
         <ft-button
           class="action"
           @click="openYoutube()"
         >
-          <font-awesome-icon icon="globe" />
+          <font-awesome-icon :icon="['fas', 'globe']" />
           {{ $t("Share.Open Link") }}
         </ft-button>
         <ft-button
           class="action"
           background-color="var(--accent-color-active)"
           @click="copyYoutubeEmbed()"
         >
-          <font-awesome-icon icon="copy" />
+          <font-awesome-icon :icon="['fas', 'copy']" />
           {{ $t("Share.Copy Embed") }}
         </ft-button>
         <ft-button
           class="action"
           background-color="var(--accent-color-active)"
           @click="openYoutubeEmbed()"
         >
-          <font-awesome-icon icon="globe" />
+          <font-awesome-icon :icon="['fas', 'globe']" />
           {{ $t("Share.Open Embed") }}
         </ft-button>
       </div>
@@ -70,30 +70,30 @@
           class="action"
           @click="copyInvidious()"
         >
-          <font-awesome-icon icon="copy" />
+          <font-awesome-icon :icon="['fas', 'copy']" />
           {{ $t("Share.Copy Link") }}
         </ft-button>
         <ft-button
           class="action"
           @click="openInvidious()"
         >
-          <font-awesome-icon icon="globe" />
+          <font-awesome-icon :icon="['fas', 'globe']" />
           {{ $t("Share.Open Link") }}
         </ft-button>
         <ft-button
           class="action"
           background-color="var(--accent-color-active)"
           @click="copyInvidiousEmbed()"
         >
-          <font-awesome-icon icon="copy" />
+          <font-awesome-icon :icon="['fas', 'copy']" />
           {{ $t("Share.Copy Embed") }}
         </ft-button>
         <ft-button
           class="action"
           background-color="var(--accent-color-active)"
           @click="openInvidiousEmbed()"
         >
-          <font-awesome-icon icon="globe" />
+          <font-awesome-icon :icon="['fas', 'globe']" />
           {{ $t("Share.Open Embed") }}
         </ft-button>
       </div>

diff --git a/src/renderer/components/ft-tooltip/ft-tooltip.vue b/src/renderer/components/ft-tooltip/ft-tooltip.vue
@@ -5,7 +5,7 @@
       class="button"
       type="button"
     >
-      <font-awesome-icon icon="question-circle" />
+      <font-awesome-icon :icon="['fas', 'question-circle']" />
     </button>
     <p
       :id="id"

diff --git a/src/renderer/components/side-nav-more-options/side-nav-more-options.vue b/src/renderer/components/side-nav-more-options/side-nav-more-options.vue
@@ -6,7 +6,7 @@
       @click="openMoreOptions = !openMoreOptions"
     >
       <font-awesome-icon
-        icon="ellipsis-h"
+        :icon="['fas', 'ellipsis-h']"
         class="navIcon"
         :class="applyNavIconExpand"
       />
@@ -32,7 +32,7 @@
           class="thumbnailContainer"
         >
           <font-awesome-icon
-            icon="list"
+            :icon="['fas', 'list']"
             class="navIcon"
             :class="applyNavIconExpand"
             fixed-width
@@ -52,7 +52,7 @@
         @click="navigate('trending')"
       >
         <font-awesome-icon
-          icon="fire"
+          :icon="['fas', 'fire']"
           class="navIcon"
           :class="applyNavIconExpand"
         />
@@ -70,7 +70,7 @@
         @click="navigate('popular')"
       >
         <font-awesome-icon
-          icon="users"
+          :icon="['fas', 'users']"
           class="navIcon"
           :class="applyNavIconExpand"
         />
@@ -87,7 +87,7 @@
         @click="navigate('about')"
       >
         <font-awesome-icon
-          icon="info-circle"
+          :icon="['fas', 'info-circle']"
           class="navIcon"
           :class="applyNavIconExpand"
         />
@@ -104,7 +104,7 @@
       @click="navigate('history')"
     >
       <font-awesome-icon
-        icon="history"
+        :icon="['fas', 'history']"
         class="navIcon"
         :class="applyNavIconExpand"
       />
@@ -118,7 +118,7 @@
       @click="navigate('settings')"
     >
       <font-awesome-icon
-        icon="sliders-h"
+        :icon="['fas', 'sliders-h']"
         class="navIcon"
         :class="applyNavIconExpand"
       />
@@ -131,7 +131,7 @@
       @click="navigate('about')"
     >
       <font-awesome-icon
-        icon="info-circle"
+        :icon="['fas', 'info-circle']"
         class="navIcon"
         :class="applyNavIconExpand"
       />

diff --git a/src/renderer/components/side-nav/side-nav.vue b/src/renderer/components/side-nav/side-nav.vue
@@ -19,7 +19,7 @@
           class="thumbnailContainer"
         >
           <font-awesome-icon
-            icon="rss"
+            :icon="['fas', 'rss']"
             class="navIcon"
             :class="applyNavIconExpand"
             fixed-width
@@ -43,7 +43,7 @@
           class="thumbnailContainer"
         >
           <font-awesome-icon
-            icon="list"
+            :icon="['fas', 'list']"
             class="navIcon"
             :class="applyNavIconExpand"
             fixed-width
@@ -69,7 +69,7 @@
           class="thumbnailContainer"
         >
           <font-awesome-icon
-            icon="fire"
+            :icon="['fas', 'fire']"
             class="navIcon"
             :class="applyNavIconExpand"
             fixed-width
@@ -95,7 +95,7 @@
           class="thumbnailContainer"
         >
           <font-awesome-icon
-            icon="users"
+            :icon="['fas', 'users']"
             class="navIcon"
             :class="applyNavIconExpand"
             fixed-width
@@ -121,7 +121,7 @@
           class="thumbnailContainer"
         >
           <font-awesome-icon
-            icon="bookmark"
+            :icon="['fas', 'bookmark']"
             class="navIcon"
             :class="applyNavIconExpand"
             fixed-width
@@ -149,7 +149,7 @@
           class="thumbnailContainer"
         >
           <font-awesome-icon
-            icon="history"
+            :icon="['fas', 'history']"
             class="navIcon"
             :class="applyNavIconExpand"
             fixed-width
@@ -175,7 +175,7 @@
           class="thumbnailContainer"
         >
           <font-awesome-icon
-            icon="sliders-h"
+            :icon="['fas', 'sliders-h']"
             class="navIcon"
             :class="applyNavIconExpand"
             fixed-width
@@ -200,7 +200,7 @@
           class="thumbnailContainer"
         >
           <font-awesome-icon
-            icon="info-circle"
+            :icon="['fas', 'info-circle']"
             class="navIcon"
             :class="applyNavIconExpand"
             fixed-width