使用Webpack将SVG附加到DOM

Question

目前我们公司在AngularJS Web应用的index.html中包含一个相当大的SVG精灵，其中包含各种图标。主SVG被CSS隐藏，我们通过选择它们的ID从SVG中显示单个图标。

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

我们现在正在尝试通过拆分SVG并将结果内联到需要它们的页面上来减少网站的加载时间。由于我们还要使用Webpack来打包我们的应用程序，因此我们希望在Angular模块中指定特定SVG文件的依赖关系，然后让Webpack将SVG的内容（可能包装在div中）插入到DOM中。是否有任何现有的加载器可以实现这一点？我找到了raw-loader，它基本上导出我们的SVG内容。但是，我不知道如何将其与另一个加载器链接起来，例如style-loader可以将样式插入到DOM中。非常感谢您的帮助。

菲利克斯

- Felix

---

这里有同样的问题，你找到解决方案了吗？ - lanan

Answer 1

自从提出这个问题以来，又出现了另一种选择：https://github.com/kisenka/svg-sprite-loader 它类似于style-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} />

- ptim

Answer 2

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

- Felix

Answer 3

此外，您还可以使用https://github.com/mrsum/webpack-svgstore-plugin来实现该功能。

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

- mrsum

---

我希望这些工具有更好的文档，我不知道如何使用它来生成精灵。有什么建议吗？ - Michael Giovanni Pumo

非常晚才加入，但 SVG 内联背后的想法是你不需要使用精灵表。你可以使用 Webpack 加载 SVG 文件，并将其直接内联到标记中。没有文件或 ID 的引用。只要 HTML 经过了 gzip 压缩，就不会看到明显的大小增加。 - elliottregan