Vue.js 如何将fortawesome与vue一起使用

我根据网站上的说明进行了必要的安装

在

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>

---

我必须加载每个图标

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

library.add(faUserSecret, faShoppingCart);

---

这回答了你的问题吗？是的，它回答了我的问题。你为什么不这样做呢？

从“@fontawesome/free solid svg Icons”导入图标；library.add（Icons）

每个图标都以@fortwome/free solid svg图标（@fortwome/free solid svg Icons/index.d.ts）的形式导出。没有导出默认图标或图标。如何工作？

从“@fortawesome/free solid svg icon”导入{fas}

然后添加到库中

<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"} {}

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

library.add(faUserSecret, faShoppingCart);