时间戳

首页 > 解决方案 > 字体很棒的 SVG 图标不适用于 Vuetify

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

问题描述

为什么这不是 带有 Vuetify 的 FontAwesome SVG 图标的副本——如何在 v-icon/prepend-icon 中使用？

该问题显示了如何通过手动引用它来添加另一个图标并将其输出到您的组件中，而这个问题是指将 Vuetify 的预构建组件中的图标更改为 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",
  },
})

标签： vue.jsfont-awesomevuetify.js

解决方案

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

详情见这里_

推荐阅读