Using Embedded SVGs in collections

My sharable link:

My problem:
I’ve got 5 category links which have to be custom code embeds as I want the SVGs to change colour on hover. I can do this fine but the problem comes if I want to have a different embedded SVG per category. Any ideas how to a path’s fill as ‘currentColor’ for a collection item?

Anybody got any ideas?

(@thesergie I’ve read your article regarding fill=“currentColor”, maybe you can help?)

Hi @uxmike! Thanks for reaching out. Yeah you can currently drop the svg code in an HTML embed element like this (below), add a class to the element, and add hover properties.


But unfortunately it’s not easy to set this up on collection items because:

  1. we don’t have a collection field that accepts custom code.
  2. we don’t have a way to use a collection field in a different state (i.e. binding a color field to a style property in the hover state)

I’m sure there’s some javascript that can solve both, but I can’t help you with that. Hopefully this helps some.

1 Like

No worries man, thanks for your detailed response though! I’ll find a workaround :+1: