使用Webpack将SVG附加到DOM

Question

目前我公司在AngularJS网络应用程序的index.html中包含一个相当大的SVG精灵,其中包含各种图标.主要SVG由CSS隐藏,我们通过SVG选择它们来显示SVG中的各个图标:

<svg>
  <use xlink:href="#icon-id"></use>
</svg>

我们现在正试图通过拆分SVG并在需要它们的页面上内联生成的部分来减少我们站点的加载时间.由于我们也正在转向Webpack来捆绑我们的应用程序,我们想在Angular模块中指定特定SVG文件的依赖关系,然后让Webpack将SVG的内容(可能包含在div中)插入到DOM中.有没有办法用现有的装载机实现这一目标？我发现原始加载器基本上导出了SVG的内容.但是,我不知道如何将它与另一个插入到DOM中的加载器链接起来,就像样式加载器那样.

任何帮助是极大的赞赏.

费利克斯

Answer 1

自从提出这个问题以来，出现了另一种选择：https://github.com/kisenka/svg-sprite-loader

它类似于样式加载器，但对于 SVG：

• 从一组图像创建单个 SVG 精灵。
• 光栅图像支持（PNG、JPG 和 GIF）。
• 自定义精灵实现支持。

提供了 React 示例，并且有一个 Angular 的配置选项：

• angularBaseWorkaround添加了针对 Angular.js 典型的历史 API 组合问题的解决方法。

// some-component.jsx
import Icon from './icon';
import help from './images/icons/Help.svg';

<Icon glyph={help} />