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按钮
搜索图标
进入细节
复制链接，即<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的所有内容：

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

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

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

library.add(fab)

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

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

1 个答案: