Font awesome icons in buefy

Question

I'm trying to switch my project from bulma + jQuery to buefy. I load buefy, vue and font awesome from a cdn. ([email protected], [email protected], font awesome 5.2.0). The main problem I have with icons. My project uses font awesome icons. And default buefy iconPack is material design. It must support font awesome. I've tried to change the default icon pack, but that does nothing:

Vue.use(Buefy.default, {
    defaultIconPack: 'fas',
});

the same nothing:

Vue.use(Buefy, {
    defaultIconPack: 'fas',
});

So I need to point the iconpack explicitly for every icon.

The second problem is that even in this case buefy adds fa-lg that I don't need at all. For example for b-tab-item component

<b-tab-item label="Similarity" icon="search" icon-pack="fas"></b-tab-item>

It renders:

<i class="fas fa fa-search fa-lg"></i>

Is it possible to change this buefy behaviour?

Answer 1

to anyone that may still struggle with this. my problems was solved by using this in my main.js:

import Buefy from 'buefy'
import 'buefy/dist/buefy.css'

import { library } from '@fortawesome/fontawesome-svg-core';
// internal icons
import { fas } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";

library.add(fas);
Vue.component('vue-fontawesome', FontAwesomeIcon);


Vue.use(Buefy, {
  defaultIconComponent: "vue-fontawesome",
  defaultIconPack: "fas",
  customIconPacks: {
    fas: {
      sizes: {
        default: "lg",
        "is-small": "1x",
        "is-medium": "2x",
        "is-large": "3x"
      },
      iconPrefix: ""
    }
  }
});

make sure to install all the dependencies using npm:

$ npm i --save @fortawesome/fontawesome-svg-core
$ npm i --save @fortawesome/free-solid-svg-icons
$ npm i --save @fortawesome/vue-fontawesome

then you can use it in your components as follows:

<b-icon
  pack="fas"
  icon="user"
  size="is-large"
  type="is-success"></b-icon>

Answer 2

This is working code for me in buefy

in main.js

import { library } from '@fortawesome/fontawesome-svg-core'
import { fas } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

library.add(fas)
Vue.component('font-awesome-icon', FontAwesomeIcon)
Vue.use(Buefy, { defaultIconPack: 'fas' })

and in index.html

place in head tag

<link
      rel="stylesheet"
      href="https://use.fontawesome.com/releases/v5.6.3/css/all.css"
      integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/"
      crossorigin="anonymous"
    />

make sure first off you add the fortawesome npm package