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：

npm i -D @fortawesome/fontawesome-free

U可以检查您的package.json文件：

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

在nuxt.config.js文件中：

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

仅此而已！您可以使用：

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

Answer 2

您应该使用icons: { iconfont: 'faSvg' }语法。

如果有人在使用@nuxtjs/vuetify模块，则可以在vuetify中将图标集配置为使用faSvg，然后将fontawesome-module用于SVG图标。在撰写本文时，vuetify的大多数组件中都使用了免费的实体图标，因此包括所有实体图标就足够了。您可以在fontawesome-module中进行配置，以便：

  ...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'
      }
    }]
  ]
}

确保不要在fontawesome配置中更改component选项，因为vuetify使用默认组件名称font-awesome-icon。

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

2 个答案: