fix(ui): move all font-awesome imports to index.ts

src/panel/components/button.vue

@@ -9,7 +9,7 @@
         {{ text }}
       </div>
       <div class="btn-icon" v-if="icon">
-        <font-awesome-icon :icon="icon" fixed-width></font-awesome-icon>
+        <fa :icon="icon" fixed-width></fa>
       </div>
     </div>
   </a>
@@ -20,7 +20,7 @@
         {{ text }}
       </div>
       <div class="btn-icon" v-if="icon">
-        <font-awesome-icon :icon="icon" fixed-width></font-awesome-icon>
+        <fa :icon="icon" fixed-width></fa>
       </div>
     </div>
   </button>
@@ -29,17 +29,8 @@
 <script lang="ts">
   import Vue from 'vue'
 
-  import { library } from '@fortawesome/fontawesome-svg-core'
-  import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-  import { faLink, faEdit } from '@fortawesome/free-solid-svg-icons';
-
-  library.add(faLink, faEdit)
-
   export default Vue.extend({
     props: ['text', 'href', 'icon', 'target'],
-    components: {
-      'font-awesome-icon': FontAwesomeIcon,
-    }
   })
 </script>
 

src/panel/components/holdButton.vue

@@ -10,7 +10,7 @@
         </template>
       </div>
       <div class="btn-icon" :style="{opacity: 1 - this.percentage / 100 }">
-        <font-awesome-icon :icon="icon" fixed-width></font-awesome-icon>
+        <fa :icon="icon" fixed-width></fa>
       </div>
     </div>
   </button>
@@ -19,17 +19,8 @@
 <script lang="ts">
 import Vue from 'vue';
 
