我应该使用 fontawesome-free 还是 angular-fontawesome

Question

我们正在启动一个 Angular 6 项目，并希望使用 Font Awesome 5.1。 Font Awesome 提供了两个 Node 包：

在 JS 中使用SVG是使用 Font Awesome 的新方法，而Web 字体和 CSS是更经典的方法。 对我来说，在 JS 中使用 SVG 似乎有点麻烦，因为您必须import每个图标，但它可以节省文件大小。

我们将在我们的应用程序中使用大约 30 个图标，并且想知道哪种方法更适合我们。

Answer 1

我只是想知道同样的事情，所以即使它是基于意见的（因此可能会被关闭），我还是会回答你：

我开始使用他们的指南中描述的库。

我很快意识到你不能使用所有你想要的图标，因为没有办法使用fas或far图标。

所以我切换到“旧”方式：我安装了库

npm i @fortawesome/fontawesome-free

并将其导入到我的angular.json文件中：

projects -> yourProject -> architect -> build -> styles : {
  "node_modules/@fortawesome/fontawesome-free/css/all.css"
}

我现在必须使用通常的方式

<i class="fab fa-accessible-icon"></i>

但是我可以使用提供的所有图标，而不仅仅是一组。

Answer 2

其他一些考虑：

angular-fontawesome与 Angular 框架紧密集成，所以如果你认为你可能想要一些数据绑定图标（例如：带有未读消息计数器的电子邮件图标，或者一些带有旋转角度的图标绑定到模型中的某些数据值)，那么您可能会发现使用angular-fontawesome很好，其中图标不仅呈现为 SVG，还呈现为 Angular 组件。
Font Awesome 5 的 SVG 方法具有 Web 字体和 CSS 方法所不具备的一些功能。 例如， Power Transforms 、 Layers 和 Counters 。 由于angular-fontawesome构建在带有 JavaScript 实现的 SVG 之上，因此它也支持所有这些额外功能。
摇树/子集：有很多很多你不会使用的图标。 如果您关心在生产版本中优化下载资产的大小，那么您可能需要确保使用 tree-shaking，如果您使用angular-cli ，您将主要自动获得它（警告：请参阅该链接关于配置您的构建以解决构建性能回归问题，这会使 Webpack 4 生产构建变慢，直到发布修复程序。）

Answer 3

使用 Angular Font Awesome，因为它作为 Angular 组件工作。 也呈现为 SVG，因此有助于数据绑定逻辑。