SwiftUIでSF Symbolsを使いこなす

SF Symbols on SwiftUI

SwiftUIでは簡単にSF Symbolsを使用できます。

Image(systemName: "heart")

レンダリングモードの変更(symbolRenderingMode)

SF Symbolsにはレンダリングモードが4つ用意されており、それぞれで色のパターンが設定可能です。

Image(systemName: "heart.circle.fill")
  .symbolRenderingMode(.palette)
  .foregroundStyle(.green, .yellow)
Image(systemName: "heart.circle.fill")
  .symbolRenderingMode(.multicolor)
Image(systemName: "heart.circle.fill")
  .symbolRenderingMode(.hierarchical)
Image(systemName: "heart.circle.fill")
  .symbolRenderingMode(.monochrome)

派生の作成(symbolVariant)

普通のheartにもその後に.以降にfill square rectangleなど派生系(Variant)があります。

こういったものもコードsymbolVariantで指定することが可能です。

Image(systemName: "heart")
Image(systemName: "heart")
  .symbolVariant(.circle)
  .symbolVariant(.fill)
Image(systemName: "heart.circle.fill")

利用例

struct MuteButton: View {
  @State var muted = false

  var body: some View {
    Button {
      muted.toggle()
    } label: {
      Image(systemName: "mic")
        .symbolRenderingMode(muted ? .palette : .monochrome)
        .foregroundStyle(muted ? .pink : .black, .black)
        .symbolVariant(muted ? .slash : .none)
        .symbolVariant(.circle)
        .font(.system(size: 100))
    }
  }
}