SwiftUI add image to left side of text field - uitextfield

Question

I'm trying to get an SF Symbol on the left side of a text field in SwiftUI, but the methods used before SwiftUI don't really work. I thought this code would work, but it didn't. Also if anyone could help, how would I change the font and color of the text in the text field?
Here's an image of what I'm trying to accomplish: https://i.stack.imgur.com/Dud0M.png
TextField(textFieldDescription, text:
.constant(""))
.padding(.all)
.background(textFieldBackground)
.cornerRadius(10)
.leftViewMode = Image(systemName: "lock").always
.leftViewMode = .always

Answer 1

Here's one implementation. Note that there is a bug, where if the initial text of the textfield is empty, the color and font setting will be ignored:
HStack {
Image(systemName: "lock")
TextField("", text: .constant("typed text")).foregroundColor(Color.red).font(Font.custom("Papyrus", size: 16))
}
.padding()
.overlay(RoundedRectangle(cornerRadius: 10).stroke(lineWidth: 2).foregroundColor(Color.black))

Answer 2

SwiftUI, XCode 11.6
This code worked for me.
Note:-
The yellow border outside the view is background view color which will not be there in your case. Outer-most HStack holds another HStack(inner HStack) of items image and TextField. To inner HStack
Spacer(minLength: 20) is added move away from the edge of the screen.
HStack {
Spacer(minLength: 20)
HStack (alignment: .center,
spacing: 10) {
Image("userName")
.resizable()
.frame(width: 30, height: 30, alignment: .center)
.foregroundColor(.black)
.frame(minWidth: 0, maxWidth: 30)
.frame(minHeight: 0, maxHeight: 33)
TextField ("User Name", text: $userName)
} // HSTack
.padding([.top,.bottom], 2)
.padding(.leading, 5)
.background(Color.white, alignment: .center)
.cornerRadius(5)
Spacer(minLength: 20)
}

Answer 3

Here is my implementation with ZStack:
ZStack(alignment: .trailing) {
TextField("", text: $text)
.font(Font.system(size: 21))
Button(action: {
//Some button action
}) {
Image("iconName").resizable()
}
.frame(width: 35, height: 35)
.padding(.trailing, 10)
}

Answer 4

If you can, I might recommend encapsulating your TextField and other inputs within SwuiftUI's Form container around your TextField inputs. This will provide you with some "freebie" styling that can make what you're looking for a bit easier. For example, in iOS and iPadOS, the Form wrapper renders each element as an item in a List with the .grouped style. (It's a bit different for macOS.)
Here's what I used to achieve the style you're looking for. One note: SF Symbols aren't all uniform in their width, so you'd want to explicitly set the frame dimensions and padding to get everything lined up perfectly.
Form {
HStack{
Image(systemName:"envelope")
// play with the frame and padding here
TextField("Email Address", text: $email)
}
HStack{
Image(systemName:"lock")
SecureField("Password", text: $password)
}
}