简介
@tanem/svg-injector 是一个用于将 SVG 图标注入到 DOM 中的 JavaScript 库。它是基于 SVG 的 <use> 标签，这使得插入 SVG 更容易。
相较于直接使用 <img> 标签或者内联 SVG，使用 @tanem/svg-injector 可以让您更便捷地管理 SVG 图标库，并且无需引入多个 SVG 文件。
安装
您可以使用 npm 进行快速安装：
--- ------- -------------------
使用方法
1、将 JS 文件引入到页面
您需要在 HTML 页面中引入该库的 JS 文件：
------- ---------------------------------------
2、准备 SVG 文件
@tanem/svg-injector 依赖 SVG 文件的 ID，因此您需要为 SVG 文件中所有图标都分配一个唯一的 ID。
例如，您的 SVG 文件如下所示：
---- -----------------------------------
------- --------------- ---------- - -- ----
----- ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
---------
------- --------------- ---------- - -- ----
----- -----------------------------------------------------------------------------------------
---------
------3、将 SVG 注入
您可以使用以下 JavaScript 代码将 SVG 注入到 DOM 中：
--- -------- - --- -------------- ------------------------------------------------------------
上面的代码会将 <img class="inject-me"> 元素中的 src 属性值替换为 SVG 文件中的对应 ID，同时将 SVG 注入到 DOM 中。
以下是页面中的一个示例：
---- ----------------- -------------------- ---- ----------------- --------------------
如上所述，@tanem/svg-injector 依赖 SVG ID。因此，为了使该库正常工作，请确保您的 SVG 文件中每个 <symbol> 都有唯一的 ID。
高级用法
除了常规的 SVG 注入之外，@tanem/svg-injector 还具有一些高级用法。
onElementInjected 回调函数
您可以使用 onElementInjected 回调函数来监听每个 SVG 注入事件，并执行操作。例如，您可以为每个注入的 SVG 添加一个 CSS 类：
--- -------- - --- -------------
------------------ ------------- -
------------------------- ----------------
-
---
------------------------------------------------------------evalScripts 选项
如果您的 SVG 文件中包含 <script> 标记，则可以启用 evalScripts 选项来在 SVG 注入期间执行这些脚本：
--- -------- - --- -------------
------------ ---------
------------------ ------------- -
------------------------- ----------------
-
---
------------------------------------------------------------总结
通过使用 @tanem/svg-injector，您可以更轻松地管理 SVG 图标库，并将 SVG 文件注入到 DOM 中。
同时，该库还具有很多高级选项，您可以根据您的实际情况进行配置。
希望本文能够对您学习前端开发有所帮助。感谢您的阅读！
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/5f10196a403f2923b035c221