Forum Academy Marketplace Showcase Pricing Features

Change SVG colour (color) dynamically πŸ˜€

I came across an issue where I wanted to use and Option Set with an svg icon (from Google Material Design) and display it dynamically in a a repeating group for a menu to use across the site.

The issue I had was changing the colours of the SVGs dynamically.

The fix for me (and I hope this helps someone) was to install the Classify plugin first of all (you ay not need this depending on how you want to assign the ID, Class names)

In your Data > Option Sets > Menu Items (or whatever name you have given it), create a name, an image SVG attribute, Colour attribute text).

Create your menu items and when you are adding the colour you will need to convert them to CSS filters which you can do here: https://codepen.io/sosuke/pen/Pjoqqp

Now on the image item you can apply a class/id depending on what you are trying to do and with CSS dynamically assign the style to an element. Add the custom CSS to a page using an HTML element and reference the option set in the dynamic data. don’t forget to make the ID/Class unique if you are applying different colours.

I am new to Bubble so forgive me if I have not done something in the correct way :).

some images to illustrate

Cheers Stu :grinning:


s2

s4

2 Likes