如何在 Vuetify 和 Nuxt.js 中使用 Font-Awesome SVG

Question

我正在尝试在 Vuetify 中使用 Font-Awesome SVG 图标。但我无法显示图标。

我安装了必要的软件包：

npm install @fortawesome/fontawesome-svg-core @fortawesome/vue-fontawesome @fortawesome/free-solid-svg-icons -D

Vuetify 插件文件如下所示：

import Vue from 'vue'
import Vuetify from 'vuetify/lib'
import colors from 'vuetify/es5/util/colors'
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)
library.add(fas)

Vue.use(Vuetify, {
  iconfont: 'faSvg',
  theme: {
    primary: colors.blue.darken2,
    accent: colors.grey.darken3,
    secondary: colors.amber.darken3,
    info: colors.teal.lighten1,
    warning: colors.amber.base,
    error: colors.deepOrange.accent4,
    success: colors.green.accent3
  }
})

试图显示一个图标：

<v-icon color="white" round>fa-times</v-icon>

Answer 1

这真的很简单。Nuxt js+ Vuetify 2:

1. npm i -D @fortawesome/fontawesome-free

你可以检查你的package.json文件：

  "devDependencies": {
    "@fortawesome/fontawesome-free": "^5.11.2"
}

2. 在nuxt.config.js文件中：

vuetify: {
    defaultAssets: {icons: 'fa'}
}

就这样！你可以使用：

<v-icon>fa-times</v-icon>