How can I create a button with image in SwiftUI?

Question

I created a button in SwiftUI with these line of codes:

Button(action: {
    print("button pressed")
}) {
    Image("marker")
}

but marker image automatically changes to blue color.

I want to use original image in button.

this is original marker.png:

but SwiftUI changes it to this:

I remember we have tintColor or something like this in UIButton, but I can't find it in SwiftUI.

score 59 · Answer 1 · answered Jun 30 '19 at 00:42

59

Another way to set programmatically:-

var body: some View {
        Button(action: {
          print("button pressed")

        }) {
            Image("marker")
            .renderingMode(Image.TemplateRenderingMode?.init(Image.TemplateRenderingMode.original))
        }
    }

answered Jun 30 '19 at 00:42

Hussain Shabbir

14,801
5
40
56

28

`.renderingMode(.original)` works for me and is much cleaner! – Benjamin Kindle Sep 09 '19 at 14:47
When I try this, it includes a white bar behind the image. Is there a way to hide the white bar, but show the image? – ScottyBlades Sep 28 '19 at 05:34

score 36 · Accepted Answer · answered Jun 29 '19 at 21:15

36

Go to the image and change the Render As "Original Image"

answered Jun 29 '19 at 21:15

souvickcse

7,742
5
37
64

score 32 · Answer 3 · edited Nov 01 '19 at 21:32

32

You can try this:

var body: some View {
        Button(action: {
          print("button pressed")

        }) {
            Image("marker")
            .renderingMode(.original)
        }
    }

edited Nov 01 '19 at 21:32

Dino

7,779
12
46
85

answered Oct 31 '19 at 19:59

Zack Shapiro

6,648
17
83
151

6

While this code may answer the question, providing additional context regarding why and/or how this code answers the question improves its long-term value. – Martin Wickman Nov 01 '19 at 13:52

score 8 · Answer 4 · edited Feb 20 '20 at 07:44

8

SwiftUI

var body: some View {
      HStack {
           Image(uiImage: UIImage(named: "Login")!)
                .renderingMode(.original)
                .font(.title)
                .foregroundColor(.blue)

           Text("Login")
                .font(.title)
                .foregroundColor(.white)
      }
}

edited Feb 20 '20 at 07:44

Rohit Makwana

4,337
1
21
29

answered Feb 19 '20 at 10:29

Srinivasan_iOS

972
10
12

score 0 · Answer 5 · answered Jun 28 '23 at 08:13

0

Two ways to do this

1st through the attribute inspector -

2nd through .renderingMode() modifier -

Image("ImageName")    
   .resizable()    
   .renderingMode(.original)   
   .frame(width: 22, height: 22)

answered Jun 28 '23 at 08:13

Anubhav Singh

905
6
5

How can I create a button with image in SwiftUI?

5 Answers5