如何在 buefy 中使用 @nuxtjs/fontawesome 图标？答案

【问题标题】：How to use @nuxtjs/fontawesome icons in buefy?如何在 buefy 中使用 @nuxtjs/fontawesome 图标？
【发布时间】：2021-05-30 13:28:45
【问题描述】：

我在我的 nuxt ssr 项目中使用 @nuxtjs/fontawesome 图标
在Buefy input 中使用时，这些图标不会呈现
如何使这些功能协同工作

CODESANDBOX illustrating my problem

【问题讨论】：

@kissu 它不会呈现，图标在 html 中但不会呈现在浏览器上

标签： nuxt.js font-awesome buefy

【解决方案1】：

这个有点棘手，需要深入研究文档的几个部分 + github 问题。我发现的工作设置如下。

使用以下内容创建 Nuxt 插件：

export default {
  // ...

  plugins: [
    { src: '@/plugins/vue-buefy', mode: 'client' },
  ],
}

然后前往 Fontawesome Icons 页面并选择Free + Solid，如下所示：https://fontawesome.com/v5.15/icons?d=gallery&p=2&s=solid&m=free

假设我们确实选择了Angry 和Air freshener。
后者被标识为<i class="fas fa-air-freshener"></i>（如果您单击它）。这将帮助我们知道要导入的图标的名称。
这也让我们了解到我们需要使用fas。

那么，配置如下：

import Vue from 'vue'
import { library } from '@fortawesome/fontawesome-svg-core' // import the mandatory

import {
  faAngry,
  faAirFreshener,
} from '@fortawesome/free-solid-svg-icons' // import the icons that you've choosen, VScode may suggest the import for you!

import Buefy, { // import Buefy, required
  Dropdown, // import the component that you want to use
} from 'buefy'

import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome' // import the icon component for Buefy

library.add(
  faAngry,
  faAirFreshener,
) // add the icons you've selected
Vue.component('VueFontawesome', FontAwesomeIcon) // tell Vue to use the icon component

Vue.use(Dropdown) // same goes for the Dropdown
Vue.use(Buefy, {
  defaultIconComponent: 'vue-fontawesome', // the icon component that we are using
  defaultIconPack: 'fas', // the pack given by Fontawesome
})

这将帮助您实现下拉菜单或任何带有图标的组件。由于 Buefy 期望您自己为它提供一个图标库，否则它看起来会很糟糕。

此代码将正常工作

<b-dropdown aria-role="list">
  <template #trigger="{ active }">
    <b-button :icon-right="active ? 'angry' : 'air-freshener'" />
  </template>
</b-dropdown>

关闭下拉列表

打开下拉列表

【讨论】：