この記事では、SwiftUIおよびUIKitアプリケーション用にSFシンボルをカスタマイズする方法について説明します。
- テキスト内にSFシンボルのアイコンを入れる
- アイコンのサイズをカスタマイズ
- アイコンの色をカスタマイズ
- アイコンのフロント層を強調
- アイコンの各層で異なる色を設定
SFシンボルの画像の追加について
Apple Developerのウェブサイトから、SFシンボルのアプリをダウンロードしていただけます。
SwiftUIでは、以下のコードを使用してください。
Image(systemName: "swift")
クリックしてUIKitのコードを展開
let img = UIImage(systemName: "swift")
let imageView = UIImageView(image: img)
imageView.center = .init(x: view.bounds.width / 2,
y: view.bounds.height / 2)
view.addSubview(imageView)
テキスト内にSF Symbolアイコンを含める
SwiftUIでは、以下のコードを使用してください。
Text("You can put a symbol \(Image(systemName: "swift")) within a text.")
クリックしてUIKitのコードを展開
let imgAttachment = NSTextAttachment(image: UIImage(systemName: "swift")!)
let labelText = NSMutableAttributedString(string: "Favorite programming language: ")
labelText.append(NSMutableAttributedString(attachment: imgAttachment))
labelText.append(NSAttributedString(string: "Swift"))
let label = UILabel()
label.attributedText = labelText
label.center = .init(x: 0,
y: view.bounds.height / 2)
label.sizeToFit()
view.addSubview(label)
SF Symbolアイコンのサイズを変更
プリセットされたサイズの1つを使うか、フォントサイズ数を指定することができます
SwiftUIでは、以下のコードを使用してください。
// より大きなSF Symbol
Image(systemName: "swift")
.font(.title)
// 特定サイズのSF Symbolアイコン
Image(systemName: "checkmark")
.font(.system(size: 30))
クリックしてUIKitのコードを展開
let largeImg = UIImage(systemName: "swift", withConfiguration: UIImage.SymbolConfiguration(textStyle: .largeTitle))
let customFontSizeImg = UIImage(systemName: "swift", withConfiguration: UIImage.SymbolConfiguration(font: .systemFont(ofSize: 60)))
アイコンサイズとフォントファミリを同時に変更する
SF シンボルアイコンに複数の設定を同時に適用することができます。
SwiftUIでは、以下のコードを使用してください。
Image(systemName: "checkmark")
.font(.title.weight(.black))
.foregroundColor(.green)
クリックしてUIKitのコードを展開
let weightConfig_black = UIImage.SymbolConfiguration(weight: .black)
let fontConfig_largeTitle = UIImage.SymbolConfiguration(textStyle: .largeTitle)
let largeBoldConfig = weightConfig_black.applying(fontConfig_largeTitle)
let largeBlackImg = UIImage(systemName: "checkmark", withConfiguration: largeBoldConfig)
アイコンのフロントレイヤーをハイライト表示します。
SFシンボルアイコンには複数のレイヤーが含まれる場合があります。 アイコンのフロントレイヤーをハイライト表示できます。
SwiftUIでは、以下のコードを使用してください。
Section {
Image(systemName: "checkmark.icloud.fill")
.font(.largeTitle)
.foregroundColor(.blue)
Image(systemName: "checkmark.icloud.fill")
.font(.largeTitle)
.foregroundColor(.blue)
.symbolRenderingMode(.hierarchical)
}
クリックしてUIKitのコードを展開
let frontHighlightedIcon = UIImage(systemName: "checkmark.icloud.fill", withConfiguration: UIImage.SymbolConfiguration(hierarchicalColor: .systemBlue))
アイコン全体に色を割り当てる
SwiftUIでは、以下のコードを使用してください。
Image(systemName: "checkmark")
.foregroundColor(.green)
クリックしてUIKitのコードを展開
let blueInternetImg = UIImage(systemName: "network")?.withTintColor(.systemBlue)
アイコンのレイヤーごとに異なる色を設定する
一部のアイコンは、すでにAppleのカラー構成になっています。
このプリセットカラーを表示するには、SF Symbolsを開き、右側のメニューのブラシアイコンをクリックして、マルチカラーオプションをクリックしてください。
事前設定された色を使いたい場合には、以下のコードを使えます。
Image(systemName: "checkmark.circle.trianglebadge.exclamationmark")
.font(.largeTitle)
.symbolRenderingMode(.multicolor)
クリックしてUIKitのコードを展開
let multiColorImg = UIImage(systemName: "gear.badge.checkmark", withConfiguration: UIImage.SymbolConfiguration.preferringMulticolor())
アイコンの各レイヤーの色をご自身で定義することもできます。
SwiftUIでは、以下のコードを使用してください。
Image(systemName: "display.trianglebadge.exclamationmark")
.font(.largeTitle)
.symbolRenderingMode(.palette)
.foregroundStyle(.red, .green)
Image(systemName: "network.badge.shield.half.filled")
.font(.largeTitle)
.symbolRenderingMode(.palette)
.foregroundStyle(.green, .blue)
クリックしてUIKitのコードを展開
let multiColorImg = UIImage(systemName: "gear.badge.checkmark", withConfiguration: UIImage.SymbolConfiguration(paletteColors: [.systemGreen, .systemBlue]))
