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

Question

我将 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 Sprite 。在这种情况下该怎么办？谢谢!

---

Webpack 3.6.0 Vue 2.5.2

Answer 1

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

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

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

将 Sprite 添加到 HTML 后，您可以使用 Sprite 中的图标:

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

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