web-dev-qa-db-fra.com

FontAwesome with Vuetify - Comment inclure des icônes Font Awesome dans le composant v-icon

J'espère que quelqu'un saura où je me suis trompé - j'essaie d'implémenter le paquet Font Awesome avec Vuetify. Font Awesome est entièrement importé et prêt à l'emploi (la configuration est identique aux projets auxquels j'ai intégré avec succès Font Awesome):

Mon fichier de base main.js:

import '@babel/polyfill'
import Vue from 'vue'
import './plugins/vuetify'
import App from './App.vue'
import store from './store'
import './registerServiceWorker'

import { library } from '@fortawesome/fontawesome-svg-core'
import { faCode } from '@fortawesome/pro-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

library.add(faCode)

Vue.component('font-awesome-icon', FontAwesomeIcon)

Vue.config.productionTip = false

new Vue({
  store,
  render: h => h(App)
}).$mount('#app')

Et dans un composant, je fais référence à une icône comme suit:

Mon Component.vue:

<template>
    ...
    <v-btn>
        <v-icon>fas fa-code</v-icon>
    </v-btn>
    ...
</template>

^ Où j'ai laissé le code superflu *. 

Ma question est donc la suivante: comment intégrer Font Awesome au composant v-icon de Vuetify?

Pour référence, j'utilise ce qui est décrit ici:

https://vuetifyjs.com/fr/components/icons

Ce qui est identique à ce que j'ai prescrit ci-dessus, mais malheureusement, mon icône ne s'affiche pas ...

Mise à jour: Je souhaite spécifiquement une solution qui n'inclut pas l'ajout du fichier assez lourd Font Awesome all.css (<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">), mais une importation icône par icône. (Le poids total du fichier all.css minifié est de 52 Ko dans v.5.2.0.

vue.jsfont-awesomevuetify.js
3
user10261970

Ok, donc en utilisant la suggestion du commentateur ci-dessus, j'ai réussi à le faire fonctionner en utilisant la méthode vue-font-awesome standard consistant à inclure des composants d'icônes de police géniaux, en remplaçant <v-icon> pour un résultat tel que celui que j'ai utilisé dans ma question:

<v-btn>
   <v-icon>fas fa-code</v-icon>
</v-btn>

...devient:

<v-btn fab dark small color="black" v-on:click="addCodeBlock">
   <font-awesome-icon :icon="['fas', 'code']"/>
</v-btn>
2
user10261970

Pour un projet Nuxt/Vuetify:

En complément de la réponse ci-dessus, vous pouvez également le configurer dans le fichier de configuration Vuetify, créé lors de l'installation du projet ("plugins/vuetify.js"), en ajoutant le prop "iconfont":

import '@fortawesome/fontawesome-free/css/all.css' // Ensure you are using css-loader
import Vue from 'vue'
import Vuetify from 'vuetify'

Vue.use(Vuetify, {
 iconfont: 'fa'
})

Maintenant, utilisez avec le composant icon comme ceci:

<v-icon>fab fa-vuejs</v-icon>

3
Guilherme Pereira

Une solution simple est affichée dans les options-cadres de Vuetify: https://vuetifyjs.com/fr/framework/icons

Installez les icônes à l'aide de NPM ou de fil: npm install @ fortawesome/fontawesome-free -D

Config - Pour un projet simple vue

Ajoutez ceci à votre main.js

import '@fortawesome/fontawesome-free/css/all.css'
import Vue from 'vue'
import Vuetify from 'vuetify'

Vue.use(Vuetify, {
 iconfont: 'fa'
})

Config - Pour un projet nuxt + vuetify

Créer un fichier js (par exemple icons.js) sous plugins

import '@fortawesome/fontawesome-free/css/all.css'
import Vue from 'vue'
import Vuetify from 'vuetify'

Vue.use(Vuetify, {
  iconfont: 'fa'
})

Ajoutez ceci à vos plugins dans nuxt.config.js

{ src: '~/plugins/icons.js', ssr:false }

Usage

Vous pouvez maintenant accéder aux superbes icônes de police à l’aide de v-icon ou d’ajouter/ajouter dans un composant comme:

<v-slider
v-model="energy"
color="red"
label="Energy"
min="1"
max="100"
thumb-label="always"
prepend-icon="fa-burn"
></v-slider>
1
Saud Ali