How to use qrc resources in qss in qtdesigner?

Question

I need to create QLineEdit with the search icon on the left side and i'm doing it in QtDesigner.

I've added my search_icon.svg to my resources.qrc file and assigned this qrc as a resource of my application using resource browser of QtDesigner. The contents of resources.qrc look like this:

<RCC>
  <qresource prefix = "/icons">
    <file alias = "search_icon.svg">search_icon.svg</file>
  </qresource>
</RCC>

Then I referenced search_icon.svg in "Edit Style Sheet" window of QtDesigner using qss:

QLineEdit {
    background-image: url(:/icons/search_icon.svg);
    background-position: left;
    padding: 2 2 2 25;
} 

but search_icon.svg hadn't been displayed on QLineEdit.

QtDesigner's mainWindow.ui and resources.qrc as same as search_icon.svg are in the same directory.

Do I need to compile resources.qrc somehow so that search_icon.svg can be used in qss of "Edit Style Sheet" window of QtDesigner?

Answer 1

What you need is to add the.qrc to the ui following the following steps:

• On the right side there should be a dockwidget called "Resource Browser"(If it is hidden then you must enable it by clicking on View->Resource Browser).

  

• Then click on the left icon called "Edit Resources" and the following window will open:

  

• Then you press the button, select the.qrc and press the "OK" button.

With the above, the.qrc icons will be visible in the Qt Designer preview which specifically adds the following to the.ui:

  <include location="qresources.qrc"/>
 </resources>

Another direct way to load the icon from the.qrc is to open the Qt StyleSheet form by right-clicking on the widget and selecting the "Add Resource" option and the "Resource Browser" will appear, so you must follow the previous steps.

---

If you are going to convert the.ui to.py that contains a.qrc then you must also convert it, assuming the files are main.ui and main.qrc then you should follow the next steps:

pyuic5 main.ui -o foo.py -x
pyrcc5 main.qrc -o main_rc.py