A common technique for creating variable-color icons involves using a filter over a black icon image. This method is necessary because embeds are inaccessible within components, and it prevents the creation of multiple image versions. The filter allows the icon’s color to be toggled between the established design system colors using a variable within the component.
The current challenge is that variables do not support filters directly. The workaround requires creating linked values inside the UI to control the filter.
Example:
filter:
invert(var(–invert))
sepia(var(–sepia))
saturate(var(–saturate))
hue-rotate(var(–hue))
brightness(var(–brightness))
contrast(var(–contrast));
However, there are limitations:
-
The required saturate value is often high, and the current variable maximum is 500%. This limitation prevents building it as a true variable.
-
The hue-rotate filter does not accept a linked variable number value for degrees.
Enhancement Request
Fix the Percenage Value to support greater then a value of 500
Add the linked variable option to hue-roate where a number can be linked to populate the degree. Enhancement Request: Variable Value Support
-
Percentage Value Fix: Update the percentage value field to support values greater than 500.
-
Hue-Rotate Functionality: Add the option to link a variable to the hue-rotate property to dynamically populate the degree value.
Although a workaround exists in adding this as a custom property, a significant issue arises when building component variants. Every modification made to a variant in Webflow generates a new variable entry in the CSS, leading to extreme bloat with each change and it stays in the css code based on testng.