From 639429e18b7e2a1bba4966cb1b99f59803a834c2 Mon Sep 17 00:00:00 2001 From: Julien Calixte Date: Mon, 1 Jun 2026 18:33:58 +0200 Subject: [PATCH] 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 wrapper is replaced by , named after the project so future icon-library swaps don't require another rename. --- package.json | 4 +- src/components/AccountCard.vue | 2 +- src/components/AccountList.vue | 2 +- src/components/AccountSetting.vue | 2 +- src/components/AccountTransactionList.vue | 8 +- src/components/AppResume.vue | 16 ++-- src/components/ColorPicker.vue | 2 +- src/components/FabButton.vue | 4 +- src/components/PricingTable.vue | 6 +- src/components/TagList.vue | 6 +- src/components/TransactionCreate.vue | 2 +- src/components/TransactionSplit.vue | 4 +- src/components/TransactionTagUpdate.vue | 2 +- src/components/UserNew.vue | 2 +- src/enums/TransactionTag.ts | 10 +-- src/shims-vue.d.ts | 1 - src/utils/icons.ts | 93 ++++------------------- src/views/accounts/AccountItem.vue | 12 +-- src/views/accounts/AccountNew.vue | 13 +++- yarn.lock | 24 ------ 20 files changed, 63 insertions(+), 152 deletions(-) diff --git a/package.json b/package.json index f075670..2b7a7a7 100644 --- a/package.json +++ b/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", - "@fortawesome/free-solid-svg-icons": "^5.13.0", - "@fortawesome/vue-fontawesome": "^0.1.9", + "@tabler/icons-webfont": "^3.30.0", "@xkeshi/vue-qrcode": "^1.0.0", "axios": "^0.19.2", "bulma": "^0.8.1", diff --git a/src/components/AccountCard.vue b/src/components/AccountCard.vue index a518871..b2b2c5f 100644 --- a/src/components/AccountCard.vue +++ b/src/components/AccountCard.vue @@ -13,7 +13,7 @@ >   - +
{{ totalCost | moneypad(account.mainCurrency, false) }} diff --git a/src/components/AccountList.vue b/src/components/AccountList.vue index fd3d103..88ab218 100644 --- a/src/components/AccountList.vue +++ b/src/components/AccountList.vue @@ -8,7 +8,7 @@ />
-  Les comptes créés s'afficheront ici. +  Les comptes créés s'afficheront ici.
créer un compte diff --git a/src/components/AccountSetting.vue b/src/components/AccountSetting.vue index 54c90c6..a8afd28 100644 --- a/src/components/AccountSetting.vue +++ b/src/components/AccountSetting.vue @@ -29,7 +29,7 @@ @click="saveUsers" class="button is-primary is-fullwidth is-large" > - + diff --git a/src/components/AccountTransactionList.vue b/src/components/AccountTransactionList.vue index 9b746c3..db930e6 100644 --- a/src/components/AccountTransactionList.vue +++ b/src/components/AccountTransactionList.vue @@ -6,7 +6,7 @@ >
@@ -29,13 +29,13 @@ - + - + - + diff --git a/src/components/AppResume.vue b/src/components/AppResume.vue index c19fd81..eb68346 100644 --- a/src/components/AppResume.vue +++ b/src/components/AppResume.vue @@ -17,7 +17,7 @@
- +

Choisissez de rendre le compte privé ou public :

    @@ -32,7 +32,7 @@
-   -   - +   +   +

Vaquant vous permet d'enregistrer les dépenses dans la monnaie locale @@ -53,7 +53,7 @@

- +

Vaquant se met à jour en direct. Vous recevez automatiquement les @@ -62,7 +62,7 @@

- +

Vaquant est simple, sécurisée, rapide et accessible depuis un simple @@ -71,7 +71,7 @@

- +

Vaquant propose une offre gratuite sans publicité. Si vous souhaitez diff --git a/src/components/ColorPicker.vue b/src/components/ColorPicker.vue index 7c74a92..dcce19c 100644 --- a/src/components/ColorPicker.vue +++ b/src/components/ColorPicker.vue @@ -9,7 +9,7 @@ :class="{ white: color.label }" :style="colorBackground(color)" > - - + @@ -27,7 +27,7 @@ > - + diff --git a/src/components/PricingTable.vue b/src/components/PricingTable.vue index c5eb298..210f232 100644 --- a/src/components/PricingTable.vue +++ b/src/components/PricingTable.vue @@ -34,10 +34,10 @@ >/mois

