angular - fontawesome angular package和标准npm package和simple sass有什么区别

Question

我有一个带有 sass(SCSS) 的新 angular cli(8+) 项目。我检查了 Fontawesome 文档，发现了多种托管 fontawesome 图标的方法（npm package install、angular package或simple scss）。

我想知道它们之间有什么区别？对于具有 sass 的 Angular CLI 项目，这是推荐的方式。

Answer 1

当你通过 npm 包管理器安装 Fontawesome 时，它​​已经包含了所有的 Scss 文件。因此，“npm package install”和“simple Scss”之间没有选择。这里的问题更多：例如，使用包管理器或仅在资产文件夹中的项目中托管您需要的 Scss 文件？选择最后一个选项，您将无法使用 npm 轻松更新库版本。

编辑：使用这种 CSS/SCSS 方法，您将始终加载所有图标（一个字体文件，对于 FontAwesome Pro 而言尤其如此巨大）

角度包是另一个主题。这是 FontAwesome 的一个新的官方包。无需在项目中导入 Scss 文件，您可以直接使用 FontAwesome Angular 组件。

编辑：这个包使用 SVG 图标，并将使用 Angular CLI 基础设施从你的最终包中删除所有未使用的图标。

更简单的：

• 安装 npm 包或仅托管您需要的 CSS 缩小文件，
• 在 angular.cli 文件中添加指向文件位置的链接

您将能够在所有 Html 文件中使用 Fontawesome 类（如.fab .fa-twitter ）。

Sccs 导入：

如果你想用 Fontawesome mixins 个性化你的类，你可以在项目的任何 Scss 文件中导入 Scss 文件。

一个用例：一个.user-button类，它扩展了一个.fa-icon属性并包含一个 Fontawesome 用户图标。

角包：

您将永远不必处理 FontAwesome 类，而只需在 app.module.ts 中导入模块并使用 FontAwesome 图标作为特定组件。