【SwiftUI】Imageでカラバリアイコンを作る

カラバリアイコン

はじめに

アプリ開発をしていて「単色のシンプルなアイコンを画面に載せたいけど、色はユーザーがカスタムできるほうがいい。けど色ごとに画像を用意するのは面倒」などと思い、何かいい方法はないかと調べたので、それを記したいと思います。

動作確認はXcode 11.3.1 にて。

背景透過で白色(#FFFFFF)の画像を用意する

icon_white_sun.png

画像はICOOON MONO様からお借りしました。
見やすさのため背景を灰色にしていますが、実際は透過色です。

Xcodeで画像をAssetsに追加

自分で用意した画像を使う場合、XcodeのAssetsに追加してあげる必要があります。

↓こんな感じから、

↓これでOK

ImageのcolorMultiplyで色付け

↓ViewにImageを追加します。

VStack {
    Text("Hello, World!")
    Image("icon_white_sun")
        .resizable()
        .scaledToFit()
        .colorMultiply(Color.red)
        .frame(width: 48, height: 48)
}

colorMultiply が肝で、白色部分に指定した色をブレンドさせてあげます。

↓結果はこんな感じ。

↓あとは色の指定を変えるだけで

.colorMultiply(Color.green)

緑にもできる 👍

NavigationBarItemの場合はforegroundColorでOK

ナビゲーションバーで色付けする場合はcolorMultiplyではなく、foregroundColorでいけました。

NavigationView {
    VStack {
        (省略)
    }
    (省略)
    .navigationBarItems(trailing: NavigationLink(destination: ContentView(), label: {
        Image("icon_white_sun")
            .resizable()
            .scaledToFit()
            .foregroundColor(Color.orange)
            .frame(width: 20, height: 20)
    }))
}

いいですね 👍

何かのお役に立てば幸いです。