Using Embedded SVGs in collections

Design help Custom code
1

My sharable link:
https://preview.webflow.com/preview/ironmarket?preview=cb858705174666c8c3b59d2f6ae256b8

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?)

2

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.

25%20PM
25%20PM1664×1324 193 KB

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.

3

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