介绍
@tonis2/svg-load 是一个NPM包，用于以编程方式加载 SVG 文件。该包提供了一个简单的 API，用于加载 SVG 文件并以Base64编码的方式返回其内容。它可以用于在前端应用程序中动态加载 SVG 图像。
在本教程中，我们将讨论如何安装并使用@tonis2/svg-load NPM包。我们将了解该包的用途、怎样在应用程序中使用它以及一些实际示例。
安装
在使用@tonis2/svg-load NPM包之前，您需要在本地计算机上安装 Node.js 以及 NPM。请确保您当前本地 Node.js 版本至少为 8.x 。
安装方式如下：
--- ------- ---------------- ------
示例
下面是一个简单的示例，用于以编程方式加载 svg 文件并使用其 Base64 编码的内容。
------ ------- ---- -------------------
-------------------------------------
--------- -- -
----- --- - --- --------
------- - -----------------------------------
-------------------------------
--
---------- -- -
-------------------
---在此示例中，我们通过调用 SvgLoad.loadSvgFromUrl 函数并传递要加载的 SVG 文件路径来加载 SVG 文件。它返回一个 Promise，该 Promise 解析为编码的 SVG 内容。我们通过将编码后的 SVG 内容添加到 base64 的 URL 中并将其分配给新创建的 img 元素的 src 属性来显示 SVG 文件。
这是另一个示例，它展示了如何使用 Async/Await 功能加载 SVG 文件。
------ ------- ---- -------------------
----- -------- ----------- -
--- -
----- --- - ----- --------------------------------------
----- --- - --- --------
------- - -----------------------------------
-------------------------------
- ----- ----- -
-------------------
-
-
------------这个示例将通过使用 Async/Await 包装框架代码的方式来加载 SVG 文件。我们使用 async 关键字将函数标记为异步函数，然后使用 await 关键字等待执行 SvgLoad.loadSvgFromUrl 函数并返回用于 Inline SVG 的 Base64 编码。
结论
在本教程中，我们学习了如何使用@tonis2/svg-load NPM包来以编程方式加载 SVG 文件。我们讲解了如何安装该包，以及如何在应用程序中使用它。我们还提供了一些实际示例，以便您在使用此包时能够更容易地上手。
@tonis2/svg-load 包是一个非常有用的 NPM 包，可以在前端应用程序中动态加载 SVG 图像。这是一种非常流行的方式，可以更轻松地加载自定义 SVG 矢量图标，并在使用项目时轻松管理它们。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005727481e8991b448e8a90