-
comptes
-
amis/compte
+
comptes
+
amis/compte
- dépenses/compte + dépenses/compte
pièces jointes disponibles
diff --git a/src/components/TagList.vue b/src/components/TagList.vue index da652a1..cc10cc8 100644 --- a/src/components/TagList.vue +++ b/src/components/TagList.vue @@ -13,7 +13,7 @@ class="legend-item" > - + {{ slice.label }} @@ -27,7 +27,7 @@
@@ -50,7 +50,7 @@
- +
diff --git a/src/components/TransactionSplit.vue b/src/components/TransactionSplit.vue index cc48b02..5b9a9d2 100644 --- a/src/components/TransactionSplit.vue +++ b/src/components/TransactionSplit.vue @@ -17,12 +17,12 @@
- +
- +
diff --git a/src/components/TransactionTagUpdate.vue b/src/components/TransactionTagUpdate.vue index 73373cf..04debf8 100644 --- a/src/components/TransactionTagUpdate.vue +++ b/src/components/TransactionTagUpdate.vue @@ -17,7 +17,7 @@ - +

diff --git a/src/components/UserNew.vue b/src/components/UserNew.vue index 92ec65f..533e96f 100644 --- a/src/components/UserNew.vue +++ b/src/components/UserNew.vue @@ -41,7 +41,7 @@
diff --git a/src/enums/TransactionTag.ts b/src/enums/TransactionTag.ts index 7c520e7..f83afc4 100644 --- a/src/enums/TransactionTag.ts +++ b/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' } } diff --git a/src/shims-vue.d.ts b/src/shims-vue.d.ts index 68257f9..9da0fb4 100644 --- a/src/shims-vue.d.ts +++ b/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' diff --git a/src/utils/icons.ts b/src/utils/icons.ts index f07ea11..935d7dd 100644 --- a/src/utils/icons.ts +++ b/src/utils/icons.ts @@ -1,82 +1,15 @@ import Vue from 'vue' -import { library } from '@fortawesome/fontawesome-svg-core' -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' +import '@tabler/icons-webfont/dist/tabler-icons.min.css' -library.add( - faBalanceScale, - faBeer, - faCheck, - faChevronDown, - faChevronRight, - faCog, - faCircle, - faClock, - 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) +Vue.component('vaquant-icon', { + functional: true, + props: { + icon: { type: String, required: true } + }, + render(h, { props, data }) { + return h('i', { + ...data, + class: [`ti ti-${props.icon}`, data.class, data.staticClass] + }) + } +}) diff --git a/src/views/accounts/AccountItem.vue b/src/views/accounts/AccountItem.vue index 7b80c13..1e2f653 100644 --- a/src/views/accounts/AccountItem.vue +++ b/src/views/accounts/AccountItem.vue @@ -48,7 +48,7 @@ href="#" @click.prevent="toggleTab('transaction')" > - +
  • @@ -57,7 +57,7 @@ href="#" @click.prevent="toggleTab('location')" > - +
  • @@ -66,7 +66,7 @@ href="#" @click.prevent="toggleTab('tag')" > - +
  • @@ -75,7 +75,7 @@ href="#" @click.prevent="toggleTab('balance')" > - +
  • @@ -84,7 +84,7 @@ href="#" @click.prevent="toggleTab('settings')" > - +
    • @@ -155,7 +155,7 @@ :button-style="backgroundColor" :margin="true" > - + dépense     diff --git a/src/views/accounts/AccountNew.vue b/src/views/accounts/AccountNew.vue index 2356922..515cdd5 100644 --- a/src/views/accounts/AccountNew.vue +++ b/src/views/accounts/AccountNew.vue @@ -70,9 +70,9 @@

    -
    {{ @@ -114,7 +114,7 @@
    @@ -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 { diff --git a/yarn.lock b/yarn.lock index 3091d06..47a8337 100644 --- a/yarn.lock +++ b/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"