-import { library } from '@fortawesome/fontawesome-svg-core';
-import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
-import { faTrash, faEraser } from '@fortawesome/free-solid-svg-icons';
-
-library.add(faTrash, faEraser)
-
 export default Vue.extend({
-props: ['ttc', 'icon'],
-  components: {
-    'font-awesome-icon': FontAwesomeIcon
-  },
+  props: ['ttc', 'icon'],
   data: function () {
     const data: {
       onMouseDownStarted: number,

src/panel/components/panel.vue

@@ -16,12 +16,12 @@
             </div>
             <div class="btn-icon" v-if="button.icon">
               <template v-if="typeof button.state !== 'undefined' && state[button.state] === 1">
-                <font-awesome-icon icon="circle-notch" spin fixed-width></font-awesome-icon>
+                <fa icon="circle-notch" spin fixed-width></fa>
               </template>
               <template v-else-if="typeof button.state !== 'undefined' && state[button.state] === 2">
-                <font-awesome-icon icon="check" fixed-width></font-awesome-icon>
+                <fa icon="check" fixed-width></fa>
               </template>
-              <font-awesome-icon v-else :icon="button.icon" fixed-width></font-awesome-icon>
+              <fa v-else :icon="button.icon" fixed-width></fa>
             </div>
           </a>
         </div>
@@ -36,12 +36,12 @@
             </div>
             <div class="btn-icon" v-if="button.icon">
               <template v-if="typeof button.state !== 'undefined' && state[button.state] === 1">
-                <font-awesome-icon icon="circle-notch" spin fixed-width></font-awesome-icon>
+                <fa icon="circle-notch" spin fixed-width></fa>
               </template>
               <template v-else-if="typeof button.state !== 'undefined' && state[button.state] === 2">
-                <font-awesome-icon icon="check" fixed-width></font-awesome-icon>
+                <fa icon="check" fixed-width></fa>
               </template>
-              <font-awesome-icon v-else :icon="button.icon" fixed-width></font-awesome-icon>
+              <fa v-else :icon="button.icon" fixed-width></fa>
             </div>
           </a>
           <button type="button" class="btn btn-shrink btn-with-icon" style="flex-direction: row;"
@@ -57,32 +57,32 @@
             </div>
             <div class="btn-icon" v-if="button.icon">
               <template v-if="typeof button.state !== 'undefined' && state[button.state] === 1">
-                <font-awesome-icon icon="circle-notch" spin fixed-width></font-awesome-icon>
+                <fa icon="circle-notch" spin fixed-width></fa>
               </template>
               <template v-else-if="typeof button.state !== 'undefined' && state[button.state] === 2">
-                <font-awesome-icon icon="check" fixed-width></font-awesome-icon>
+                <fa icon="check" fixed-width></fa>
               </template>
-              <font-awesome-icon v-else :icon="button.icon" fixed-width></font-awesome-icon>
+              <fa v-else :icon="button.icon" fixed-width></fa>
             </div>
           </button>
         </div>
       </template>
       <div class="ml-2 d-inline-block" v-if="!opts.hideCardsButton" >
         <button class="btn btn-shrink btn-with-icon p-0" style="flex-direction: row;" v-on:click="showAs='cards'" v-bind:class="[ showAs === 'cards' ? 'btn-dark' : 'btn-outline-dark' ]">
           <div class="btn-icon">
-            <font-awesome-icon icon="th-large" fixed-width></font-awesome-icon>
+            <fa icon="th-large" fixed-width></fa>
           </div>
         </button>
       </div>
       <div class="ml-2 d-inline-block" v-if="!opts.hideTableButton" >
         <button class="btn btn-shrink btn-with-icon p-0" style="flex-direction: row;" v-on:click="showAs='table'" v-bind:class="[ showAs === 'table' ? 'btn-dark' : 'btn-outline-dark' ]">
           <div class="btn-icon">
-            <font-awesome-icon icon="th-list" fixed-width></font-awesome-icon>
+            <fa icon="th-list" fixed-width></fa>
           </div>
         </button>
       </div>
       <div class="ml-2 d-inline-block" v-if="!opts.hideSearchInput">
-        <font-awesome-icon icon="search" class="text-muted" style="position: relative; left: 2.2rem;" fixed-width></font-awesome-icon>
+        <fa icon="search" class="text-muted" style="position: relative; left: 2.2rem;" fixed-width></fa>
         <input type="search" class="form-control w-auto pl-5" v-model="search" placeholder="Search...">
       </div>
     </div>
@@ -92,16 +92,9 @@
 <script lang="ts">
   import Vue from 'vue'
 
-  import { library } from '@fortawesome/fontawesome-svg-core'
-  import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-  import { faPlus, faCaretLeft, faExternalLinkAlt, faLink, faSave, faThLarge, faThList, faSearch, faCircleNotch, faCheck } from '@fortawesome/free-solid-svg-icons';
-
-  library.add(faPlus, faCaretLeft, faExternalLinkAlt, faLink, faSave, faThLarge, faThList, faSearch, faCircleNotch, faCheck)
-
   export default Vue.extend({
     props: ['commons', 'options', 'state'],
     components: {
-      'font-awesome-icon': FontAwesomeIcon,
       holdButton: () => import('./holdButton.vue'),
     },
     data: function () {

src/panel/index.ts

@@ -1,18 +1,36 @@
 /* globals translations token */
-
 import './others/checklist';
 import './widgets/dashboard';
 import './widgets/popout';
 
+import * as _ from 'lodash';
 import Vue from 'vue';
 import VueRouter from 'vue-router';
 
-import * as _ from 'lodash';
+import { library } from '@fortawesome/fontawesome-svg-core';
+import { faSpotify, faTwitch, faTwitter } from '@fortawesome/free-brands-svg-icons';
+import {
+    faCalendar, faCheckCircle, faCircle, faClock, faComments, faEyeSlash, faMoneyBillAlt,
+} from '@fortawesome/free-regular-svg-icons';
+import {
+    faAngleDown, faAngleRight, faAngleUp, faBan, faBoxOpen, faBullhorn, faCaretLeft, faCheck,
+    faCircleNotch, faClone, faCode, faCog, faCoins, faCommentAlt, faDollarSign, faDownload, faEdit,
+    faEraser, faExclamation, faExternalLinkAlt, faEye, faFont, faForward, faGem, faGift,
+    faHandPointer, faHeadphones, faHeart, faInfinity, faLink, faList, faLock, faLockOpen,
+    faLongArrowAltRight, faMinus, faMusic, faPause, faPlay, faPlus, faPlusSquare, faRandom, faSave,
+    faSearch, faSignInAlt, faSignOutAlt, faSpinner, faStar, faStarHalf, faStop, faSync, faSyncAlt,
+    faTerminal, faTh, faThLarge, faThList, faTimes, faTrash, faTrashAlt, faTrophy, faUser, faUsers,
+    faVolumeDown, faVolumeUp,
+} from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 
 import isAvailableVariable from './helpers/isAvailableVariable';
 import translate from './helpers/translate';
 import urlParam from './helpers/urlParam';
 
+library.add(faBan, faPlusSquare, faMusic, faList, faPlay, faPause, faForward, faSpotify, faMoneyBillAlt, faComments, faPlus, faSpinner, faTimes, faGift, faHeadphones, faTh, faDollarSign, faSignInAlt, faSignOutAlt, faUsers, faMusic, faCalendar, faTwitter, faList, faCheck, faMusic, faMusic, faVolumeUp, faVolumeDown, faUsers, faGift, faTrophy, faCog, faExternalLinkAlt, faTrash, faPlus, faTimes, faSync, faComments, faEyeSlash, faTwitch, faCircle, faCheckCircle, faLock, faUsers, faUser, faCheck, faTimes, faHeart, faStar, faLockOpen, faHandPointer, faRandom, faEyeSlash, faSignOutAlt, faSignInAlt, faBoxOpen, faEye, faCog, faExternalLinkAlt, faHeart, faBullhorn, faRandom, faGem, faStar, faGift, faDollarSign, faStarHalf, faLongArrowAltRight, faCircleNotch, faCalendar, faDollarSign, faCog, faCode, faAngleUp, faTrashAlt, faAngleDown, faFont, faPlus, faMinus, faDownload, faDollarSign, faTerminal, faCog, faCommentAlt, faUsers, faExternalLinkAlt, faSyncAlt, faClock, faCog, faInfinity, faTrophy, faClone, faGem, faCoins, faExclamation, faStop, faBan, faSpinner, faCheck, faAngleRight, faPlus, faEdit, faEraser, faLink, faTrash, faPlus, faCaretLeft, faExternalLinkAlt, faLink, faSave, faThLarge, faThList, faSearch, faCircleNotch, faCheck);
+Vue.component('fa', FontAwesomeIcon);
+
 export interface Global {
   translations: any;
   configuration: any;

src/panel/views/managers/polls.vue

@@ -20,7 +20,7 @@
           <template v-if="vote === 'new'">
             <div v-if="isRunning" class="card mb-3 p-0 text-dark" style="flex-direction: inherit;" v-bind:key="String(vote)">
               <h6 style="margin: auto; line-height: initial; text-align: center;" class="text-dark p-3">
-                <font-awesome-icon icon='ban' size="10x" class="text-danger pb-2"></font-awesome-icon> <br>
+                <fa icon='ban' size="10x" class="text-danger pb-2"></fa> <br>
                 {{ translate('systems.polls.cannotCreateNewVoteIfInProgress') }}
               </h6>
             </div>
@@ -29,13 +29,13 @@
                 <input type="text" style="background-color: transparent; text-transform: inherit; font-size: 1.25rem; position: relative; top: -0.48rem;" class="border-left-0 border-right-0 border-top-0 form-control card-title mb-0" :placeholder="translate('systems.polls.title')" v-model="newVote.title">
                 <h6 class="card-subtitle mb-2 text-muted">
                   <template v-if="newVote.type === 'normal'">
-                    <font-awesome-icon icon='exclamation'></font-awesome-icon> {{ translate('systems.polls.votingBy') }}
+                    <fa icon='exclamation'></fa> {{ translate('systems.polls.votingBy') }}
                   </template>
                   <template v-if="newVote.type === 'tips'">
-                    <font-awesome-icon icon='coins'></font-awesome-icon> {{ translate('systems.polls.votingBy') }}
+                    <fa icon='coins'></fa> {{ translate('systems.polls.votingBy') }}
                   </template>
                   <template v-if="newVote.type === 'bits'">
-                    <font-awesome-icon icon='gem'></font-awesome-icon> {{ translate('systems.polls.votingBy') }}
+                    <fa icon='gem'></fa> {{ translate('systems.polls.votingBy') }}
                   </template>
                   <select v-model="newVote.type" class="text-muted border-left-0 border-right-0 border-top-0" style="background-color: transparent;font-size: .9rem; text-transform: uppercase; font-weight: bold;">
                     <option value="normal">{{ translate('systems.polls.command') }}</option>
@@ -57,7 +57,7 @@
 
               <div class="card-footer">
                 <button type="button" class="btn btn-block btn-success" style="white-space: normal;" :disabled="!atLeastTwoOptions || newVote.title.trim().length === 0" @click="create()">
-                  <font-awesome-icon icon='plus'></font-awesome-icon>
+                  <fa icon='plus'></fa>
                   <template v-if="newVote.title.trim().length === 0">
                     {{ translate('systems.polls.cannotCreateWithoutTitle')}}
                   </template>
@@ -73,24 +73,24 @@
           </template>
           <div class="card mb-3 p-0 border" v-else v-bind:key="String(vote._id)" :class="[vote.isOpened ? 'border-info' : '']">
             <div class="text-info current" v-if="vote.isOpened">
-              <font-awesome-icon icon="spinner" spin />
+              <fa icon="spinner" spin />
                 {{ translate('systems.polls.running') }}
             </div>
             <div class="text-success current" v-else>
-              <font-awesome-icon icon="check" />
+              <fa icon="check" />
                 {{ translate('systems.polls.done') }}
             </div>
             <div class="card-body">
               <h5 class="card-title" style="text-transform: inherit;">{{ vote.title }}</h5>
               <h6 class="card-subtitle mb-2 text-muted">
                 <template v-if="vote.type === 'normal'">
-                  <font-awesome-icon icon='exclamation'></font-awesome-icon> {{ translate('systems.polls.votingBy') }} {{ translate('systems.polls.command') }}
+                  <fa icon='exclamation'></fa> {{ translate('systems.polls.votingBy') }} {{ translate('systems.polls.command') }}
                 </template>
                 <template v-if="vote.type === 'tips'">
-                  <font-awesome-icon icon='coins'></font-awesome-icon> {{ translate('systems.polls.votingBy') }} {{ translate('systems.polls.tips') }}
+                  <fa icon='coins'></fa> {{ translate('systems.polls.votingBy') }} {{ translate('systems.polls.tips') }}
                 </template>
                 <template v-if="vote.type === 'bits'">
-                  <font-awesome-icon icon='gem'></font-awesome-icon> {{ translate('systems.polls.votingBy') }} {{ translate('systems.polls.bits') }}
+                  <fa icon='gem'></fa> {{ translate('systems.polls.votingBy') }} {{ translate('systems.polls.bits') }}
                 </template>
               </h6>
 
@@ -129,12 +129,12 @@
             <div class="card-footer">
               <template v-if="vote.isOpened">
                 <button type="button" class="btn btn-block btn-danger" @click="stop(String(vote._id))">
-                  <font-awesome-icon icon='stop'></font-awesome-icon> {{ translate('systems.polls.stop') }}
+                  <fa icon='stop'></fa> {{ translate('systems.polls.stop') }}
                 </button>
               </template>
               <template v-else>
                 <button type="button" class="btn btn-block btn-info" style="white-space: normal;" :disabled="isRunning" @click="copy(String(vote._id))">
-                  <font-awesome-icon icon='clone'></font-awesome-icon>
+                  <fa icon='clone'></fa>
                   <template v-if="isRunning">{{ translate('systems.polls.cannotCopyIfInProgress') }}</template>
                   <template v-else>{{ translate('systems.polls.copy') }}</template>
                 </button>
@@ -164,20 +164,13 @@
 
   import * as io from 'socket.io-client';
 
-  import { library } from '@fortawesome/fontawesome-svg-core'
-  import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-  import { faTrophy, faClone, faGem, faCoins, faExclamation, faStop, faBan, faSpinner, faCheck, faAngleRight, faPlus } from '@fortawesome/free-solid-svg-icons';
-
-  library.add(faTrophy, faClone, faGem, faCoins, faExclamation, faStop, faBan, faSpinner, faCheck, faAngleRight, faPlus)
-
   Vue.use(VueMoment, {
       moment, momentTimezone
   })
 
   export default Vue.extend({
     components: {
       panel: () => import('../../components/panel.vue'),
-      'font-awesome-icon': FontAwesomeIcon
     },
     data: function () {
       const object: {

src/panel/views/registries/goalsEdit.vue

@@ -140,7 +140,7 @@
                     </template>
                   </button>
                   <button type="button" @click="addGoal" class="border-0 list-group-item list-group-item-dark" tabindex="-1" aria-disabled="true">
-                    <font-awesome-icon icon="plus" fixed-width></font-awesome-icon> {{translate('registry.goals.addGoal')}}
+                    <fa icon="plus" fixed-width></fa> {{translate('registry.goals.addGoal')}}
                   </button>
                 </div>
               </div>
@@ -357,17 +357,10 @@ import * as io from 'socket.io-client';
 import * as uuid from 'uuid/v4';
 import axios from 'axios';
 
-import { library } from '@fortawesome/fontawesome-svg-core';
-import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
-import { faPlus } from '@fortawesome/free-solid-svg-icons';
-
-library.add(faPlus)
-
 export default Vue.extend({
   components: {
     panel: () => import('../../components/panel.vue'),
     holdButton: () => import('../../components/holdButton.vue'),
-    'font-awesome-icon': FontAwesomeIcon,
     datetime: Datetime,
     codemirror
   },

src/panel/views/registries/goalsList.vue

@@ -57,7 +57,7 @@
 
                 <dt class="col-6">{{translate('registry.goals.input.endAfter.title')}}</dt>
                 <dd class="col-6">
-                  <font-awesome-icon icon="infinity" fixed-width v-if="goal.endAfterIgnore"></font-awesome-icon>
+                  <fa icon="infinity" fixed-width v-if="goal.endAfterIgnore"></fa>
                   <template v-else>{{goal.endAfter}}</template>
                 </dd>
               </dl>
@@ -98,17 +98,10 @@
 
   import * as io from 'socket.io-client';
 
-  import { library } from '@fortawesome/fontawesome-svg-core'
-  import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-  import { faInfinity } from '@fortawesome/free-solid-svg-icons';
-
-  library.add(faInfinity)
-
   export default Vue.extend({
     components: {
       panel: () => import('../../components/panel.vue'),
       holdButton: () => import('../../components/holdButton.vue'),
-      'font-awesome-icon': FontAwesomeIcon,
       'button-with-icon': () => import('../../components/button.vue'),
     },
     data: function () {

src/panel/widgets/components/bets.vue

@@ -5,13 +5,13 @@
       <li role="presentation" class="nav-item">
         <a class="nav-link active" href="#bets-running" aria-controls="home" role="tab" data-toggle="tab" title="Betting">
           {{ title }}
-          <font-awesome-icon :icon='["far", "clock"]'></font-awesome-icon>
+          <fa :icon='["far", "clock"]'></fa>
           <template v-if="timer !== null">{{ timer | formatTime }}</template>
         </a>
       </li>
       <li role="presentation" class="nav-item">
         <a class="nav-link" href="#bets-settings" aria-controls="home" role="tab" data-toggle="tab" title="Settings">
-          <font-awesome-icon icon='cog'></font-awesome-icon>
+          <fa icon='cog'></fa>
         </a>
       </li>
       <li class="nav-item ml-auto">
@@ -65,21 +65,11 @@
 </template>
 
 <script>
-import { library } from '@fortawesome/fontawesome-svg-core'
-import { faClock } from '@fortawesome/free-regular-svg-icons'
-import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-import { faCog } from '@fortawesome/free-solid-svg-icons';
-
-library.add(faClock, faCog)
-
 export default {
   props: ['commons', 'token'],
   mounted: function () {
     this.$emit('mounted')
   },
-  components: {
-    'font-awesome-icon': FontAwesomeIcon
-  },
   data: function () {
     return {
       socket: io('/systems/bets', {query: "token=" + this.token}),