Using SVG with xlink breaks on build:production

sage
#1

Hey! I’m experimenting with using layout partials much more than before, and decided to make a stylable and animatable SVG logo using svg xlink. I have thus made a partials/logo.blade.php file, which looks like this:

<svg class="logo">
  <use xlink:href="@asset('images/logo.svg#logo')"></use>
</svg>

This, however, breaks on build:production, as the the xlink refers to dist/images/logo.svg#svg, while the actual file has a hash afterwards: logo_ea46fdae.svg

Any way to circumvent this? What am I missing?

Thanks!

#2

@asset is meant to reference the asset itself, not the url you want to generate. In this case it’s failing because it’s looking for an asset called logo.svg#logo, which doesn’t exist, so it doesn’t transform it. The resulting url works in dev, because your assets aren’t hashed, hence the path is valid.

The following should work:

<use xlink:href="@asset('images/logo.svg')#logo">
1 Like
#3

Thanks a lot! I knew I was missing something. Works perfectly now, thanks!