javascript - 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" />

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

转至 https://fontawesome.com/icons

查看free按钮

搜索图标

转到详细信息

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

转到我的app.js (或者在我的情况下我的 fontawesome.js )并添加:

import { faUserSecret, faEye } from '@fortawesome/free-solid-svg-icons'

library.add(faUserSecret)
library.add(faEye)

转到我的 Vue 组件并添加 <font-awesome-icon icon="eye" />无论我想去哪里

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

Answer 1

是的。我承认这是一个繁重的过程，但它对性能有好处。
一切都在 library's readme 上进行了解释:

Why use the concept of a library?
Explicitly selecting icons offer the advantage of only bundling the icons that you use in your final bundled file. This allows us to subset Font Awesome's thousands of icons to just the small number that are normally used.

如果您不介意包含未使用图标的捆绑包，则可以这样导入所有内容:

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

library.add(fab)

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