Puisque vous cherchez une option pour éviter de charger toutes les icônes dans vue/vuetify, je vous suggère d'utiliser la méthode de l'arbre secoué et d'ajouter chaque icône que vous voulez utiliser, manuellement. Cela peut être un peu fastidieux, mais l'ajout d'icônes à la demande sera bénéfique à long terme - car webpack ne fera que regrouper celles que vous spécifiez.
Veuillez noter :
Dans ce tutoriel, je suppose que le lecteur possède le paquet Pro. Si vous ne voulez utiliser que les versions gratuites, supprimez tout ce qui ressemble à Pro du mélange.
Ci-dessous, vous pouvez voir ma façon préférée de le faire avec vuetify et en utilisant les SVG avec v-icon et v-text/v-html :
Nous devons d'abord installer les icônes :
(ouvrez votre terminal/command-prompt dans votre projet et installez)
$ npm i --save @fortawesome/fontawesome-svg-core // this is the svg core, it is needed.
$ npm i --save @fortawesome/vue-fontawesome // Vue integration *
$ npm i --save @fortawesome/free-brands-svg-icons // Branding icons
$ npm i --save @fortawesome/free-regular-svg-icons // only for FA5 free **
$ npm i --save @fortawesome/free-solid-svg-icons // only for FA5 free **
$ npm i --save @fortawesome/pro-regular-svg-icons // Pro icons regular type
$ npm i --save @fortawesome/pro-light-svg-icons // Pro icons light type
$ npm i --save @fortawesome/pro-solid-svg-icons // Pro icons solid type
$ npm i --save @fortawesome/pro-duotone-svg-icons // Pro icons duotone type ***
-
( * ) Le pack d'intégration Vue plus d'infos
-
( ** ) Seulement nécessaire pour les icônes gratuites, si vous possédez Pro et suivi les instructions ici ils sont déjà inclus dans la version pro.
-
( *** ) Au moment de la rédaction de cet article, les icônes bicolores ne sont pas encore complètement intégrées, attention aux erreurs.
Ensuite, ajoutons ceci à notre configuration vuetify :
Je suppose ici que vous utilisez vuejs avec javascript (non dactylographié) et que vous avez installé vuetify via vue add vuetify . Le site vuetify.js doit se trouver dans le répertoire plugins dans votre dossier src dossier. Votre kilométrage peut varier .
// src/plugins/vuetify.js
import Vue from 'vue';
import Vuetify from 'vuetify/lib';
import { library } from '@fortawesome/fontawesome-svg-core' // Core SVG
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome' // Integration
// ... there should be more here, but see next part below ...
Vue.component('font-awesome-icon', FontAwesomeIcon) // add it to vue
Vue.use(Vuetify);
export default new Vuetify({
icons: {
iconfont: 'faSvg', // The bees knees, what most people are looking for.
},
});
Ok, maintenant que nous avons ajouté les principaux composants de FontAwesome 5, utilisons le treeshaking pour indiquer les icônes que nous souhaitons utiliser pour notre projet. Je n'utiliserai que deux icônes à titre d'exemple : fa-plus y fa-user-circle et je vais les ajouter pour trois des paquets Font Awesome Pro 5 que nous avons installés. (Clair, Normal et Duotone) et ensuite j'en ajouterai d'autres (barres et utilisateur) pour le solide, pour voir comment cela peut être fait dans les deux sens en même temps.
Alors, revenons à notre vuetify.js nous remplaçons
// ... there should be more here, but see next part below ...
avec le texte suivant (attention aux majuscules) :
// src/plugins/vuetify.js
// ...
import {
faBars,
faUser
} from '@fortawesome/pro-solid-svg-icons'
import {
faPlus as farPlus,
faUserCircle as farUserCircle
} from '@fortawesome/pro-regular-svg-icons'
import {
faPlus as falPlus,
faUserCircle as falUserCircle
} from '@fortawesome/pro-light-svg-icons'
import {
faPlus as fadPlus,
faUserCircle as fadUserCircle
} from '@fortawesome/pro-duotone-svg-icons'
// ...
Remarque rapide : si vous souhaitez toujours ajouter l'ensemble de la bibliothèque, vous pouvez le faire en l'important comme suit : import { far } from '@fortawesome/pro-regular-svg-icons' (pour les réguliers) et ainsi de suite.
Comme vous pouvez le constater, nous avons maintenant ajouté fa-plus et fa-user-circle à notre projet. A partir de là, nous devons les ajouter à la section library que nous avons importé dans le vuetify.js config. (ne vous inquiétez pas, le fichier entier peut être vu ci-dessous dans l'extrait de code). :
// src/plugins/vuetify.js
// ...
Vue.component('font-awesome-icon', FontAwesomeIcon)
library.add(
faBars, faUser,
farPlus, falPlus, fadPlus,
farUserCircle, falUserCircle, fadUserCircle
)
/// ...
Maintenant que nous les avons ajoutés à la bibliothèque, nous devons les confier à vuetify. Vuetify a quelques spécial Les icônes qu'ils utilisent pour des choses comme le <v-app-bar-nav-icon></v-app-bar-nav-icon> (menu hamburger) . Nous pouvons les personnaliser et ajouter les nôtres au mélange (si nous le souhaitons). Pour ce faire, je définis une constante et j'y ajoute toutes les icônes dont j'ai besoin, comme suit :
const CUSTOM_ICONS = {
add: { // custom icon I want to use
component: FontAwesomeIcon,
props: {
icon: ['fad', 'plus']
}
},
menu: { // used for the nav-icon by vuetify
component: FontAwesomeIcon,
props: {
icon: ['fas', 'user']
}
}
}
et ensuite nous ajoutons cette constante à la configuration comme ceci :
export default new Vuetify({
icons: {
iconfont: 'faSvg',
values: CUSTOM_ICONS,
},
});
Vous pouvez également les ajouter directement dans le values mais je trouve plus lisible de le faire à travers une constante.
Nous pouvons maintenant les utiliser dans des modèles, des appendices ou des prépensions :
<template>
<v-app>
<!-- reference the whole path -->
<v-icon>$vuetify.icons.add</v-icon>
<!-- but this is easier -->
<v-icon>$add</v-icon>
<v-select
:items="direction"
label="Select direction"
menu-props="auto"
prepend-icon="$unfold" <!-- short version -->
append-icon="$vuetify.icon.unfold" <!-- long version -->
>
</v-select>
</v-app>
</template>
Enfin, voici l'exemple complet :
// src/plugins/vuetify.js
import Vue from 'vue';
import Vuetify from 'vuetify/lib';
import { library } from '@fortawesome/fontawesome-svg-core' // Core SVG
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome' // Integration
import {
faBars,
faUser
} from '@fortawesome/pro-solid-svg-icons'
import {
faPlus as farPlus,
faUserCircle as farUserCircle
} from '@fortawesome/pro-regular-svg-icons'
import {
faPlus as falPlus,
faUserCircle as falUserCircle
} from '@fortawesome/pro-light-svg-icons'
import {
faPlus as fadPlus,
faUserCircle as fadUserCircle
} from '@fortawesome/pro-duotone-svg-icons'
Vue.component('font-awesome-icon', FontAwesomeIcon)
library.add(
faBars, faUser,
farPlus, falPlus, fadPlus,
farUserCircle, falUserCircle, fadUserCircle
)
const CUSTOM_ICONS = {
add: { // custom icon I want to use
component: FontAwesomeIcon,
props: {
icon: ['fad', 'plus']
}
},
menu: { // used for the nav-icon by vuetify
component: FontAwesomeIcon,
props: {
icon: ['fas', 'user']
}
}
}
Vue.use(Vuetify);
export default new Vuetify({
icons: {
iconfont: 'faSvg',
values: CUSTOM_ICONS,
},
});
<template>
<v-app>
<!-- reference the whole path -->
<v-icon>$vuetify.icons.add</v-icon>
<!-- but this is easier -->
<v-icon>$add</v-icon>
<v-select
:items="direction"
label="Select direction"
menu-props="auto"
prepend-icon="$unfold" <!-- short version -->
append-icon="$vuetify.icon.unfold" <!-- long version -->
>
</v-select>
</v-app>
</template>
Suggestion : séparer les fichiers pour une meilleure lecture
Nous pouvons séparer la logique de fontAwesome dans un autre fichier :
Nous avons donc 2 fichiers :
- le site
fontAwesome.js où vous faites toute la logique appartenant à fontAwesome
-
le site vuetify.js vous importerez les icônes de fontAwesome.js
// src/plugins/fontAwesome.js
import { library } from '@fortawesome/fontawesome-svg-core' // Core SVG
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome' // Integration
import {
faBars,
faUser
} from '@fortawesome/pro-solid-svg-icons'
import {
faPlus as farPlus,
faUserCircle as farUserCircle
} from '@fortawesome/pro-regular-svg-icons'
import {
faPlus as falPlus,
faUserCircle as falUserCircle
} from '@fortawesome/pro-light-svg-icons'
import {
faPlus as fadPlus,
faUserCircle as fadUserCircle
} from '@fortawesome/pro-duotone-svg-icons'
library.add(
faBars, faUser,
farPlus, falPlus, fadPlus,
farUserCircle, falUserCircle, fadUserCircle
)
const CUSTOM_ICONS = {
add: { // custom icon I want to use
component: FontAwesomeIcon,
props: {
icon: ['fad', 'plus']
}
},
menu: { // used for the nav-icon by vuetify
component: FontAwesomeIcon,
props: {
icon: ['fas', 'user']
}
}
}
export { CUSTOM_ICONS }
// src/plugins/vuetify.js
import Vue from 'vue';
import Vuetify from 'vuetify/lib';
import { CUSTOM_ICONS } from "./fontAwesome"
Vue.use(Vuetify);
export default new Vuetify({
icons: {
iconfont: 'faSvg',
values: CUSTOM_ICONS
},
});
- <template>
- <v-app>
- <!-- reference the whole path -->
- <v-icon>$vuetify.icons.add</v-icon>
- <!-- but this is easier -->
- <v-icon>$add</v-icon>
- <v-select
- items="direction"
label="Select direction"
menu-props="auto"
prepend-icon="$unfold" <!-- short version -->
append-icon="$vuetify.icon.unfold" <!-- long version -->
>
</v-select>
</v-app>
</template>
Pour en savoir plus :
