Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. Setting svg icon for TabButton

Setting svg icon for TabButton

Scheduled Pinned Locked Moved Unsolved QML and Qt Quick
qmliconsvg
7 Posts 5 Posters 871 Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • S Offline
    S Offline
    Saviz
    wrote on 9 Apr 2023, 00:57 last edited by
    #1

    I am trying to set an svg icon for a TabButton here is my code:

    main.qml:

    import QtQuick 2.7
    import QtQuick.Controls 2.7
    
    Window {
        
        id: window
    
        width: 900
        height: 600
    
        visible: true
        title: qsTr("SVG test")
        
        TabButton {
            
            width: 200
            height: 30
            
            anchors.centerIn: parent
            
            text: "Click me!"
            
            icon.source: "qrc:/icons/feather-dark/svg/activity.svg"
        }
    }
    
    

    I checked my qrc file multiple times and the icon is there:

    409ae120-1ac3-4030-9ae1-2142d1214fda-image.png

    I also right-click and copy the path from the Qt creator IDE to make sure that the path is correct.

    Yet the icon is not shown when ruining. Why is that?

    M 1 Reply Last reply 9 Apr 2023, 09:39
    0
    • S Saviz
      9 Apr 2023, 00:57

      I am trying to set an svg icon for a TabButton here is my code:

      main.qml:

      import QtQuick 2.7
      import QtQuick.Controls 2.7
      
      Window {
          
          id: window
      
          width: 900
          height: 600
      
          visible: true
          title: qsTr("SVG test")
          
          TabButton {
              
              width: 200
              height: 30
              
              anchors.centerIn: parent
              
              text: "Click me!"
              
              icon.source: "qrc:/icons/feather-dark/svg/activity.svg"
          }
      }
      
      

      I checked my qrc file multiple times and the icon is there:

      409ae120-1ac3-4030-9ae1-2142d1214fda-image.png

      I also right-click and copy the path from the Qt creator IDE to make sure that the path is correct.

      Yet the icon is not shown when ruining. Why is that?

      M Offline
      M Offline
      Markkyboy
      wrote on 9 Apr 2023, 09:39 last edited by
      #2

      @Saviz - what does console say?, are you sure your image path is correct?

      Don't just sit there standing around, pick up a shovel and sweep up!

      I live by the sea, not in it.

      S 1 Reply Last reply 9 Apr 2023, 20:11
      1
      • M Markkyboy
        9 Apr 2023, 09:39

        @Saviz - what does console say?, are you sure your image path is correct?

        S Offline
        S Offline
        Saviz
        wrote on 9 Apr 2023, 20:11 last edited by
        #3

        @Markkyboy Unfortunately, there is no error or warning.

        I tried every possible combination from using absolute path to resource file with qrc from removing extension to using extension and even setting height and width.

        The end result is the same:

        No icon is showing and there is no messages displayed by the complier/interpreter/IDE in the debug/info messages section

        1 Reply Last reply
        0
        • A Offline
          A Offline
          Allstar12345
          wrote on 10 Apr 2023, 12:51 last edited by
          #4

          It might sound silly if you have no console messages but do you have

          QT += svg
          
          

          Included in your .pro file?

          S 1 Reply Last reply 12 Apr 2023, 02:52
          1
          • A Allstar12345
            10 Apr 2023, 12:51

            It might sound silly if you have no console messages but do you have

            QT += svg
            
            

            Included in your .pro file?

            S Offline
            S Offline
            Saviz
            wrote on 12 Apr 2023, 02:52 last edited by
            #5

            @Allstar12345 I am using Cmake so I have this:

            find_package(Qt6 REQUIRED COMPONENTS Svg)
            target_link_libraries(mytarget PRIVATE Qt6::Svg)

            J J 2 Replies Last reply 12 Apr 2023, 08:15
            0
            • S Saviz
              12 Apr 2023, 02:52

              @Allstar12345 I am using Cmake so I have this:

              find_package(Qt6 REQUIRED COMPONENTS Svg)
              target_link_libraries(mytarget PRIVATE Qt6::Svg)

              J Offline
              J Offline
              JonB
              wrote on 12 Apr 2023, 08:15 last edited by
              #6

              @Saviz
              Just a thought: why not temporarily change your .svg file to, say, a .png or .jpg file? Then you will know whether the issue is due to SVG or somehow due to the path/resource or icon.source or whatever.

              1 Reply Last reply
              0
              • S Saviz
                12 Apr 2023, 02:52

                @Allstar12345 I am using Cmake so I have this:

                find_package(Qt6 REQUIRED COMPONENTS Svg)
                target_link_libraries(mytarget PRIVATE Qt6::Svg)

                J Offline
                J Offline
                JoeCFD
                wrote on 12 Apr 2023, 13:31 last edited by JoeCFD 4 Dec 2023, 13:37
                #7

                @Saviz I guess the path of the svg file may not be right. Can you post your qrc file here?
                do you use qmake or cmake?

                TabButton  {
                    id: root
                
                    implicitHeight:  ***
                    implicitWidth:  ***
                
                    contentItem: Label {
                        anchors.fill: parent
                        Row {
                            spacing: 
                            Image {
                                id: buttonImage
                                height: root.height
                                width:  root.height
                                source:svg file
                            }
                
                            Text {
                                text: root.text
                                height: root.height
                                width:  root.availableWidth
                                color: "white"
                                horizontalAlignment: Text.AlignLeft
                                verticalAlignment: Text.AlignVCenter
                            }
                        }
                    }
                }
                
                1 Reply Last reply
                0

                2/7

                9 Apr 2023, 09:39

                topic:navigator.unread, 5
                • Login

                • Login or register to search.
                2 out of 7
                • First post
                  2/7
                  Last post
                0
                • Categories
                • Recent
                • Tags
                • Popular
                • Users
                • Groups
                • Search
                • Get Qt Extensions
                • Unsolved