使用Webpack将SVG附加到DOM

Question

目前，我的公司在AngularJS网络应用的index.html中包含一个相当大的SVG子图形，其中包含各种图标。 CSS隐藏了主要的SVG，我们通过按ID进行选择来显示SVG中的各个图标：

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

我们现在正在尝试通过拆分SVG并在需要它们的页面上内嵌结果部分来减少网站的加载时间。 由于我们还将移动到Webpack来捆绑应用程序，因此我们想在Angular模块中为特定SVG文件指定依赖项，然后让Webpack将SVG的内容（可能包装在div中）插入DOM 。 有没有办法用现有的装载机来实现？ 我发现原始加载程序基本上可以导出SVG的内容。 但是，我不知道如何将其与另一个将插入样式库中的样式加载器链接到另一个加载器。

任何帮助是极大的赞赏。

费利克斯

Answer 1

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

就像样式加载器，但对于SVG：

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

提供了React示例，并且为angular提供了一个配置选项：

• angularBaseWorkaround添加了与Angular.js典型的和History API结合使用时出现的问题的解决方法。

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

<Icon glyph={help} />

Answer 2

我最终为这个问题写了自己的webpack加载器。 您可以通过npm安装inline-loader。 可以在https://www.npmjs.com/package/inline-loader中找到更多信息

Answer 3

您也可以使用： https ： //github.com/mrsum/webpack-svgstore-plugin

npm i webpack-svgstore-plugin --save-dev