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

Question

我想在 Vue 2.5 项目中使用一些 FontAwesome 字体 (运行 Laravel)。根据手册，如果我不想使用 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 按钮
搜索图标
进入详情
复制 link 即 <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)

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

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

How to properly use FontAwesome in a Vue project in 2020?

javascript

font-awesome

vue.js