Customization of SF symbols in SwiftUI
By shagrafnasheetIn this SwiftUI, we’ll learn how to customize our SF symbols in SwiftUI.
What this Blog will cover:
- Resizing of SF Symbol
- Changing the Color of the symbol and providing it with a gradient color
- Variants of the SF symbol
Resizing of SF Symbol
struct ContentView:View{
var body: some View{
VStack(spacing: 10 ){
Image(systemName: "eye")
}
.frame(maxWidth: .infinity, maxHeight: .infinity)
.background(Color.black.opacity(0.2))
.ignoresSafeArea(.all)
}
}
So this is what an actual “eye” SF symbol looks like without any customization. Let’s see how we can resize this “eye” SF symbol.
Well, there are two ways we can do this, We can use the imageScale modifier and we can also use the font modifier for changing the size of the SF symbols.
ImageScale modifier
Let’s use the ImageScale modifier first. There are three options that we can use with the ImageScale modifier: small, medium, and large.
struct ContentView:View{
var body: some View{
VStack(spacing: 10 ){
// * change size
Image(systemName: "eye")
Text("...........").foregroundColor(Color.gray.opacity(0.6))
Image(systemName: "eye")
.imageScale(.large) // small, large, medium
} .frame(maxWidth: .infinity,maxHeight: .infinity)
.background(Color.black.opacity(0.1))
.ignoresSafeArea(.all)
}
}
Font modifier
Now if you want to be more specific with the symbol size you can use a font modifier and give it your desired symbol size value. You can make it as big and small as you’d like.
struct ContentView:View{
var body: some View{
VStack(spacing: 10 ){
// * change size
Image(systemName: "eye")
Text("...........").foregroundColor(Color.gray.opacity(0.6))
Image(systemName: "eye")
.imageScale(.large) // small, large, medium
// .font(.system(size: 90)) /// resize sf symbols
Text("...........").foregroundColor(Color.gray.opacity(0.6))
Image(systemName: "eye")
.font(.system(size: 90)) /// resize sf symbols
} .frame(maxWidth: .infinity,maxHeight: .infinity)
.background(Color.black.opacity(0.1))
.ignoresSafeArea(.all)
}
}
Changing the Color of the SF symbols
So, for changing the color of the SF symbol, we can use the foregroundColor and foregroundStyle modifiers. Let’s see how we can change the color of the SF symbol.
Also check: Set the size of SF Symbols in SwiftUI
ForegroundColor
struct ContentView:View{
var body: some View{
VStack(spacing: 10 ){
// * change color * //
Image(systemName: "eye")
Text("...........").foregroundColor(Color.gray.opacity(0.6))
Image(systemName: "eye")
.font(.system(size: 60))
.foregroundColor(Color.red) // plain color
Text("...........").foregroundColor(Color.gray.opacity(0.6))
} .frame(maxWidth: .infinity,maxHeight: .infinity)
.background(Color.black.opacity(0.1))
.ignoresSafeArea(.all)
}
}
ForegroundStyle
So if you want to give a gradient color instead of a simple plain color to the SF symbol you can use ForegroundStyle.
struct ContentView:View{
var body: some View{
VStack(spacing: 10 ){
// * change color * //
Image(systemName: "eye")
Text("...........").foregroundColor(Color.gray.opacity(0.6))
Image(systemName: "eye")
.font(.system(size: 60))
.foregroundColor(Color.red) // plain color
Text("...........").foregroundColor(Color.gray.opacity(0.6))
Image(systemName: "eye") .font(.system(size: 60))
.foregroundStyle(LinearGradient(colors: [.teal,.yellow,.indigo], startPoint: .topLeading, endPoint: .bottomTrailing)) // gradient color
} .frame(maxWidth: .infinity,maxHeight: .infinity)
.background(Color.black.opacity(0.1))
.ignoresSafeArea(.all)
}
}
Variants of the SF symbols
So what else we can do? There are different variants of SF symbols filled, outlined, circled, etc. And there’s a modifier, symbolVariant, that lets us use all these different variants of each SF symbol. let’s see how we can use the symbolVariant modifier.
struct ContentView:View{
var body: some View{
VStack(spacing: 10 ){
// Varients of Sf Symbols
Image(systemName: "eye")
.font(.system(size: 90))
Text("...........").foregroundColor(Color.gray.opacity(0.6))
Image(systemName: "eye") // this equals to "eye.slash"
.font(.system(size: 90))
.symbolVariant(.slash)
Text("...........").foregroundColor(Color.gray.opacity(0.6))
Image(systemName: "eye")
.font(.system(size: 90))
.symbolVariant(.circle) // circle, fill,rectangle,slash, square
Text("...........").foregroundColor(Color.gray.opacity(0.6))
Image(systemName: "eye")
.font(.system(size: 90))
.symbolVariant(.square)
} .frame(maxWidth: .infinity,maxHeight: .infinity)
.background(Color.black.opacity(0.1))
.ignoresSafeArea(.all)
}
}
If the given variant is not available for that specific symbol it will simply show the plain sf symbol image. like there’s no rectangle variant of the “eye” symbol so it will simply display the plain “eye” symbol.
Image(systemName: "eye") .symbolVariant(.rectangle) // this will not work
Leave a Reply