我应该使用无火锅的还是角式的？

Question

我们正在开始一个角6项目，并希望使用字体Awese5.1。字体Awesome提供两个节点包：

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

使用SVG和JS是使用字体的新方法，而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

其他一些考虑因素：

1. angular-fontawesome与角度框架紧密集成，因此如果您认为您可能想要一些数据绑定图标(例如:带有未读消息计数器的电子邮件图标，或者模型中的某个数据值具有旋转角度的图标)，那么您可能会发现使用angular-fontawesome (图标不仅呈现为SVG，它被呈现为角组件)是很好的。
2. 字体Awese5的SVG方法能够提供一些Web字体和CSS方法无法使用的特性。例如，功率变换，层和计数器。由于angular-fontawesome构建在带有JavaScript实现的SVG上，所以它也支持所有这些额外的特性。
3. 树摇动/细分:有许多，许多图标，你不会使用。如果您关心优化产品构建中下载的资产的大小，那么您可能希望确保使用的是树抖动，如果使用大多是自动的，就会得到angular-cli (注意:请参阅有关配置构建性能回归的链接，这会使Webpack 4的生产构建在补丁发布之前缓慢生成)。

Answer 3

使用角字体，因为它是一个角组件的工作。也被呈现为SVG，所以在数据绑定逻辑中提供帮助。