Webpack bundle dependencies (#2511)

* Allow webpack to bundle *most* dependencies

* Exclude *most* node_modules from getting packaged by electron-builder

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

* Reduce packaging blacklist to only include the few things that still need blacklisting

_scripts/build.js

@@ -58,22 +58,14 @@ const config = {
     'icon.svg',
     './dist/**/*',
     '!dist/web/*',
-    '!**/node_modules/**/.*',
+    '!node_modules/**/*',
-    '!**/node_modules/**/index.html',
-    '!**/{.github,Jenkinsfile}',
-    '!**/{CHANGES.md,CODE_OF_CONDUCT.md,CONTRIBUTING.md,CONTRIBUTION.md,DEVELOPMENT.md,docs,docs.md,docs.mli,examples,History.md,HISTORY.md,README.md,TODO.md,UPGRADE_GUIDE.md,UPGRADING.md}',
-    '!**/{commitlint.config.js,.editorconfig,.eslintignore,.eslintrc.{js,yml},.gitmodules,.huskyrc,.lintstagedrc,.nvmrc,.nycrc{,.json},.prettierrc{,.yaml},tslint.json}',
-    '!**/{.babelrc,bower.json,Gruntfile.js,Makefile,.npmrc.proregistry,rollup.config.js,.tm_properties,.tool-versions,tsconfig.json,webpack.config.js}',
-    '!**/*.{{,c,m}js,min,ts}.map',
-    '!**/*.d.ts',
 
-    // only exclude the src directory for specific packages
+    // renderer
-    // as some of them have their dist code in there and we don't want to exclude those
+    'node_modules/{miniget,ytpl,ytsr}/**/*',
-    '!**/node_modules/{@fortawesome/vue-fontawesome,agent-base,jquery,localforage,m3u8-parser,marked,mpd-parser,performance-now,video.js,vue,vue-i18n,vue-router}/src/*',
+
-    '!**/node_modules/**/{bin,man,scripts}/*',
+    '!**/README.md',
-    '!**/node_modules/jquery/dist/jquery.slim*.js',
+    '!**/*.js.map',
-    '!**/node_modules/video.js/dist/{alt/*,video.js}',
+    '!**/*.d.ts',
-    '!**/node_modules/@videojs/*/src'
   ],
   dmg: {
     contents: [

_scripts/webpack.main.config.js

@@ -2,15 +2,9 @@ const path = require('path')
 const webpack = require('webpack')
 const CopyWebpackPlugin = require('copy-webpack-plugin')
 
-const {
+const { productName } = require('../package.json')
-  dependencies,
-  devDependencies,
-  productName,
-} = require('../package.json')
 
-const externals = Object.keys(dependencies).concat(Object.keys(devDependencies))
 const isDevMode = process.env.NODE_ENV === 'development'
-const whiteListedModules = []
 
 const config = {
   name: 'main',
@@ -19,7 +13,10 @@ const config = {
   entry: {
     main: path.join(__dirname, '../src/main/index.js'),
   },
-  externals: externals.filter(d => !whiteListedModules.includes(d)),
+  // webpack spits out errors while inlining electron-debug as
+  // it tries to dynamically load dependencies
+  // the error: "Critical dependency: the request of a dependency is an expression"
+  externals: ['electron-debug'],
   module: {
     rules: [
       {

_scripts/webpack.renderer.config.js

@@ -4,15 +4,9 @@ const HtmlWebpackPlugin = require('html-webpack-plugin')
 const VueLoaderPlugin = require('vue-loader/lib/plugin')
 const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 
-const {
+const { productName } = require('../package.json')
-  dependencies,
-  devDependencies,
-  productName,
-} = require('../package.json')
 
-const externals = Object.keys(dependencies).concat(Object.keys(devDependencies))
 const isDevMode = process.env.NODE_ENV === 'development'
-const whiteListedModules = ['vue']
 
 const config = {
   name: 'renderer',
@@ -32,7 +26,10 @@ const config = {
     path: path.join(__dirname, '../dist'),
     filename: '[name].js',
   },
-  externals: externals.filter(d => !whiteListedModules.includes(d)),
+  // webpack spits out errors while inlining ytpl and ytsr as
+  // they dynamically import their package.json file to extract the bug report URL
+  // the error: "Critical dependency: the request of a dependency is an expression"
+  externals: ['ytpl', 'ytsr'],
   module: {
     rules: [
       {

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>

src/renderer/components/ft-icon-button/ft-icon-button.js

@@ -9,8 +9,8 @@ export default Vue.extend({
       default: ''
     },
     icon: {
-      type: String,
+      type: Array,
-      default: 'ellipsis-v'
+      default: () => ['fas', 'ellipsis-v']
     },
     theme: {
       type: String,

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
       }

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

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>

src/renderer/components/ft-list-playlist/ft-list-playlist.vue

@@ -18,7 +18,7 @@
         <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>
@@ -26,7 +26,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="externalPlayerButton"
         theme="base-no-default"
         :size="16"

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"

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>

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

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" />

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,14 +31,14 @@
           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
@@ -46,7 +46,7 @@
           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
@@ -54,7 +54,7 @@
           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,14 +70,14 @@
           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
@@ -85,7 +85,7 @@
           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
@@ -93,7 +93,7 @@
           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>

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"

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"
       />

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

src/renderer/components/top-nav/top-nav.vue

@@ -6,7 +6,7 @@
     <div class="side">
       <font-awesome-icon
         class="menuIcon navIcon"
-        icon="bars"
+        :icon="['fas', 'bars']"
         role="button"
         tabindex="0"
         @click="toggleSideNav"
@@ -15,7 +15,7 @@
       <font-awesome-icon
         id="historyArrowBack"
         class="navBackIcon navIcon fa-arrow-left"
-        icon="arrow-left"
+        :icon="['fas', 'arrow-left']"
         role="button"
         tabindex="0"
         :title="backwardText"
@@ -25,7 +25,7 @@
       <font-awesome-icon
         id="historyArrowForward"
         class="navForwardIcon navIcon fa-arrow-right"
-        icon="arrow-right"
+        :icon="['fas', 'arrow-right']"
         role="button"
         tabindex="0"
         :title="forwardText"
@@ -35,7 +35,7 @@
       <font-awesome-icon
         v-if="!hideSearchBar"
         class="navSearchIcon navIcon"
-        icon="search"
+        :icon="['fas', 'search']"
         role="button"
         tabindex="0"
         @click="toggleSearchContainer"
@@ -43,7 +43,7 @@
       />
       <font-awesome-icon
         class="navNewWindowIcon navIcon"
-        icon="clone"
+        :icon="['fas', 'clone']"
         :title="newWindowText"
         @click="createNewWindow"
       />
@@ -83,7 +83,7 @@
           v-if="!hideSearchBar"
           class="navFilterIcon navIcon"
           :class="{ filterChanged: searchFilterValueChanged }"
-          icon="filter"
+          :icon="['fas', 'filter']"
           role="button"
           tabindex="0"
           @click="showFilters = !showFilters"

src/renderer/components/watch-video-comments/watch-video-comments.vue

@@ -52,7 +52,7 @@
           class="commentPinned"
         >
           <font-awesome-icon
-            icon="thumbtack"
+            :icon="['fas', 'thumbtack']"
           />
           {{ $t("Comments.Pinned by") }} {{ channelName }}
         </p>
@@ -88,7 +88,7 @@
         <p class="commentLikeCount">
           <font-awesome-icon
             v-if="!hideCommentLikes"
-            icon="thumbs-up"
+            :icon="['fas', 'thumbs-up']"
           />
           {{ comment.likes }}
           <span
@@ -100,11 +100,11 @@
               class="commentHeartBadgeImg"
             >
             <font-awesome-icon
-              icon="heart"
+              :icon="['fas', 'heart']"
               class="commentHeartBadgeWhite"
             />
             <font-awesome-icon
-              icon="heart"
+              :icon="['fas', 'heart']"
               class="commentHeartBadgeRed"
             />
           </span>
@@ -163,7 +163,7 @@
             <p class="commentLikeCount">
               <font-awesome-icon
                 v-if="!hideCommentLikes"
-                icon="thumbs-up"
+                :icon="['fas', 'thumbs-up']"
               />
               {{ reply.likes }}
             </p>

src/renderer/components/watch-video-info/watch-video-info.vue

@@ -53,7 +53,7 @@
           class="likeSection"
         >
           <div>
-            <span class="likeCount"><font-awesome-icon icon="thumbs-up" /> {{ parsedLikeCount }}</span>
+            <span class="likeCount"><font-awesome-icon :icon="['fas', 'thumbs-up']" /> {{ parsedLikeCount }}</span>
           </div>
         </div>
       </div>
@@ -71,8 +71,8 @@
             :style="{ background: `linear-gradient(to right, var(--accent-color) ${likePercentageRatio}%, #9E9E9E ${likePercentageRatio}%` }"
           />
           <div>
-            <span class="likeCount"><font-awesome-icon icon="thumbs-up" /> {{ parsedLikeCount }}</span>
+            <span class="likeCount"><font-awesome-icon :icon="['fas', 'thumbs-up']" /> {{ parsedLikeCount }}</span>
-            <span class="dislikeCount"><font-awesome-icon icon="thumbs-down" /> {{ parsedDislikeCount }}</span>
+            <span class="dislikeCount"><font-awesome-icon :icon="['fas', 'thumbs-down']" /> {{ parsedDislikeCount }}</span>
           </div>
         </div>
       </div>
@@ -81,7 +81,7 @@
         <ft-icon-button
           v-if="!isUpcoming"
           :title="$t('Video.Save Video')"
-          icon="star"
+          :icon="['fas', 'star']"
           class="option"
           :theme="favoriteIconTheme"
           @click="toggleSave"
@@ -89,7 +89,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="option"
           theme="secondary"
           @click="handleExternalPlayer"
@@ -100,7 +100,7 @@
           :title="$t('Video.Download Video')"
           class="option"
           theme="secondary"
-          icon="download"
+          :icon="['fas', 'download']"
           :return-index="true"
           :dropdown-options="downloadLinkOptions"
           @click="handleDownload"
@@ -110,7 +110,7 @@
           :title="$t('Change Format.Change Media Formats')"
           class="option"
           theme="secondary"
-          icon="file-video"
+          :icon="['fas', 'file-video']"
           :dropdown-options="formatTypeOptions"
           @click="handleFormatChange"
         />

src/renderer/components/watch-video-live-chat/watch-video-live-chat.vue

@@ -16,7 +16,7 @@
         {{ errorMessage }}
       </p>
       <font-awesome-icon
-        icon="exclamation-circle"
+        :icon="['fas', 'exclamation-circle']"
         class="errorIcon"
       />
       <ft-button
@@ -190,7 +190,7 @@
       >
         <font-awesome-icon
           class="icon"
-          icon="arrow-down"
+          :icon="['fas', 'arrow-down']"
         />
       </div>
     </div>

src/renderer/components/watch-video-playlist/watch-video-playlist.vue

@@ -33,33 +33,33 @@
         <font-awesome-icon
           class="playlistIcon"
           :class="{ playlistIconActive: loopEnabled }"
-          icon="retweet"
+          :icon="['fas', 'retweet']"
           :title="$t('Video.Loop Playlist')"
           @click="toggleLoop"
         />
         <font-awesome-icon
           class="playlistIcon"
           :class="{ playlistIconActive: shuffleEnabled }"
-          icon="random"
+          :icon="['fas', 'random']"
           :title="$t('Video.Shuffle Playlist')"
           @click="toggleShuffle"
         />
         <font-awesome-icon
           class="playlistIcon"
           :class="{ playlistIconActive: reversePlaylist }"
-          icon="exchange-alt"
+          :icon="['fas', 'exchange-alt']"
           :title="$t('Video.Reverse Playlist')"
           @click="toggleReversePlaylist"
         />
         <font-awesome-icon
           class="playlistIcon"
-          icon="step-backward"
+          :icon="['fas', 'step-backward']"
           :title="$t('Video.Play Previous Video')"
           @click="playPreviousVideo"
         />
         <font-awesome-icon
           class="playlistIcon"
-          icon="step-forward"
+          :icon="['fas', 'step-forward']"
           :title="$t('Video.Play Next Video')"
           @click="playNextVideo"
         />
@@ -77,7 +77,7 @@
             <font-awesome-icon
               v-if="currentVideoIndex === (index + 1)"
               class="videoIndexIcon"
-              icon="play"
+              :icon="['fas', 'play']"
             />
             <p
               v-else

src/renderer/main.js

@@ -5,7 +5,55 @@ import router from './router/index'
 import store from './store/index'
 import i18n from './i18n/index'
 import { library } from '@fortawesome/fontawesome-svg-core'
-import { fas } from '@fortawesome/free-solid-svg-icons'
+import {
+  faAngleDown,
+  faArrowDown,
+  faArrowLeft,
+  faArrowRight,
+  faBars,
+  faBookmark,
+  faCheck,
+  faClone,
+  faCommentDots,
+  faCopy,
+  faDownload,
+  faEllipsisH,
+  faEllipsisV,
+  faEnvelope,
+  faExchangeAlt,
+  faExclamationCircle,
+  faExternalLinkAlt,
+  faFileDownload,
+  faFileVideo,
+  faFilter,
+  faFire,
+  faGlobe,
+  faHeart,
+  faHistory,
+  faInfoCircle,
+  faLanguage,
+  faList,
+  faNewspaper,
+  faPlay,
+  faQuestionCircle,
+  faRandom,
+  faRetweet,
+  faRss,
+  faSatelliteDish,
+  faSearch,
+  faShareAlt,
+  faSlidersH,
+  faSortDown,
+  faStar,
+  faStepBackward,
+  faStepForward,
+  faSync,
+  faThumbsUp,
+  faThumbtack,
+  faTimes,
+  faTimesCircle,
+  faUsers
+} from '@fortawesome/free-solid-svg-icons'
 import { faGithub } from '@fortawesome/free-brands-svg-icons/faGithub'
 import { faBitcoin } from '@fortawesome/free-brands-svg-icons/faBitcoin'
 import { faMonero } from '@fortawesome/free-brands-svg-icons/faMonero'
@@ -18,7 +66,62 @@ Vue.config.devtools = isDev
 Vue.config.performance = isDev
 Vue.config.productionTip = isDev
 
-library.add(fas, faGithub, faBitcoin, faMonero, faMastodon)
+library.add(
+  // solid icons
+  faAngleDown,
+  faArrowDown,
+  faArrowLeft,
+  faArrowRight,
+  faBars,
+  faBookmark,
+  faCheck,
+  faClone,
+  faCommentDots,
+  faCopy,
+  faDownload,
+  faEllipsisH,
+  faEllipsisV,
+  faEnvelope,
+  faExchangeAlt,
+  faExclamationCircle,
+  faExternalLinkAlt,
+  faFileDownload,
+  faFileVideo,
+  faFilter,
+  faFire,
+  faGlobe,
+  faHeart,
+  faHistory,
+  faInfoCircle,
+  faLanguage,
+  faList,
+  faNewspaper,
+  faPlay,
+  faQuestionCircle,
+  faRandom,
+  faRetweet,
+  faRss,
+  faSatelliteDish,
+  faSearch,
+  faShareAlt,
+  faSlidersH,
+  faSortDown,
+  faStar,
+  faStepBackward,
+  faStepForward,
+  faSync,
+  faThumbsUp,
+  faThumbtack,
+  faTimes,
+  faTimesCircle,
+  faUsers,
+
+  // brand icons
+  faGithub,
+  faBitcoin,
+  faMastodon,
+  faMonero
+)
 
 Vue.component('FontAwesomeIcon', FontAwesomeIcon)
 

src/renderer/views/About/About.js

@@ -22,32 +22,32 @@ export default Vue.extend({
           content: `<a href="https://github.com/FreeTubeApp/FreeTube">GitHub: FreeTubeApp/FreeTube</a><br>${this.$t('About.Licensed under the AGPLv3')} <a href="https://www.gnu.org/licenses/agpl-3.0.en.html">${this.$t('About.View License')}</a>`
         },
         {
-          icon: 'file-download',
+          icon: ['fas', 'file-download'],
           title: this.$t('About.Downloads / Changelog'),
           content: `<a href="https://github.com/FreeTubeApp/FreeTube/releases">${this.$t('About.GitHub releases')}</a>`
         },
         {
-          icon: 'question-circle',
+          icon: ['fas', 'question-circle'],
           title: this.$t('About.Help'),
           content: `<a href="https://docs.freetubeapp.io/">${this.$t('About.FreeTube Wiki')}</a> / <a href="https://docs.freetubeapp.io/faq/">${this.$t('About.FAQ')}</a>`
         },
         {
-          icon: 'exclamation-circle',
+          icon: ['fas', 'exclamation-circle'],
           title: this.$t('About.Report a problem'),
           content: `<a href="https://github.com/FreeTubeApp/FreeTube/issues">${this.$t('About.GitHub issues')}</a><br>${this.$t('About.Please check for duplicates before posting')}`
         },
         {
-          icon: 'globe',
+          icon: ['fas', 'globe'],
           title: this.$t('About.Website'),
           content: '<a href="https://freetubeapp.io/">https://freetubeapp.io/</a>'
         },
         {
-          icon: 'newspaper',
+          icon: ['fas', 'newspaper'],
           title: this.$t('About.Blog'),
           content: '<a href="https://blog.freetubeapp.io">https://blog.freetubeapp.io</a>'
         },
         {
-          icon: 'envelope',
+          icon: ['fas', 'envelope'],
           title: this.$t('About.Email'),
           content: '<a href="mailto:FreeTubeApp@protonmail.com">FreeTubeApp@protonmail.com</a>'
         },
@@ -57,22 +57,22 @@ export default Vue.extend({
           content: '<a href="https://mastodon.technology/@FreeTube">@FreeTube@mastodon.technology</a>'
         },
         {
-          icon: 'comment-dots',
+          icon: ['fas', 'comment-dots'],
           title: this.$t('About.Chat on Matrix'),
           content: `<a href="https://matrix.to/#/#freetube:matrix.org?via=matrix.org&via=privacytools.io&via=tchncs.de">#freetube:matrix.org</a><br>${this.$t('About.Please read the')} <a href="https://docs.freetubeapp.io/community/matrix/">${this.$t('About.room rules')}</a>`
         },
         {
-          icon: 'language',
+          icon: ['fas', 'language'],
           title: this.$t('About.Translate'),
           content: '<a href="https://hosted.weblate.org/engage/free-tube/">https://hosted.weblate.org/engage/free-tube/</a>'
         },
         {
-          icon: 'users',
+          icon: ['fas', 'users'],
           title: this.$t('About.Credits'),
           content: `${this.$t('About.FreeTube is made possible by')} <a href="https://docs.freetubeapp.io/credits/">${this.$t('About.these people and projects')}</a>`
         },
         {
-          icon: 'heart',
+          icon: ['fas', 'heart'],
           title: `${this.$t('About.Donate')} - Liberapay`,
           content: '<a href="https://liberapay.com/FreeTube">https://liberapay.com/FreeTube</a>'
         },

src/renderer/views/Channel/Channel.vue

@@ -192,7 +192,7 @@
           class="getNextPage"
           @click="handleFetchMore"
         >
-          <font-awesome-icon icon="search" /> {{ $t("Search Filters.Fetch more results") }}
+          <font-awesome-icon :icon="['fas', 'search']" /> {{ $t("Search Filters.Fetch more results") }}
         </div>
       </div>
     </ft-card>

src/renderer/views/Popular/Popular.vue

@@ -15,7 +15,7 @@
     </ft-card>
     <ft-icon-button
       v-if="!isLoading"
-      icon="sync"
+      :icon="['fas', 'sync']"
       class="floatingTopButton"
       :size="12"
       theme="primary"

src/renderer/views/Search/Search.vue

@@ -18,7 +18,7 @@
         class="getNextPage"
         @click="nextPage"
       >
-        <font-awesome-icon icon="search" /> {{ $t("Search Filters.Fetch more results") }}
+        <font-awesome-icon :icon="['fas', 'search']" /> {{ $t("Search Filters.Fetch more results") }}
       </div>
     </ft-card>
   </div>

src/renderer/views/Subscriptions/Subscriptions.vue

@@ -48,7 +48,7 @@
     </ft-card>
     <ft-icon-button
       v-if="!isLoading"
-      icon="sync"
+      :icon="['fas', 'sync']"
       class="floatingTopButton"
       :title="$t('Subscriptions.Refresh Subscriptions')"
       :size="12"

src/renderer/views/Trending/Trending.vue

@@ -75,7 +75,7 @@
     </ft-card>
     <ft-icon-button
       v-if="!isLoading"
-      icon="sync"
+      :icon="['fas', 'sync']"
       class="floatingTopButton"
       :size="12"
       theme="primary"

src/renderer/views/Watch/Watch.vue

@@ -47,7 +47,7 @@
             class="premiereDate"
           >
             <font-awesome-icon
-              icon="satellite-dish"
+              :icon="['fas', 'satellite-dish']"
               class="premiereIcon"
             />
             <p