使用 Webpack 将 SVG 附加到 DOM

Question

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

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

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

非常感谢任何帮助。

菲利克斯

Answer 1

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

找到更多信息

Answer 2

自问这个问题后又出现了另一个选项：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.

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

<Icon glyph={help} />

Answer 3

您还可以使用： https://github.com/mrsum/webpack-svgstore-plugin 那个

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

使用 Webpack 将 SVG 附加到 DOM

Attaching an SVG to the DOM with Webpack

javascript

svg

angularjs

webpack