SwiftUIFontPackage パッケージにない Material Icon を追加する方法【個人開発日記#2】
前回はSwiftUI にボタンを追加、マウスオーバーで色が変わる処理を実装した。
今回は、下記画像のようなアイコンを追加する。アイコンには Google が提供する Material Icons を使う。
SwiftUI に Material Icon を追加する方法
上記の記事に従って SwiftUIFontPackage を導入し、アイコンを追加した。
ただし、「グラフ」のところに使いたいアイコン(Stacked Line Chart)が SwiftUIFontPackage にない……
png 画像などで配置しても良いのだが、できればフォントを使用してアイコンを配置したい。
そこで、 SwiftUIFontPackage を編集してアイコンを追加する。
SwiftUIFontPackage に存在しないアイコンを追加する
git clone した SwiftUIFontPackage を編集できるようにする
Xcode でパッケージを開いても、そのコードは修正できない。ローカルに clone したファイルをローカルパッケージとして読み込んで修正する。
まずは上リンクから git clone して SwiftUIFontPackage を入手する。
git clone したファイルを開き、隠しファイル .git を削除する。
次に git clone したファイルをドラッグアンドドロップでプロジェクト直下に移動。
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 ファイルの変更など学びが多かった…
欲しいアイコンが使えないよ! と言う人はぜひ試してみてね!
この記事が気に入ったらサポートをしてみませんか?