vue.js - 如何在 Buefy 中配置 Font Awesome

Question

有人可以告诉我一些如何使用 NPM 将 Font Awesome 5 字体添加和配置到 Buefy 的示例。

这方面的文档非常稀少。谢谢！

https://buefy.github.io/documentation/start

Answer 1

要使用 NPM 而不是 CDN：

1. 安装 nuxt-fontawesome。

npm i nuxt-fontawesome
npm i @fortawesome/fontawesome-svg-core @fortawesome/vue-fontawesome

2. 安装一个图标集，例如：

npm i @fortawesome/free-solid-svg-icons

3. 编辑 nuxt.config.js 如下：

modules: [
  'nuxt-buefy',
  'nuxt-fontawesome'
],
buefy: {
  materialDesignIcons: false,
  defaultIconPack: 'fas',
  defaultIconComponent: 'font-awesome-icon'
},
fontawesome: {
  imports: [
    {
      set: '@fortawesome/free-solid-svg-icons',
      icons: ['fas']
    }
  ]
}

使用示例：

<b-icon pack="fas" icon="home" size="is-large" />

Answer 2

我让它像这样工作nuxt.config.js：

  modules: [
    '@nuxtjs/axios',
    '@nuxtjs/router',
    ['nuxt-buefy', {
      css: false,
      materialDesignIcons: false,
      defaultIconComponent: 'vue-fontawesome',
      defaultIconPack: 'fas',
    }],
  ],

如果您阅读 nuxt-buefy 文档，它会显示两种方式：

{
  modules: [
    // Simple usage
    'nuxt-buefy',

    ['nuxt-buefy', { /* buefy options */ }]
 ]
}

或者

{
  modules: [
    // Simple usage
    'nuxt-buefy',
 ],
 buefy: { /* buefy options */ }
}

https://github.com/buefy/nuxt-buefy