Custom javascript function change color of svg icon

[tigi]

Have you considered using Additional icons for this? You can specify a value range and assign a specific icon to this range. It's also possible to change the whole icon hue which might work in certain cases: https://forum.logicmachine.net/showthrea...0#pid12060

Thanks for the tip. Additional icons is indeed an option, I've opted for the 'filter' attribute though.

I made my svg grey 40%, this seems to work for changing to green, orange, red,..
Additionally the text color changes too with the code below.
Converting hex color to filter css color can be done here: https://codepen.io/sosuke/pen/Pjoqqp

Code:

$(function() {
  $('.iconcolor-by-value').each(function(i, el) {
    var $el = $(el), addr = $(el).data('object'), icon = $el.find('.icon');
    if (addr) {
      grp.listen(addr, function(obj) {
      console.log(icon.get(0), obj.value);
        var value = obj.value
          , color = 'green'; // default color
            filter = 'invert(55%) sepia(95%) saturate(2530%) hue-rotate(82deg) brightness(108%) contrast(129%)';

        if (value >= 3 && value <= 4) {
          color = 'orange';
          filter = 'invert(68%) sepia(55%) saturate(5908%) hue-rotate(359deg) brightness(98%) contrast(100%)';
        }
        else if (value >= 5) {
          color = 'red';
          filter = 'invert(16%) sepia(100%) saturate(7486%) hue-rotate(15deg) brightness(104%) contrast(121%)';
        }

       // icon.css('background-color', color);
        $(el).css('color', color);
        icon.css('filter', filter);
      });
    }
  });
});