[FIXED] Change Button Icon SVG Color

Issue

I have a couple of issues. I am trying to create a custom button that displays an icon for the user to click on. The source image is an svg.

1. While I have seen that the most common way with custom buttons is to use a ColorOverlay, I am somehow unable to do that since QtGraphicalEffects seems to not be a part of Qt6 according to this link hence I am unable to use ColorOverlay. I am building my app with Python and Pyside6.

2. I tried to use the Button.qml component to instantiate a button as well, but I can't get the search path right since it will look for my source icon image from the same directory as the Button.qml and I do not know how to change its search directory.

3. Ideally, I would like to be able to load the source images with using a qrc file, but I haven't found a way to use the images loaded into a qrc file inside QML and not Python.

Here's a snippet from my code with the custom button I tried to make:

Rectangle{
     width: 25
     height: 25
     color: "#00000000"
     Image{
        width: 24
        height: 24
        source: "random.svg"
      }

      MouseArea{

      }

 }

Button with QT's Button component:

Button{
    width: 25
    height: 25
    display: AbstractButton.IconOnly
    icon.source: "random.svg"
}

Solution

For problem no.1

Qt6.1 includes QtGraphicalEffects.

Problem no.2

Let's say the project structure is so

-- project
  -- main.qml
  -- customs
     -- Button.qml
     -- icons
         -- random.svg

In your main.qml import Button.qml under a namespace. lets say Cust (it must start with a capital letter).

// main.qml
import QtQuick 2.15
import QtQuick.Controls 2.15
import "./customs" as Cust

Cust.Button {
}

This time you are 100% sure, yours will be loaded. Now in your custom Button.qml add the source, which you say its relative to it

// Button.qml
Rectangle {
    ...
    source: "./icons/random.svg"
}

If the custom Button.qml code itself its not relative to the main.qml, like the Button.qml is somewhere not within the same folder as the main.qml. You should add the folder to the QML2_IMPORT_PATH environment variable to be able to import it

eg. /path/to/customs

You would also need a qmldir file in that folder for it to work as

// qmldir
module myCustomModule
Buttom 1.0 Button.qml

-- customs
   -- qmldir
   -- Button.qml

Then you can import it in main.qml as

// main.qml
import QtQuick 2.15
import QtQuick.Controls 2.15
import myCustomModule as Cust

Cust.Button {
}

If you didn't call yours also Button.qml and you called it say MyButton.qml, you could have done

// main.qml
import myCustomModule

MyButton {
}

That means you also have to declare MyButton in your qmldir

Problem no.3

You can use a qrc in a QML file as

source: "qrc:///random.svg"

This is strict, whereas in python you could have also done:

":/random.svg"

Answered By - surge10