vue.js - 字体超棒的 SVG 图标不适用于 Vuetify

Question

Why this isn't a duplicate of FontAwesome SVG icons with Vuetify - how to use within v-icon/prepend-icon?

That question shows how to add another icon and output it in your component by manually referencing it, whereas this question refers to the changing of the icons in the prebuilt components of Vuetify to SVG icons without the need to do any manual overriding in your Vue components, like the data-table's paginator.

我正在尝试使用 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

try this

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