QML: recoloring fragment shader (recolor monochrome icons in runtime)

fingerprint.svg

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160"><g fill="none" stroke="#000" stroke-linecap="round" stroke-width="6"><path d="m80 92c0 14.02 12 24 26 20"/><path d="m56.47 44.699c14.07-8 33.3-7.883 47.534.117"/><path d="m45 68c15.922-24 52.981-24.583 70.07 0"/><path d="m91.77 121.82c-6.253 0-22.299-12.235-22.299-29.25 0-6.644 3.218-11.263 10.532-11.281 7.313-.018 10.835 6.317 10.835 11.418 0 4.757 4.831 9.613 10.998 9.617 6.167.004 10.167-3.975 10.167-12.523 0-13.804-14.379-29.804-32-29.804-17.621 0-32 14-32 33.924 0 6.076 3 14.08 3 14.08"/><path d="m70.49 120.38c-7.721-7.641-11.492-18.469-11.492-28.385 0-9 5.7-21.251 20.697-21.251 14.997 0 21.515 13.147 21.439 20.74"/></g></svg>

recolorshader.qml

import QtQuick 2.4

Item {
  width: 320
  height: 640

  Image {
    id: img
    source: 'fingerprint.svg'
    sourceSize.width: 320
  }

  ShaderEffect {
    id: shader

    anchors.top: img.bottom
    anchors.left: img.left

    width: 320
    height: 320

    property variant source: img
    property color color: "#4caf50"

    fragmentShader: "
      uniform lowp sampler2D source;
      uniform highp vec4 color;
      uniform lowp float qt_Opacity;
      varying highp vec2 qt_TexCoord0;
      void main() {
        lowp vec4 tex = texture2D(source, qt_TexCoord0);
        gl_FragColor = vec4(color.r, color.g, color.b, tex.a) * qt_Opacity;
      }
    "
  }

  SequentialAnimation
  {
    running: true
    loops: Animation.Infinite
    ColorAnimation {
      target: shader
      property: "color"
      to: "#b71c1c"
      duration: 1000
    }
    ColorAnimation {
      target: shader
      property: "color"
      to: "#4caf50"
      duration: 1000
    }
  }

}