使用SVG结合js

我们提供更高级的套餐,适用于更专业的情况。 这些包没有副作用,不会自动将 <i> 标签替换为 <svg> 标签。 ().

#

查看 API 以获取详细文档

@fortawesome/fontawesome-svg-core 包文档可以在 我们的 JavaScript API 文档

#什么时候使用

SVG 核心包在以下情况下很有帮助并推荐使用:

  • 将大量图标子集化为您正在使用的图标
  • 作为与 [React () 等工具进行更大集成的基础库
  • 作为 CommonJS/ES6 模块打包工具,如 [Webpack()
  • 作为 UMD 风格的加载器库,如 [RequireJS ()
  • 直接在服务器上用 CommonJS()

这些是 ES6 模块兼容的工具,例如 Rollup。 我们的图标内容包还支持 tree shaking,它允许兼容的工具从最终构建中删除您不使用的图标


#SVG 核心

我们的 Basic 包 () 针对的是那些希望将 Font Awesome 快速集成到他们的项目中但又不想投入时间和精力来了解引擎盖下发生的事情的个人。 由于这个原因,许多行为是自动的,无需任何干预即可工作。

相比之下,fontawesome-svg-core 包适用于更特殊的情况或用于形成底层 API 来为其他组件或库提供支持。 事实上,我们自己的 Vue、React、Ember 和 Angular 官方组件都在底层使用了 fontawesome-svg-core 包。

因此,核心包和图标内容包避免自动执行任何操作或产生副作用,从而使开发难以控制或推理。

您需要使用核心包而不是使用 fontawesome-freefontawesome-pro 的最常见用例之一是创建图标子集以减少最终捆绑文件的大小

对于这种情况,您可能仍希望将 <i> 标签替换为 <svg> 标签。 这是使用 CDN 或 fontawesome-freefontawesome-pro 包时的默认行为。 这不会在使用核心包时自动发生

为此,我们将使用 dom API。

#

有关 API 的更多信息

可以找到有关 Font Awesome JavaScript API 文档 的更多信息,其中包括可用于定制您认为合适的用法的配置和方法。