SVG 核心

我们提供更高级的包，适用于更专业的场景。这些包没有副作用，也不会自动将 <i> 标签替换为 <svg> 标签（尽管仍然可以通过 dom.watch() 使用它）。

查看 API 获取详细文档

您可以从我们的 Javascript API 文档 中找到 @fortawesome/fontawesome-svg-core 包的文档。

SVG 核心用于什么？

SVG 核心包在以下情况下非常有用，也建议使用它

• 将大量图标子集化，只保留您正在使用的图标
• 作为更大的集成工具的基础库，例如 React、Angular、Vue 或 Ember（实际上我们自己的组件使用这些包）
• 作为 CommonJS/ES6 模块捆绑工具，例如 Webpack、Rollup 或 Parcel
• 作为 UMD 样式加载器库，例如 RequireJS

这些是与 ES6 模块兼容的，适用于支持它的工具，例如 Rollup。我们的图标内容包也 **支持树状摇动，允许兼容的工具从最终构建中移除您未使用的图标**。

比较基本包和 SVG 核心

我们的基本包（@fortawesome/fontawesome-free 和 @fortawesome/fontawesome-pro）针对希望快速将 Font Awesome 集成到项目中，但不想投入时间和精力来理解底层机制的人。因此，许多行为是自动的，无需任何干预即可运行。

相反，fontawesome-svg-core 包适用于更专业的场景，或者用于构建底层 API 来为其他组件或库提供动力。实际上，我们针对 Vue、React、Ember 和 Angular 的官方组件都在底层使用了 fontawesome-svg-core 包。

因此，核心包和图标内容包会避免进行任何自动操作，也不会创建难以控制或推理的副作用，从而使使用它们进行开发变得困难。

最常见的用例之一是您会选择使用核心包而不是使用 fontawesome-free 或 fontawesome-pro，就是 **创建一个图标子集来减小最终捆绑文件的大小**。

在这种情况下，您可能仍然希望将 <i> 标签替换为 <svg> 标签。这是使用 CDN 或 fontawesome-free 和 fontawesome-pro 包时的默认行为。**使用核心包时，不会自动执行此操作**。

为了实现这一点，我们将使用 dom API。

import { library, dom } from '@fortawesome/fontawesome-svg-core'
import { faUserAstronaut } from '@fortawesome/free-solid-svg-icons'

// We are only using the user-astronaut icon
library.add(faUserAstronaut)

// Replace any existing <i> tags with <svg> and set up a MutationObserver to
// continue doing this as the DOM changes.
dom.watch()