1
votes

Les icônes SVG géniales ne fonctionnent pas avec Vuetify

Pourquoi ce n'est pas un doublon de Icônes FontAwesome SVG avec Vuetify - comment utiliser dans v-icon / prepend-icon?

Cette question montre comment ajouter une autre icône et la générer dans votre composant en la référençant manuellement, alors que cette question fait référence au changement des icônes dans les composants prédéfinis de Vuetify vers les icônes SVG sans avoir à effectuer de remplacement manuel dans vos composants Vue, comme le paginateur de la table de données.

J'essaie d'utiliser les icônes SVG de font-awesome dans un projet Vue avec Vuetify, j'ai suivi le guide d'installation du package de polices SVG sur la page d'installation de Vuetify ici

https://vuetifyjs.com/en/customization/icons#install- font-awesome-svg-icons

En incluant uniquement la configuration qu'ils spécifient qui est:
import Vue from "vue"
import Vuetify from "vuetify"
import { library } from "@fortawesome/fontawesome-svg-core"
import { fas } from "@fortawesome/free-solid-svg-icons"
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome"

Vue.component("font-awesome-icon", FontAwesomeIcon)
library.add(fas)

Vue.use(Vuetify)

export default new Vuetify({
  icons: {
    iconfont: "faSvg",
  },
})
Les icônes s'affichent simplement sous forme de texte dans composants, exemples:

Icône de recherche

Pied de page d'un tableau de données

Le problème principal est qu'il devrait changer les icônes du composant prédéfini pour autant que je le comprends sinon vous auriez besoin de m spécifiez les icônes des composants chaque fois que vous l'utilisez.

Mon fichier d'installation complet de Vuetify
export default new Vuetify({
  icons: {
    iconfont: 'faSvg',
  },
})

vue.js vuetify.js font-awesome

2 commentaires

Copie possible des Icônes FontAwesome SVG avec Vuetify - comment utiliser dans v-icon / prepend-icon?

@ibra Ajout d'une explication pour expliquer pourquoi ce n'est pas la même chose

3 Réponses :

2
votes

essayez ceci

import '@fortawesome/fontawesome-free/css/all.css'

1 commentaires

Cela fonctionne mais cela ne produit pas les icônes au format SVG

2
votes

J'ai eu un demi-succès en ajoutant un dom wacher.

import Vue from "vue";
import Vuetify from "vuetify/lib";
import "./fontawesome";

Vue.use(Vuetify);

export default new Vuetify({
  icons: {
    iconfont: "faSvg",
    values: {
      checkboxOn: "fas fa-check-square",
      checkboxOff: "fas fa-square",
      checkboxIndeterminate: "fas fa-minus-square",
      menu: "fas fa-bars"
    }
  }
});

dom watcher extrait svg pour les icônes. Mais pas pour les autres composants tels que les tables de données, etc.

<v-icon>fa-sign-out-alt</v-icon>

Pour ces icônes, j'ai dû définir chaque valeur manuellement: https://vuetifyjs.com/en/customization/icons#using-custom- icônes

import Vue from "vue";
import { library, dom } from "@fortawesome/fontawesome-svg-core";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";

import { fas } from "@fortawesome/free-solid-svg-icons";

import { far } from "@fortawesome/free-regular-svg-icons";

library.add(fas, far);

Vue.component("font-awesome-icon", FontAwesomeIcon);

dom.watch();

Je n'ai toujours pas pu faire fonctionner la case à cocher avec svg. Cela ne changera pas de manière dynamique lorsque je clique dessus.

À ce stade, je reviendrai aux polices Web.

Je préfère utiliser les SVG, donc toute solution est très appréciée

0 commentaires

1
votes

Depuis Vuetify 2.2.2, cela est pris en charge nativement.

// src/plugins/vuetify.js

import Vue from 'vue'
import Vuetify from 'vuetify/lib'
import { library } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { fas } from '@fortawesome/free-solid-svg-icons'

Vue.component('font-awesome-icon', FontAwesomeIcon) // Register component globally
library.add(fas) // Include needed icons

Vue.use(Vuetify)

export default new Vuetify({
  icons: {
    iconfont: 'faSvg',
  },
})

Voir ici pour plus de détails

0 commentaires