CODEWITHSUNDEEP
svgwebpackvue.js
Evgeniy Novalov
Evgeniy Novalov

Reputation: 163

How to serve <use> SVG-symbols with Webpack and Vue.js?

I use Webpack in conjunction with Vue.js. In the map.svg file I store all the SVG icons in the form like this:

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

In the code I use a construct like this with SVG4Everybody-plugin:

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

But this does not work, because Webpack does not distribute SVG sprites. What to do in this situation? Thanks!

Webpack 3.6.0 Vue 2.5.2

Upvotes: 2

Views: 1368

Answers (1)

Alexandr_TT
Alexandr_TT

Reputation: 14545

You must add the SVG sprite to HTML using the <object> 

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

Your browser does not support SVG - failback for old browsers

After adding a sprite to the HTML, you can use the icons from the sprite: 

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

Use the viewBox options to match the size of the icons.

Upvotes: 2

Related Questions