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

user_9525892 0
Viewed 4888

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>
font-awesome nuxt.js vuetify.js
2 Answers

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"
}
  1. In nuxt.config.js file:
vuetify: {
    defaultAssets: {icons: 'fa'}
}

That's all! U can use:

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

You should use the icons: { iconfont: 'faSvg' } syntax.

If anyone is using the @nuxtjs/vuetify module, you can configure the iconset in vuetify to use faSvg and then use the fontawesome-module for SVG icons. At this time of writing, vuetify is using the free solid icons in most of its components, so including all solid icons should be enough. You can configure this in the fontawesome-module so:

  ...otherNuxtConfigStuff,
  buildModules: [
    ...otherBuildModules,
    // https://github.com/nuxt-community/fontawesome-module
    ['@nuxtjs/fontawesome', {
      icons: {
        solid: true,
        // here you can include other icons you need
        brands: [
          'faYoutube',
          'faVimeo',
          'faVimeoV'
        ]
      }
    }],
    // https://github.com/nuxt-community/vuetify-module
    ['@nuxtjs/vuetify', {
      ...otherVuetifyConfigStuff,
      icons: {
        iconfont: 'faSvg'
      }
    }]
  ]
}

Make sure you don't change the component option in the fontawesome configuration because vuetify uses the default component name font-awesome-icon.

user_62310210
Related