如何使用 Webpack 和 Vue.js 提供 <use> SVG 符号？答案

【问题标题】：How to serve <use> SVG-symbols with Webpack and Vue.js?如何使用 Webpack 和 Vue.js 提供 <use> SVG 符号？
【发布时间】：2018-05-20 21:58:42
【问题描述】：

我将 Webpack 与 Vue.js 结合使用。在 map.svg 文件中，我以如下形式存储所有 SVG 图标：

<symbol id="someID"><path></symbol>
<symbol id="otherID"><path></symbol>

在代码中，我在 SVG4Everybody-plugin 中使用了这样的构造：

<svg><use xlink:href="map.svg#someID"></svg>

但这不起作用，因为 Webpack 不分发 SVG 精灵。在这种情况下该怎么办？谢谢！

Webpack 3.6.0 Vue 2.5.2

【问题讨论】：

【解决方案1】：

您必须使用 <object> 将 SVG 精灵添加到 HTML

<object type="image/svg+xml" data="map.svg">
   Your browser does not support SVG
</object>

Your browser does not support SVG - 旧浏览器的故障恢复

将精灵添加到 HTML 后，您可以使用精灵中的图标：

<svg viewBox="0 0 24 24"> 
  <use xlink:href="map.svg#someID">
 </svg>

使用viewBox 选项来匹配图标的大小。

【讨论】：