SwiftUIFontPackage パッケージにない Material Icon を追加する方法【個人開発日記#2】

前回はSwiftUI にボタンを追加、マウスオーバーで色が変わる処理を実装した。

今回は、下記画像のようなアイコンを追加する。アイコンには Google が提供する Material Icons を使う。

ボタンにアイコンを追加する

SwiftUI に Material Icon を追加する方法

SwiftUIFontIconでSwiftUIでMaterial icon、Ionicons、Font Awesomeを使えるようにする。

上記の記事に従って SwiftUIFontPackage を導入し、アイコンを追加した。

ただし、「グラフ」のところに使いたいアイコン（Stacked Line Chart）が SwiftUIFontPackage にない……

png 画像などで配置しても良いのだが、できればフォントを使用してアイコンを配置したい。
そこで、 SwiftUIFontPackage を編集してアイコンを追加する。

SwiftUIFontPackage に存在しないアイコンを追加する

git clone した SwiftUIFontPackage を編集できるようにする

Xcode でパッケージを開いても、そのコードは修正できない。ローカルに clone したファイルをローカルパッケージとして読み込んで修正する。

まずは上リンクから git clone して SwiftUIFontPackage を入手する。
git clone したファイルを開き、隠しファイル .git を削除する。

次に git clone したファイルをドラッグアンドドロップでプロジェクト直下に移動。

パッケージをドラッグ＆ドロップする前のディレクトリ構成

sampleButton 以下に SwiftUIFontIcon が追加されている

sampleButton をクリックし Package Dependencies から SwiftUIFontIcon を削除する。
sampleButton をクリックしたときの画面から Target 配下の General > Frameworks, Libraries, and Embedded Content からも SwiftUIFontIcon を削除する。

続いて、Frameworks, Libraries, and Embedded Content の＋ボタンを押して workSpace 配下の SwiftUIFontIcon を追加する。

SwiftUIFontIcon パッケージを編集する

SwiftUIFontIcon > Sources > SwiftUIFontIcon > FontCodes > MaterialIcon が編集対象。

Material Icons ページの追加したいアイコンの Code Point を MaterialIcon ファイルの case 文に追記する。例えば、stacked_line_chart の Code Point は f22b だったので u\{f22b} を追記する。

//
//  File.swift
//  
//
//  Created by Huy Bui Dac on 25/08/2020.
//

import Foundation

public enum MaterialIconCode : String, CaseIterable {
    case rotation_3d = "\u{e84d}"

// （中略）

    case spellcheck = "\u{e8ce}"
    case stacked_line_chart = "\u{f22b}" // ここを追加
    case star = "\u{e838}"
    case star_border = "\u{e83a}"
    case star_half = "\u{e839}"
    case stars = "\u{e8d0}"

フォントファイルを追加する

ただ、これだけではアイコンが表示されない（？マークが表示される）。
そこで下記の github からアイコンの ttf ファイルをダウンロードする。 場所は font 配下。

ダウンロードしたファイルと SwiftUIFontIcon > Sources > SwiftUIFontIcon > FontCodes > Resources 配下の ttf ファイルを入れ替える。

あとは、ソースコードを修正して完了。

import SwiftUI
import SwiftUIFontIcon

struct ContentView: View {
    var body: some View {
        VStack {
            RoundedRectangle(cornerRadius: 10)
                .fill(Color.cellColor)
                .frame(minWidth:400, minHeight:400)
                .padding(.vertical, 30)
                .overlay(
                    VStack(spacing: 20){
                        Button(action: {}) {
                            HStack{
                                FontIcon.text(.materialIcon(code: .home), fontsize: 36)　// アイコンを追加
                                Text("ホーム")
                                    .font(.custom("HiraginoSans-W6", size: 36))
                            }.padding(.horizontal, 20)

                        }
                        .buttonStyle(RoundedButtonStyle())
                        Button(action: {}) {
                            HStack{
                                FontIcon.text(.materialIcon(code: .stacked_line_chart), fontsize: 36) // アイコンを追加
                                Text("グラフ")
                                    .font(.custom("HiraginoSans-W6", size: 36))
                            }.padding(.horizontal, 20)
                        }
                        .buttonStyle(RoundedButtonStyle())
                        Button(action: {}) {
                            HStack{
                                FontIcon.text(.materialIcon(code: .date_range), fontsize: 36) // アイコンを追加
                                Text("カレンダー")
                                    .font(.custom("HiraginoSans-W6", size: 36))
                            }.padding(.horizontal, 20)
                        }
                        .buttonStyle(RoundedButtonStyle())
                    }
                )
        }
        .padding(100)
    }
}
// 以下略

無事、アイコンの表示＆元のパッケージにないアイコンを表示できた。

グラフ横にアイコンが表示されている

swift パッケージの編集や .ttf ファイルの変更など学びが多かった…
欲しいアイコンが使えないよ！　と言う人はぜひ試してみてね！