javascript - 动态加载精灵 SVG 文件

我有一个 SVG sprite 文件，由设计师为我的应用程序提供。他们希望我用来渲染他们的 SVG 图标的约定是在<body>元素顶部加载精灵，然后像这样渲染图标：

<svg class="u-icon-gear-dims">
    <use xlink:href="#gear"></use>
</svg>

这在我添加 SVG 精灵内联时有效，也就是说，将 SVG 精灵的全部内容放入我的 template.html 文件中。添加 sprite inline 会使 html 文件变得丑陋，但更重要的是，必须手动执行它会引发可维护性问题。

我目前直接引用单个 SVG 来渲染图标，但这会影响性能，因为当图标尚未加载时，通常会有一瞬间的延迟。

我找到了这个SO 主题，但似乎没有一个可行的答案。

FWIW，我们的应用程序使用 webpack，我目前正在尝试将 SVG 精灵加载到模板 HTML 文件中。

如何从 HTML 文件中的文件动态加载 SVG 精灵？

标签： javascripthtmlcsssvg