如何将fortawesome与vue一起使用

Question

我根据https://www.npmjs.com/package/@fortawesome/vue-fontawesome上的说明进行了必要的安装

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

在src/main.js中添加了以下内容：

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

library.add(faUserSecret)

Vue.component('font-awesome-icon', FontAwesomeIcon)

Vue.config.productionTip = false

在MyComponent.vue中

<template>
  <div id="app">
    <font-awesome-icon icon="user-secret" />
  </div>
</template>

啊，真灵。

但这些都不管用。

<font-awesome-icon icon="shopping-cart" />
<font-awesome-icon :icon="['fas', 'shopping-cart']" />

我得到了错误

Could not find one or more icon(s) {prefix: "fas", iconName: "shopping-cart"} {}

Answer 1

我不得不添加加载每个图标

import {
  faUserSecret,
  faShoppingCart
} from "@fortawesome/free-solid-svg-icons";

library.add(faUserSecret, faShoppingCart);