search

jonathantneal / svg4everybody

Use external SVG spritemaps today
https://jonneal.dev/svg4everybody/
Other
3.29k stars 353 forks source link

Using the polyfill works for cross-domain but loads the SVG twice #157

Closed izeau closed 7 years ago

izeau commented 7 years ago

Hey guys,

We want to put our SVG spritesheet in a CDN for faster delivery, and as such we need to be able to load it via AJAX using the polyfill: true option. This works, however, the SVG is loaded twice (once from the <use> tags in the HTML, the second time via the polyfill). Is there any way to prevent the first load?

Cheers

Polsaker commented 7 years ago

This is also happening to me when serving the SVG from the same domain.

robframpton commented 7 years ago

If you're always going to use polyfill: true, you can leverage the attributeName option which allows you to use a data attribute on the use element instead of an xlink:href value (the reason behind 2 requests).

svg4everybody({
    attributeName: 'data-href',
    polyfill: true
});
<svg role="img" title="Twitter">
    <use data-href="map.svg#twitter"/>
</svg>
izeau commented 7 years ago

This works wonders! It is an undocumented feature though, will it stay?

Closed by #155

robframpton commented 7 years ago

I'm assuming it will stay, it was added very recently which is why it's undocumented.