【SwiftUI】Twitterのような公式マークを作成する

はじめに

公式マークを作る機会があったので記録しておきます。

青	黄	赤	緑

実装

import SwiftUI

struct OfficialMark: View {
    private let size: CGFloat
    
    private let checkMarkColor: Color
    
    init(_ size: CGFloat, checkMarkColor: Color = .white) {
        self.size = size
        self.checkMarkColor = checkMarkColor
    }
    
    var body: some View {
        ZStack(alignment: .center) {
            Image(systemName: "seal.fill")
                .resizable()
                .aspectRatio(1.0, contentMode: .fit)
                .frame(width: size, height: size)
                .fontWeight(.black)
            
            Image(systemName: "checkmark")
                .resizable()
                .aspectRatio(1.0, contentMode: .fit)
                .frame(width: size * 0.4, height: size * 0.4)
                .fontWeight(.black)
                .foregroundColor(checkMarkColor)
        }
    }
}

注意
iOS16以下の場合は
.fontWeight(.black)
の代わりに
.font(.system(size: .infinity, weight: .black))
が使えます！

使い方

struct ContentView: View {
    var body: some View {
        OfficialMark(100)
    }
}

サイズを変更する

struct ContentView: View {
    var body: some View {
        OfficialMark(50)
    }
}

背景色を変える

struct ContentView: View {
    var body: some View {
        OfficialMark(100)
            .foregroundColor(.cyan)
    }
}

チェックマークの色を変える

struct ContentView: View {
    var body: some View {
        OfficialMark(100, checkMarkColor: .yellow)
    }
}

おわり

結構再現度高いのでは？？