字体真棒SVG图标不适用于Vuetify

Question

  

为什么这不是重复的   FontAwesome SVG icons with Vuetify - how to use within v-icon/prepend-icon?

     

该问题显示了如何通过手动引用它来添加另一个图标并将其输出到组件中，而该问题   指更改预建组件中的图标   无需任何手动覆盖即可查看SVG图标   您的Vue组件，例如数据表的分页器。

我正在尝试通过Vuetify在Vue项目中使用font-awesome的SVG图标，我遵循了在此处的Vuetify安装页面上安装SVG字体包的指南

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

仅通过包含它们指定的配置：

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

图标只是以文本形式显示在组件中，例如：

搜索图标

数据表的页脚

主要问题是，据我所知，它应该更改预制组件的图标，否则，您每次使用它时都需要手动指定组件图标。

我的完整Vuetify设置文件

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",
  },
})

Answer 1

  

尝试

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

Answer 2

通过添加dom wacher，我获得了一半的成功。

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();

dom watcher拉动svg的图标。但不适用于其他组件，例如数据表等

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

对于那些图标，我必须手动定义每个值： https://vuetifyjs.com/en/customization/icons#using-custom-icons

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"
    }
  }
});

仍然无法使该复选框与svg一起使用。当我单击它时，它不会动态更改。

在这一点上，我将恢复为webfonts。

我宁愿使用SVG，因此任何解决方案都值得赞赏

Answer 3

从Vuetify 2.2.2开始，本机支持。

// 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',
  },
})

有关详情，请参见here