Display SF Symbols
Published by @SoNiceInfo at 6/24/2020
You can use SF Symbols as icons in the SwiftUI.
There is no need to prepare in advance, and you can display them with Image(systemName: "").
About SF Symbols
More than 1,500 SF Symbols are available for use in place of icons and images.
It's made of vectors, so you can freely enlarge it, change its thickness and color.
You can use it as a mock, or you can spend your time to create logic, not looking for materials.
How to Use SF Symbols
No prior installation is required to use SF Symbols.
Only you have to do is Image(systemName: "") to specify the icon.
In this case, I used TabView to change the SF Symbols in various ways.
I use 1.square.fill, 2.square.fill and 3.square.fill as TabView icons.
FaceID icon is displayed in the TabView with Image(systemName: "faceid").
It can be treated just like a normal image and, of course, it complies with the View protocol.
You can also use foregroundColor to change the color and font to change the thickness, just like an SVG image.
//
// ContentView.swift
//
import SwiftUI
struct ContentView: View {
var body: some View {
TabView {
Image(systemName: "faceid")
.tabItem {
Image(systemName: "1.square.fill")
Text("faceid")
}
Image(systemName: "faceid")
.resizable()
.scaledToFit()
.frame(width: 200.0, height: 200.0)
.foregroundColor(.blue)
.tabItem {
Image(systemName: "2.square.fill")
Text("Second")
}
Image(systemName: "faceid")
.resizable()
.scaledToFit()
.font(.system(size: 18, weight: .ultraLight, design: .serif))
.frame(width: 200.0, height: 200.0)
.foregroundColor(.blue)
.tabItem {
Image(systemName: "3.square.fill")
Text("Third")
}
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
Search for SF Symbols
To see all SF Symbols, you can download the Mac App from SF Symbols - SF Symbols - Human Interface Guidelines - Apple Developer
