2020年如何在Vue项目中正确使用FontAwesome？

Question

我想在 Vue 2.5 项目（与 Laravel 一起运行）中使用一些 FontAwesome 字体。根据手册，如果我不想使用 CDN 并使我的应用程序离线运行，最好的方法是将其添加到我的app.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 组件 ( .vue) 中我必须使用这个：

<font-awesome-icon icon="user-secret" />

因此，每次我想使用新图标时，我都必须：

1. 前往https://fontawesome.com/icons

2. 检查free按钮

3. 搜索图标

4. 转到详细信息

5. 复制链接即<i class="far fa-eye"></i>

6. 转到 my app.js（或者在我的情况下是 my fontawesome.js）并添加：

   import { faUserSecret, faEye } from '@fortawesome/free-solid-svg-icons'
   
   library.add(faUserSecret)
   library.add(faEye)
   

7. 转到我的 Vue 组件并添加到<font-awesome-icon icon="eye" />我想要的任何地方

这个过程是最优且最小的吗？

Answer 1

是的。我承认这是一个繁重的过程，但它对性能有好处。

图书馆的自述文件中解释了一切：

为什么使用库的概念？
显式选择图标的优点是仅捆绑最终捆绑文件中使用的图标。这使我们能够将 Font Awesome 的数千个图标子集化为通常使用的少量图标。

如果您不介意捆绑包中包含未使用的图标，则可以按如下方式导入所有内容：

import { fab } from '@fortawesome/free-brands-svg-icons'

library.add(fab)

花点时间阅读整个自述文件，我知道它很长，但这是值得的！