我应该使用免费的fontawesome还是angular-fontawesome

Question

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

• @fortawesome/angular-fontawesome -将SVG与JS一起使用
• @fortawesome/fontawesome-free -在CSS中使用网络字体

将SVG与JS结合使用是使用Font Awesome的新方法，而Web Fonts和CSS是更经典的方法。对我来说，将SVG与JS一起使用似乎有点麻烦，因为您必须使用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

其他一些考虑：

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