refactor(icons): replace FontAwesome with Tabler Icons

Drop the three @fortawesome/* packages (v5, with a stagnant Vue 2
binding) in favor of @tabler/icons-webfont. The old <awe-icon>
wrapper is replaced by <vaquant-icon>, named after the project so
future icon-library swaps don't require another rename.

package.json

@@ -10,9 +10,7 @@
     "build-couch-design": "ts-node src/scripts/validate-doc-update.ts"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^1.2.28",
+    "@tabler/icons-webfont": "^3.30.0",
-    "@fortawesome/free-solid-svg-icons": "^5.13.0",
-    "@fortawesome/vue-fontawesome": "^0.1.9",
     "@xkeshi/vue-qrcode": "^1.0.0",
     "axios": "^0.19.2",
     "bulma": "^0.8.1",

src/components/AccountCard.vue

@@ -13,7 +13,7 @@
     >
     <span v-if="account.isPublic">
       &nbsp;
-      <awe-icon icon="users" />
+      <vaquant-icon icon="users" />
     </span>
     <div class="numeric">
       {{ totalCost | moneypad(account.mainCurrency, false) }}

src/components/AccountList.vue

@@ -8,7 +8,7 @@
       />
     </div>
     <div v-else-if="fetched">
-      <awe-icon icon="inbox" />&nbsp;Les comptes créés s'afficheront ici.
+      <vaquant-icon icon="inbox" />&nbsp;Les comptes créés s'afficheront ici.
     </div>
     <fab-button :to="{ name: 'account-new' }" :margin="true">
       <span slot="fulltext">créer un compte</span>

src/components/AccountSetting.vue

@@ -29,7 +29,7 @@
             @click="saveUsers"
             class="button is-primary is-fullwidth is-large"
           >
-            <awe-icon icon="check" />
+            <vaquant-icon icon="check" />
           </button>
         </div>
       </div>

src/components/AccountTransactionList.vue

@@ -6,7 +6,7 @@
     >
       <div class="control" v-if="filteredBy">
         <button type="submit" class="button" @click="filteredBy = ''">
-          <awe-icon icon="times" />
+          <vaquant-icon icon="x" />
         </button>
       </div>
       <div class="control">
@@ -29,13 +29,13 @@
         <thead v-if="head">
           <tr>
             <th scope="col">
-              <awe-icon icon="minus" />
+              <vaquant-icon icon="minus" />
             </th>
             <th scope="col" class="align">
-              <awe-icon icon="user" />
+              <vaquant-icon icon="user" />
             </th>
             <th scope="col" class="align">
-              <awe-icon icon="money-bill-wave" />
+              <vaquant-icon icon="cash" />
             </th>
           </tr>
         </thead>

src/components/AppResume.vue

@@ -17,7 +17,7 @@
       </div>
       <div class="column is-one-third">
         <div class="main-icon">
-          <awe-icon icon="users"></awe-icon>
+          <vaquant-icon icon="users"></vaquant-icon>
         </div>
         <p>Choisissez de rendre le compte privé ou public :</p>
         <ul>
@@ -32,7 +32,7 @@
       </div>
       <!-- <div class="column is-one-third">
         <div class="main-icon">
-          <awe-icon icon="user-lock"/>
+          <vaquant-icon icon="user-shield"/>
         </div>
         <p>
           Les informations sensibles de vos comptes et transactions sont chiffrées de bout en bout.
@@ -41,9 +41,9 @@
       </div>-->
       <div class="column is-one-third">
         <div class="main-icon">
-          <awe-icon icon="euro-sign" />&nbsp;
+          <vaquant-icon icon="currency-euro" />&nbsp;
-          <awe-icon icon="exchange-alt" />&nbsp;
+          <vaquant-icon icon="arrows-exchange" />&nbsp;
-          <awe-icon icon="dollar-sign" />
+          <vaquant-icon icon="currency-dollar" />
         </div>
         <p>
           Vaquant vous permet d'enregistrer les dépenses dans la monnaie locale
@@ -53,7 +53,7 @@
       </div>
       <div class="column is-one-third">
         <div class="main-icon">
-          <awe-icon icon="sync-alt" />
+          <vaquant-icon icon="refresh" />
         </div>
         <p>
           Vaquant se met à jour en direct. Vous recevez automatiquement les
@@ -62,7 +62,7 @@
       </div>
       <div class="column is-one-third">
         <div class="main-icon">
-          <awe-icon icon="mobile" />
+          <vaquant-icon icon="device-mobile" />
         </div>
         <p>
           Vaquant est simple, sécurisée, rapide et accessible depuis un simple
@@ -71,7 +71,7 @@
       </div>
       <div class="column is-one-third">
         <div class="main-icon">
-          <awe-icon icon="hand-holding-usd" />
+          <vaquant-icon icon="pig-money" />
         </div>
         <p>
           Vaquant propose une offre gratuite sans publicité. Si vous souhaitez

src/components/ColorPicker.vue

@@ -9,7 +9,7 @@
           :class="{ white: color.label }"
           :style="colorBackground(color)"
         >
-          <awe-icon
+          <vaquant-icon
             :style="colorStyle"
             v-if="color.value === localColor"
             icon="check"

src/components/FabButton.vue

@@ -10,7 +10,7 @@
     >
       <span class="icon is-medium">
         <slot>
-          <awe-icon icon="plus" />
+          <vaquant-icon icon="plus" />
         </slot>
       </span>
       <span class="fulltext" v-if="$slots.fulltext">
@@ -27,7 +27,7 @@
     >
       <span class="icon is-medium">
         <slot>
-          <awe-icon icon="plus" />
+          <vaquant-icon icon="plus" />
         </slot>
       </span>
       <span class="fulltext" v-if="$slots.fulltext">

src/components/PricingTable.vue

@@ -34,10 +34,10 @@
         >/mois
       </div>
       <div class="plan-items">
-        <div class="plan-item"><awe-icon icon="infinity" /> comptes</div>
+        <div class="plan-item"><vaquant-icon icon="infinity" /> comptes</div>
-        <div class="plan-item"><awe-icon icon="infinity" /> amis/compte</div>
+        <div class="plan-item"><vaquant-icon icon="infinity" /> amis/compte</div>
         <div class="plan-item">
-          <awe-icon icon="infinity" /> dépenses/compte
+          <vaquant-icon icon="infinity" /> dépenses/compte
         </div>
         <div class="plan-item">pièces jointes disponibles</div>
       </div>

src/components/TagList.vue

@@ -13,7 +13,7 @@
             class="legend-item"
           >
             <td>
-              <awe-icon :icon="categories[slice.key || ''].tag.icon" />
+              <vaquant-icon :icon="categories[slice.key || ''].tag.icon" />
             </td>
             <td class="legend-label">{{ slice.label }}</td>
             <td class="percent-label numeric">
@@ -27,7 +27,7 @@
       <div class="field has-addons has-addons-centered is-narrow">
         <div class="control" v-if="filterCategory">
           <button type="submit" class="button" @click="filterCategory = ''">
-            <awe-icon icon="times" />
+            <vaquant-icon icon="x" />
           </button>
         </div>
         <div class="control">
@@ -50,7 +50,7 @@
           <div class="columns clear-margin category-list">
             <div class="column is-2 tag-element account-color">
               <div class="icon-container">
-                <awe-icon :icon="category.tag.icon" />
+                <vaquant-icon :icon="category.tag.icon" />
               </div>
             </div>
             <div

src/components/TransactionCreate.vue

@@ -220,7 +220,7 @@
       :margin="true"
       :button-style="backgroundColor"
     >
-      <awe-icon icon="check" />
+      <vaquant-icon icon="check" />
     </fab-button>
   </div>
 </template>

src/components/TransactionSplit.vue

@@ -17,12 +17,12 @@
         <div class="field has-addons">
           <div class="control">
             <a @click="plus" class="button is-primary">
-              <awe-icon icon="plus" />
+              <vaquant-icon icon="plus" />
             </a>
           </div>
           <div class="control">
             <a @click="minus" class="button is-warning">
-              <awe-icon icon="minus" />
+              <vaquant-icon icon="minus" />
             </a>
           </div>
         </div>

src/components/TransactionTagUpdate.vue

@@ -17,7 +17,7 @@
             </select>
           </span>
           <span class="icon is-small is-left" v-if="transactionTagLabel[tag]">
-            <awe-icon :icon="transactionTagLabel[tag].icon" />
+            <vaquant-icon :icon="transactionTagLabel[tag].icon" />
           </span>
         </p>
       </div>

src/components/UserNew.vue

@@ -41,7 +41,7 @@
     </div>
     <div class="column is-1" v-if="!isMainUser">
       <button class="button is-danger" @click="$emit('remove')">
-        <awe-icon icon="trash" />
+        <vaquant-icon icon="trash" />
       </button>
     </div>
   </div>

src/enums/TransactionTag.ts

@@ -35,11 +35,11 @@ export const TransactionTagLabel: ITagAllLabel = {
   },
   [TransactionTag.Food]: {
     label: 'Restaurant',
-    icon: 'utensils'
+    icon: 'tools-kitchen-2'
   },
   [TransactionTag.Transport]: {
     label: 'Transport',
-    icon: 'subway'
+    icon: 'train'
   },
   [TransactionTag.Housing]: {
     label: 'Logement',
@@ -47,7 +47,7 @@ export const TransactionTagLabel: ITagAllLabel = {
   },
   [TransactionTag.Shopping]: {
     label: 'Courses',
-    icon: 'shopping-basket'
+    icon: 'shopping-cart'
   },
   [TransactionTag.Gift]: {
     label: 'Cadeau',
@@ -55,10 +55,10 @@ export const TransactionTagLabel: ITagAllLabel = {
   },
   [TransactionTag.Entertainment]: {
     label: 'Divertissement',
-    icon: 'theater-masks'
+    icon: 'masks-theater'
   },
   [TransactionTag.Tax]: {
     label: 'Impôt',
-    icon: 'hand-holding-usd'
+    icon: 'pig-money'
   }
 }

src/shims-vue.d.ts

@@ -2,7 +2,6 @@ declare module '*.vue' {
   import Vue from 'vue'
   export default Vue
 }
-declare module '@fortawesome/vue-fontawesome'
 declare module 'vue-click-outside'
 declare module 'lightness'
 declare module 'crypto-js/aes'

src/utils/icons.ts

@@ -1,82 +1,15 @@
 import Vue from 'vue'
-import { library } from '@fortawesome/fontawesome-svg-core'
+import '@tabler/icons-webfont/dist/tabler-icons.min.css'
-import {
-  faBalanceScale,
-  faBeer,
-  faCheck,
-  faChevronDown,
-  faChevronRight,
-  faCog,
-  faCircle,
-  faClock,
-  faToriiGate,
-  faUtensils,
-  faSubway,
-  faHome,
-  faGift,
-  faDollarSign,
-  faEuroSign,
-  faInbox,
-  faExchangeAlt,
-  faEquals,
-  faGlobeEurope,
-  faMinus,
-  faInfinity,
-  faHandHoldingUsd,
-  faShoppingBasket,
-  faMobile,
-  faMoneyBillWave,
-  faPenSquare,
-  faPlus,
-  faTag,
-  faSignal,
-  faSyncAlt,
-  faUser,
-  faUsers,
-  faUserLock,
-  faTimes,
-  faTheaterMasks,
-  faTrash
-} from '@fortawesome/free-solid-svg-icons'
-import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 
-library.add(
+Vue.component('vaquant-icon', {
-  faBalanceScale,
+  functional: true,
-  faBeer,
+  props: {
-  faCheck,
+    icon: { type: String, required: true }
-  faChevronDown,
+  },
-  faChevronRight,
+  render(h, { props, data }) {
-  faCog,
+    return h('i', {
-  faCircle,
+      ...data,
-  faClock,
+      class: [`ti ti-${props.icon}`, data.class, data.staticClass]
-  faToriiGate,
+    })
-  faUtensils,
+  }
-  faSubway,
+})
-  faHome,
-  faGift,
-  faDollarSign,
-  faEuroSign,
-  faExchangeAlt,
-  faEquals,
-  faGlobeEurope,
-  faInbox,
-  faMinus,
-  faInfinity,
-  faHandHoldingUsd,
-  faShoppingBasket,
-  faMobile,
-  faMoneyBillWave,
-  faPenSquare,
-  faPlus,
-  faTag,
-  faTrash,
-  faSignal,
-  faSyncAlt,
-  faUser,
-  faUsers,
-  faUserLock,
-  faTimes,
-  faTheaterMasks
-)
-
-Vue.component('awe-icon', FontAwesomeIcon)

src/views/accounts/AccountItem.vue

@@ -48,7 +48,7 @@
               href="#"
               @click.prevent="toggleTab('transaction')"
             >
-              <awe-icon icon="dollar-sign" />
+              <vaquant-icon icon="currency-dollar" />
             </a>
           </li>
           <li v-if="transactions.length && locations.length">
@@ -57,7 +57,7 @@
               href="#"
               @click.prevent="toggleTab('location')"
             >
-              <awe-icon icon="globe-europe" />
+              <vaquant-icon icon="world" />
             </a>
           </li>
           <li v-if="transactions.length && tagCount > 1">
@@ -66,7 +66,7 @@
               href="#"
               @click.prevent="toggleTab('tag')"
             >
-              <awe-icon icon="tag" />
+              <vaquant-icon icon="tag" />
             </a>
           </li>
           <li v-if="transactions.length && isMultiUser">
@@ -75,7 +75,7 @@
               href="#"
               @click.prevent="toggleTab('balance')"
             >
-              <awe-icon icon="balance-scale" />
+              <vaquant-icon icon="scale" />
             </a>
           </li>
           <li v-if="isAdmin">
@@ -84,7 +84,7 @@
               href="#"
               @click.prevent="toggleTab('settings')"
             >
-              <awe-icon icon="cog" />
+              <vaquant-icon icon="settings" />
             </a>
           </li>
         </ul>
@@ -155,7 +155,7 @@
       :button-style="backgroundColor"
       :margin="true"
     >
-      <awe-icon icon="money-bill-wave" />
+      <vaquant-icon icon="cash" />
       <span slot="fulltext">dépense</span>
     </fab-button>
   </section>

src/views/accounts/AccountNew.vue

@@ -70,9 +70,9 @@
         <div class="column is-two-thirds">
           <h3 class="subtitle is-3 title-currency" @click="toggleCurrencyShow">
             <div class="icon-container">
-              <awe-icon
+              <vaquant-icon
                 icon="chevron-right"
-                :rotation="currencyShow ? 90 : undefined"
+                :class="{ rotated: currencyShow }"
               />
             </div>
             {{
@@ -114,7 +114,7 @@
       <div class="columns is-centered">
         <div class="column is-two-thirds">
           <button type="submit" class="button is-primary is-fullwidth is-large">
-            <awe-icon icon="check" />
+            <vaquant-icon icon="check" />
           </button>
         </div>
       </div>
@@ -274,8 +274,13 @@ h3 {
 .icon-container {
   float: left;
 
-  svg {
+  .ti {
+    display: inline-block;
     transition: transform 0.3s cubic-bezier(0.55, 0, 0.1, 1);
+
+    &.rotated {
+      transform: rotate(90deg);
+    }
   }
 }
 .title-currency {

yarn.lock

@@ -804,30 +804,6 @@
     exec-sh "^0.3.2"
     minimist "^1.2.0"
 
-"@fortawesome/fontawesome-common-types@^0.2.28":
-  version "0.2.28"
-  resolved "https://npm.fontawesome.com/@fortawesome/fontawesome-common-types/-/0.2.28/fontawesome-common-types-0.2.28.tgz#1091bdfe63b3f139441e9cba27aa022bff97d8b2"
-  integrity sha512-gtis2/5yLdfI6n0ia0jH7NJs5i/Z/8M/ZbQL6jXQhCthEOe5Cr5NcQPhgTvFxNOtURE03/ZqUcEskdn2M+QaBg==
-
-"@fortawesome/fontawesome-svg-core@^1.2.28":
-  version "1.2.28"
-  resolved "https://npm.fontawesome.com/@fortawesome/fontawesome-svg-core/-/1.2.28/fontawesome-svg-core-1.2.28.tgz#e5b8c8814ef375f01f5d7c132d3c3a2f83a3abf9"
-  integrity sha512-4LeaNHWvrneoU0i8b5RTOJHKx7E+y7jYejplR7uSVB34+mp3Veg7cbKk7NBCLiI4TyoWS1wh9ZdoyLJR8wSAdg==
-  dependencies:
-    "@fortawesome/fontawesome-common-types" "^0.2.28"
-
-"@fortawesome/free-solid-svg-icons@^5.13.0":
-  version "5.13.0"
-  resolved "https://npm.fontawesome.com/@fortawesome/free-solid-svg-icons/-/5.13.0/free-solid-svg-icons-5.13.0.tgz#44d9118668ad96b4fd5c9434a43efc5903525739"
-  integrity sha512-IHUgDJdomv6YtG4p3zl1B5wWf9ffinHIvebqQOmV3U+3SLw4fC+LUCCgwfETkbTtjy5/Qws2VoVf6z/ETQpFpg==
-  dependencies:
-    "@fortawesome/fontawesome-common-types" "^0.2.28"
-
-"@fortawesome/vue-fontawesome@^0.1.9":
-  version "0.1.9"
-  resolved "https://npm.fontawesome.com/@fortawesome/vue-fontawesome/-/0.1.9/vue-fontawesome-0.1.9.tgz#d3af6d4e50f337327de90447fe35fa1e117a2fbe"
-  integrity sha512-h/emhmZz+DfB2zOGLWawNwXq82UYhn9waTfUjLLmeaIqtnIyNt6kYlpQT/vzJjLZRDRvY2IEJAh1di5qKpKVpA==
-
 "@hapi/address@2.x.x":
   version "2.1.4"
   resolved "https://registry.yarnpkg.com/@hapi/address/-/address-2.1.4.tgz#5d67ed43f3fd41a69d4b9ff7b56e7c0d1d0a81e5"