SwiftUIを使ってアイコンを爆速で作成する

この記事の狙い

デザインツールを使わないでSwiftUIのみでアイコン(ボタン)を作成する試みです。¹
以下のような未来の職場風景を想像しています。

今まで	これから

デザイナーと開発者がペアプロする。

完成イメージ

翻訳機能を呼び出すためのボタンを想定しています。

アイコンの構成

ベース

アイコンのベースとなるRectangle()を用意します。

// 簡易コードです。
Rectangle()
    .foregroundColor(Color.clear)
    .frame(width: 44, height: 44)
    .overlay {
        ZStack {
           下レイヤー
               .mask {
                   マスク
               }
           上レイヤー
        }
    }

上レイヤー

右下にAを表示するだけです。

// 簡易コードです。
Text("A")
    .font(.system(size: 32,
                  design: .rounded))
    .position(x: /* ベースの右端 */,
              y: /* ベースの中央 */)
    .offset(x: /* 基準位置からの補正値 */,
            y: /* 基準位置からの補正値 */)

下レイヤー

左上に文を表示しますが、上レイヤーのAと重ならないように一部をマスクします。

// 簡易コードです。
Text("文")
    .font(.system(size: 24,
                  weight: .bold,
                  design: .rounded))
    .position(x: /* ベースの左端 */,
              y: /* ベースの中央 */)
    .offset(x: /* 基準位置からの補正値 */,
            y: /* 基準位置からの補正値 */)
    .mask {
        // 以下で説明
    }

マスク

上レイヤーのAより一回り大きいA型のマスクを作成します。
SwiftUIに袋文字のAPIがあれば一発だったのですが、今のところ無いので、Aを8方向へずらしてマスクとします。
マスクされた部分を消したいのでblendMode(.destinationOut)でリバースマスクにします。

// 簡易コードです。
Rectangle()
    .frame(width: 44, height: 44)
    .overlay {
        ZStack {
            Text("A").offset(/* 左上にずらす */)
            Text("A").offset(/*   上にずらす */)
            Text("A").offset(/* 右上にずらす */)
            Text("A").offset(/*   左にずらす */)
            Text("A").offset(/*   右にずらす */)
            Text("A").offset(/* 左下にずらす */)
            Text("A").offset(/*   下にずらす */)
            Text("A").offset(/* 右下にずらす */)
        }
        .blendMode(.destinationOut)
    }

コード

GitHubに全コードを置いています。

まとめ

デザインツールを使わなくても、コードのみで素早くアイコン作成ができました。(1h未満)

以下のようなケースならすぐに導入できそうです。

• 小規模：個人開発やプロトタイプなど。
• 短期間：動く物がすぐにほしい。
• 低予算：FigmaやIllustratorを導入するのは、ちょっと。。

SwiftUIの可能性を感じていただけたなら幸いです。

開発環境

• Xcode 14.2
• Swift 5.7.2
• iOS 16.2

1. Creation as Code と命名したい。 ↩