opaque/Icon.qml

import QtGraphicalEffects 1.0
import QtQuick 2.7
import QtQuick.Controls 2.4
import QtQuick.Controls.Material 2.0
import QtQuick.Layouts 1.3

import "fonts/Twemoji.js" as T
import "." as Widgets
import "theme"

Rectangle {
    id: root

    property color backgroundColor: parent.color
    property color hilightBackgroundColor: backgroundColor

    property bool isHover: false

    color: isHover ? backgroundColor : hilightBackgroundColor

    property alias iconColor: iconColorOverlay.color

    property alias source: srcImg.source

    property real rotationAngle: 0.0

    signal clicked()

    Image {
        id: srcImg
        anchors.fill: parent
        antialiasing: true
        smooth: true
        visible: false
        // Apparently qml can now only DOWN-SCALE/SHRINK the SVG, so with this hack it which won't cause blurriness/pixelation
        sourceSize.width: root.width*2
        sourceSize.height: root.height*2
    }

    ColorOverlay{
        id: iconColorOverlay
        anchors.fill: srcImg
        source: srcImg

        antialiasing: true
        smooth: true
        transform: Rotation { origin.x: width/2; origin.y: height / 2; angle: rotationAngle}
    }

    MouseArea {  // Full row mouse area triggering onClick
        id: ma
        anchors.fill: parent
        hoverEnabled: true

        onClicked: { root.clicked() }

        onEntered: {
            isHover = true
        }

        onExited: {
            isHover = false
        }
    }

}