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

Question

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

Answer 1

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

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

export default {
  // ...

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

然后前往 Fontawesome 图标页面和 select 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>

关闭下拉菜单

打开下拉菜单

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

How to use @nuxtjs/fontawesome icons in buefy?

font-awesome

nuxt.js

buefy