vue.js - buefy 中的 Font Awesome 图标

Question

我正在尝试从 切换我的项目 bool 玛 + jQuery 至 buefy .我加载 buefy , Vue 和 Font Awesome 来自 CDN。 (buefy@0.6.7, vue@2.5.17, font awesome 5.2.0) .我对图标的主要问题。我的项目使用 Font Awesome 图标。并且默认的 buefy iconPack 是 Material Design。它必须支持 Font Awesome 。我试图更改默认图标包，但这没有任何作用:

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

同样没有:

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

所以我需要为每个图标明确指出图标包。

第二个问题是即使在这种情况下 buefy 添加 fa-lg我根本不需要。例如对于 b-tab-item 组件

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

它呈现:

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

是否有可能改变这种笨拙的行为？

Answer 1

对于任何可能仍在为此挣扎的人。在我的 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: ""
    }
  }
});

确保使用 npm 安装所有依赖项:

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

那么你可以在你的组件中使用它，如下所示:

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