julien/vaquant
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(icons): replace FontAwesome with Tabler Icons

Browse Source 
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.
This commit is contained in:
Julien Calixte
2026-06-01 18:33:58 +02:00
parent 5fe9905df7
commit 639429e18b
20 changed files with 63 additions and 152 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
package.json
View File

@@ -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",

2
src/components/AccountCard.vue
View File

@@ -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) }}

2
src/components/AccountList.vue
View File

@@ -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>

2
src/components/AccountSetting.vue
View File

@@ -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>

8
src/components/AccountTransactionList.vue
View File

@@ -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>

16
src/components/AppResume.vue
View File

@@ -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;
<awe-icon icon="exchange-alt" />&nbsp;
<awe-icon icon="dollar-sign" />
<vaquant-icon icon="currency-euro" />&nbsp;
<vaquant-icon icon="arrows-exchange" />&nbsp;
<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

2
src/components/ColorPicker.vue
View File

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

4
src/components/FabButton.vue
View File

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

6
src/components/PricingTable.vue
View File

@@ -34,10 +34,10 @@
>/mois
</div>
<div class="plan-items">
<div class="plan-item"><awe-icon icon="infinity" /> comptes</div>
<div class="plan-item"><awe-icon icon="infinity" /> amis/compte</div>
<div class="plan-item"><vaquant-icon icon="infinity" /> comptes</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>

6
src/components/TagList.vue
View File

@@ -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

2
src/components/TransactionCreate.vue
View File

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

4
src/components/TransactionSplit.vue
View File

@@ -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>

2
src/components/TransactionTagUpdate.vue
View File

@@ -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>

2
src/components/UserNew.vue
View File

@@ -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>

10
src/enums/TransactionTag.ts
View File

@@ -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'
}
}

1
src/shims-vue.d.ts vendored
View File

@@ -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'

93
src/utils/icons.ts
View File

@@ -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]
})
}
})

12
src/views/accounts/AccountItem.vue
View File

@@ -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>

13
src/views/accounts/AccountNew.vue
View File

@@ -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 {

24
yarn.lock
View File

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