简介
@tanem/svg-injector 是一个用于将 SVG 图标注入到 DOM 中的 JavaScript 库。它是基于 SVG 的 <use> 标签，这使得插入 SVG 更容易。
相较于直接使用 <img> 标签或者内联 SVG，使用 @tanem/svg-injector 可以让您更便捷地管理 SVG 图标库，并且无需引入多个 SVG 文件。
安装
您可以使用 npm 进行快速安装：
npm install @tanem/svg-injector
使用方法
1、将 JS 文件引入到页面
您需要在 HTML 页面中引入该库的 JS 文件：
<script src="path/to/svg-injector.js"></script>
2、准备 SVG 文件
@tanem/svg-injector 依赖 SVG 文件的 ID，因此您需要为 SVG 文件中所有图标都分配一个唯一的 ID。
例如，您的 SVG 文件如下所示：
<svg xmlns="http://www.w3.org/2000/svg">
<symbol id="icon-check" viewBox="0 0 30 30">
<path d="M19.4,7.8l-5.5,5.5l-2.6-2.6c-0.5-0.5-1.2-0.5-1.7,0l-0.6,0.6c-0.5,0.5-0.5,1.2,0,1.7l3.9,3.9c0.2,0.2,0.6,0.3,0.9,0.3c0.3,0,0.7-0.1,0.9-0.3l6.1-6.1c0.5-0.5,0.5-1.2,0-1.7L21.1,9.4C20.6,7.9,19.4,7.8,19.4,7.8zM15,28C7.3,28,1,21.7,1,14S7.3,0,15,0s14,6.3,14,14S22.7,28,15,28z"/>
</symbol>
<symbol id="icon-cross" viewBox="0 0 30 30">
<path d="M19.2,15l6-6l-4.2-4.2l-6,6l-6-6L5,9.8l6,6l-6,6L6.8,25l6-6l6,6l2.8-2.8l-6-6L19.2,15z"/>
</symbol>
</svg>3、将 SVG 注入
您可以使用以下 JavaScript 代码将 SVG 注入到 DOM 中：
var injector = new SVGInjector();
injector.inject(document.querySelectorAll('img.inject-me'));上面的代码会将 <img class="inject-me"> 元素中的 src 属性值替换为 SVG 文件中的对应 ID，同时将 SVG 注入到 DOM 中。
以下是页面中的一个示例：
<img class="inject-me" src="img/check.svg"> <img class="inject-me" src="img/cross.svg">
如上所述，@tanem/svg-injector 依赖 SVG ID。因此，为了使该库正常工作，请确保您的 SVG 文件中每个 <symbol> 都有唯一的 ID。
高级用法
除了常规的 SVG 注入之外，@tanem/svg-injector 还具有一些高级用法。
onElementInjected 回调函数
您可以使用 onElementInjected 回调函数来监听每个 SVG 注入事件，并执行操作。例如，您可以为每个注入的 SVG 添加一个 CSS 类：
var injector = new SVGInjector({
onElementInjected: function(svg) {
svg.setAttribute('class', 'injected-svg');
}
});
injector.inject(document.querySelectorAll('img.inject-me'));evalScripts 选项
如果您的 SVG 文件中包含 <script> 标记，则可以启用 evalScripts 选项来在 SVG 注入期间执行这些脚本：
var injector = new SVGInjector({
evalScripts: 'always',
onElementInjected: function(svg) {
svg.setAttribute('class', 'injected-svg');
}
});
injector.inject(document.querySelectorAll('img.inject-me'));总结
通过使用 @tanem/svg-injector，您可以更轻松地管理 SVG 图标库，并将 SVG 文件注入到 DOM 中。
同时，该库还具有很多高级选项，您可以根据您的实际情况进行配置。
希望本文能够对您学习前端开发有所帮助。感谢您的阅读！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f10196a403f2923b035c221