javascript - 使用 Webpack 将 SVG 附加到 DOM

Question

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

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

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

非常感谢任何帮助。

菲利克斯

Answer 1

自从问了这个问题后又出现了另一个选项:https://github.com/kisenka/svg-sprite-loader

It's like style-loader but for SVG:

• Creates a single SVG sprite from a set of images.
• Raster images support (PNG, JPG and GIF).
• Custom sprite implementation support.

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

• angularBaseWorkaround 添加解决方法，解决 Angular.js 中典型的 History API 组合问题。

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

<Icon glyph={help} />