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

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精灵。在这种情况下该怎么办？谢谢！

Webpack 3.6.0 Vue 2.5.2

Answer 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选项匹配图标的大小。