SwiftUIおよびUIKitでのSFシンボルのカスタマイズ（サイズ、カラー、各層で異なる色）

この記事では、SwiftUIおよびUIKitアプリケーション用にSFシンボルをカスタマイズする方法について説明します。

- テキスト内にSFシンボルのアイコンを入れる
- アイコンのサイズをカスタマイズ
- アイコンの色をカスタマイズ
- アイコンのフロント層を強調
- アイコンの各層で異なる色を設定

## SFシンボルの画像の追加について

Apple Developerのウェブサイトから、SFシンボルのアプリをダウンロードしていただけます。

https://developer.apple.com/sf-symbols/

![img](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635330/718f1781-8449-84ee-243e-fc4b097cbd81.png)

SwiftUIでは、以下のコードを使用してください。

```swift
Image(systemName: "swift")
```

<details><summary>クリックしてUIKitのコードを展開</summary><div>

```swift
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)
```

</div></details>

## テキスト内にSF Symbolアイコンを含める

![スクリーンショット 2021-10-22 14.35.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635330/610d0dd1-fd84-1974-6ebb-5495dae5c936.png)

SwiftUIでは、以下のコードを使用してください。

```swift
Text("You can put a symbol \(Image(systemName: "swift")) within a text.")
```

<details><summary>クリックしてUIKitのコードを展開</summary><div>

```swift
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)
```

</div></details>

## SF Symbolアイコンのサイズを変更

プリセットされたサイズの1つを使うか、フォントサイズ数を指定することができます

![スクリーンショット 2021-10-22 14.39.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635330/ad4456a3-54d1-be9a-7882-0ae3ade158a2.png)

SwiftUIでは、以下のコードを使用してください。

```swift
// より大きなSF Symbol
Image(systemName: "swift")
    .font(.title)
// 特定サイズのSF Symbolアイコン
Image(systemName: "checkmark")
    .font(.system(size: 30))
```

<details><summary>クリックしてUIKitのコードを展開</summary><div>

```swift
let largeImg = UIImage(systemName: "swift", withConfiguration: UIImage.SymbolConfiguration(textStyle: .largeTitle))

let customFontSizeImg = UIImage(systemName: "swift", withConfiguration: UIImage.SymbolConfiguration(font: .systemFont(ofSize: 60)))
```

</div></details>

## アイコンサイズとフォントファミリを同時に変更する

SF シンボルアイコンに複数の設定を同時に適用することができます。

SwiftUIでは、以下のコードを使用してください。

```swift
Image(systemName: "checkmark")
    .font(.title.weight(.black))
    .foregroundColor(.green)
```

<details><summary>クリックしてUIKitのコードを展開</summary><div>

```swift
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)
```

</div></details>

## アイコンのフロントレイヤーをハイライト表示します。

SFシンボルアイコンには複数のレイヤーが含まれる場合があります。 アイコンのフロントレイヤーをハイライト表示できます。

![スクリーンショット 2021-10-22 14.45.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635330/f5f95a38-bb24-2d9f-43c1-b3b3ac5cdebc.png)

SwiftUIでは、以下のコードを使用してください。

```swift
Section {
    Image(systemName: "checkmark.icloud.fill")
        .font(.largeTitle)
        .foregroundColor(.blue)

    Image(systemName: "checkmark.icloud.fill")
        .font(.largeTitle)
        .foregroundColor(.blue)
        .symbolRenderingMode(.hierarchical)
}
```

<details><summary>クリックしてUIKitのコードを展開</summary><div>

```swift
let frontHighlightedIcon = UIImage(systemName: "checkmark.icloud.fill", withConfiguration: UIImage.SymbolConfiguration(hierarchicalColor: .systemBlue))
```

</div></details>

## アイコン全体に色を割り当てる

![スクリーンショット 2021-10-22 23.15.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635330/95be9adf-8a86-1b3a-4ab4-f474c9277e17.png)

SwiftUIでは、以下のコードを使用してください。

```swift
Image(systemName: "checkmark")
    .foregroundColor(.green)
```

<details><summary>クリックしてUIKitのコードを展開</summary><div>

```swift
let blueInternetImg = UIImage(systemName: "network")?.withTintColor(.systemBlue)
```

</div></details>

## アイコンのレイヤーごとに異なる色を設定する

![スクリーンショット 2021-10-22 23.16.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635330/5993f72e-34dd-494a-da72-35e64d7a89a9.png)

一部のアイコンは、すでにAppleのカラー構成になっています。
このプリセットカラーを表示するには、`SF Symbols`を開き、右側のメニューのブラシアイコンをクリックして、`マルチカラー`オプションをクリックしてください。

![スクリーンショット 2021-10-22 14.52.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635330/02ce4159-4851-3ef4-66cd-e213fba29d1c.png)

事前設定された色を使いたい場合には、以下のコードを使えます。

```swift
Image(systemName: "checkmark.circle.trianglebadge.exclamationmark")
    .font(.largeTitle)
    .symbolRenderingMode(.multicolor)
```

<details><summary>クリックしてUIKitのコードを展開</summary><div>

```swift
let multiColorImg = UIImage(systemName: "gear.badge.checkmark", withConfiguration: UIImage.SymbolConfiguration.preferringMulticolor())
```

</div></details>

アイコンの各レイヤーの色をご自身で定義することもできます。

![スクリーンショット 2021-10-22 23.16.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635330/84eb2465-505e-bf47-c7f0-625c5daed913.png)

SwiftUIでは、以下のコードを使用してください。

```swift
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)
```

<details><summary>クリックしてUIKitのコードを展開</summary><div>

```swift
let multiColorImg = UIImage(systemName: "gear.badge.checkmark", withConfiguration: UIImage.SymbolConfiguration(paletteColors: [.systemGreen, .systemBlue]))
```

</div></details>

---

:relaxed: [Twitter @MszPro](https://twitter.com/MszPro)

:sunny: [私の公開されているQiita記事のリストをカテゴリー別にご覧いただけます。](http://mszpro.com/ioskiji/)
<img width="150" src="https://cdn.mszmagic.com/static-web-content/AppClipImage_small.png">