How to use versioned file in my template?

Questions / Help
,
1

Hello,

I have icons.svg file which contains svg symbols. In my template I use it like this with a verified route:

<svg>
   <use xlink:href={ ~p"/images/icons.svg#arrow" }></use>
</svg>

This line of code always calls for icons.svg file, but in production, this file gets versioned to something like icons-83f2a9a213b74424476fb160bbabaec8.svg?vsn=d.

How do I update verified routes to use versioned filename instead of base icons.svg?

2

Maybe Routes.static_path/2 would help.

<svg>
   <use xlink:href={static_path(@conn, "/images/icons.svg") <> "#arrow"}></use>
</svg>

In development static_path/2 will return icons.svg but in production it will return the path to the fingerprinted version.

1 Like
3

Looking at the code it seems the #arrow part means matching with the cache manifest doesn’t work. Caching uses the path as supplied and doesn’t strip fragments from it, which therefore doesn’t match paths on the filesystem, which don’t have fragments to them.

1 Like
4

Thank you for giving me the example.

Here’s the code with verified route which works.

<svg>
   <use xlink:href={ ~p"/images/icons.svg" <> "#arrow" }></use>
</svg>
1 Like