How do I set a weight to SF Symbols for iOS 13?
IosSwiftSwiftuiSf SymbolsIos Problem Overview
I have this
Image(systemName: "arrow.right")
But how do I make it bold, semibold etc?
I am using the new SwiftUI.
Ios Solutions
Solution 1 - Ios
When using the font
modifier, set a weight to the font you're passing.
For example, if you want to use one of the default text styles (which I recommend, since they adapt to the user's Dynamic Type setting), you can do it like this:
Image(systemName: "arrow.right")
.font(Font.title.weight(.ultraLight))
If you want to specify a font size, you can do it like this:
Image(systemName: "arrow.right")
.font(Font.system(size: 60, weight: .ultraLight))
Solution 2 - Ios
For UIKit, symbols can be configured as follows:
UIImage(systemName: "arrow.right",
withConfiguration: UIImage.SymbolConfiguration(pointSize: 16, weight: .bold))
Solution 3 - Ios
SwiftUI 1.0
I just wanted to also mention how to change the weight along with a custom font size.
HStack(spacing: 40) {
Image(systemName: "moon.zzz")
.font(Font.system(size: 60, weight: .ultraLight))
Image(systemName: "moon.zzz")
.font(Font.system(size: 60, weight: .light))
Image(systemName: "moon.zzz")
.font(Font.system(size: 60, weight: .regular))
Image(systemName: "moon.zzz")
.font(Font.system(size: 60, weight: .bold))
}
Solution 4 - Ios
UIKit -- Swift 5 -- Xcode 11
If you only want to set the weight (so you don't mess up auto icon sizing), do this:
let configuration = UIImage.SymbolConfiguration(weight: .semibold)
UIImage(systemName: "trash", withConfiguration: configuration)
Solution 5 - Ios
You can also wrap the Image
with Text
. With that you can use and assign the fontWeight()
to Text
:
Text(Image(systemName: "xmark"))
.fontWeight(.semibold)
Solution 6 - Ios
UIKit SWIFT 5.x
To set their attributes: create a configuration then pass it in as a parameter:
let imageConfig = UIImage.SymbolConfiguration(pointSize: 22, weight: .black, scale: .large)
let image = UIImage(systemName: "delete.right", withConfiguration: imageConfig)