Vue.js 字体图标不适用于Vuetify

为什么这不是一个复制品

这个问题显示了如何添加另一个图标，并通过手动引用将其输出到组件中，而这个问题 是指更改的预构建组件中的图标 Vuetify到SVG图标，无需在中执行任何手动覆盖 您的Vue组件，如数据表的分页器

我正试图在Vuetify的Vue项目中使用font awesome的SVG图标，我在这里遵循了Vuetify安装页面上安装SVG字体包的指南

通过仅包括他们指定的配置，该配置是：

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

试试这个

试试这个

---

我添加了一个domwacher，成功了一半

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>

但我仍然无法使复选框与svg一起工作。当我点击它时，它不会动态变化

现在我将回到webfonts

---

我更愿意使用SVG，因此任何解决方案都会受到高度赞赏

通过添加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>

但我仍然无法使复选框与svg一起工作。当我点击它时，它不会动态变化

现在我将回到webfonts

---

我更愿意使用SVG，因此从Vuetify 2.2.2开始，任何解决方案都非常受欢迎，这是本机支持的

//src/plugins/vuetify.js
从“Vue”导入Vue
从“Vuetify/lib”导入Vuetify
从“@fortawesome/fontawesome svg核心”导入{library}
从“@fortawesome/vue fontawesome”导入{FontAwesomeIcon}
从“@fortawesome/free solid svg icons”导入{fas}
组件（'font-awesome-icon'，FontAwesomeIcon）//全局注册组件
library.add（fas）//包括所需的图标
Vue.use（Vuetify）
导出默认的新Vuetify({
图标：{
iconfont:'faSvg'，
},
})

---

有关详细信息，请参见

自Vuetify 2.2.2起，本机支持此功能

//src/plugins/vuetify.js
从“Vue”导入Vue
从“Vuetify/lib”导入Vuetify
从“@fortawesome/fontawesome svg核心”导入{library}
从“@fortawesome/vue fontawesome”导入{FontAwesomeIcon}
从“@fortawesome/free solid svg icons”导入{fas}
组件（'font-awesome-icon'，FontAwesomeIcon）//全局注册组件
library.add（fas）//包括所需的图标
Vue.use（Vuetify）
导出默认的新Vuetify({
图标：{
iconfont:'faSvg'，
},
})

---

有关详细信息，请参见

，它可以工作，但不输出SVG格式的图标，它可以工作，但不输出SVG格式的图标@ibra的可能副本添加了一个解释，解释了为什么它不是@ibra的可能副本添加了一个解释，解释了为什么它不相同