SF Symbolsを使う
Published by @SoNiceInfo at 6/24/2020
SwiftUIでアイコンを使いたいときはSF Symbolsが利用できます。
事前の準備は不要でImage(systemName: "")で利用可能です。
SF Symbolsとは
SF Symbolsはアイコンや画像の代わりに使える素材で1,500以上用意されています。
ベクターで作られているので自由に拡大させたり、太さ、色を変えることができます。
モック的に利用するもよし、素材を探す時間をロジック作成に当てるもよしです。
SF Symbolsの使い方
SF Symbolsを利用するのに事前のインストール等は不要です。Image(systemName: "")で使いたいアイコンをするだけで利用できます。
今回はTabViewを利用してSF Symbolsを様々変化させていています。
TabViewのアイコンには1.square.fill, 2.square.fill, 3.square.fillを利用しています。
TabView内のコンテンツではImage(systemName: "faceid")でfaceidのアイコンを呼び出しています。
普通の画像と同様に扱いことができて、もちろんViewプロトコルにも準拠しています。
SVG画像のようにforegroundColorで色を変えたり、fontで太さを変えることもできます。
//
// 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()
}
}
SF Symbolsを検索する
すべての素材を見るにはSF Symbols - SF Symbols - Human Interface Guidelines - Apple Developerの
「download the SF Symbols app」からMac Appをダウンロードできます。
