How to use Font-Awesome SVG with Vuetify and Nuxt.js

Question

I am trying to use the Font-Awesome SVG icons with Vuetify. But I don't manage to display icons.

I installed the necessary packages with:

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

And the Vuetify plugin file looks like this:

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

Trying to show a icon:

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

Answer 1

It's really simple. Nuxt js + Vuetify 2:

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

U can check your package.json file:

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

2. In nuxt.config.js file:

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

That's all! U can use:

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