| < How to get custom colors and transparency with SF Symbols | How to let users select pictures using PhotosPicker > |
How to dynamically adjust the color of an SF Symbol
Updated for Xcode 14.1
New in iOS 16
Some SF Symbols support variable coloring, which means they can have different parts filled based on a fraction between 0 and 1.
For example, this shows a Wi-Fi icon that is partly filled in:
Image(systemName: "wifi", variableValue: 0.5)
Download this as an Xcode project
This value can change over time based on whatever state you’re using in your code. For example, we could use a slider to change various icons according to a local property:
struct ContentView: View {
@State private var value = 0.0
var body: some View {
VStack {
HStack {
Image(systemName: "aqi.low", variableValue: value)
Image(systemName: "wifi", variableValue: value)
Image(systemName: "chart.bar.fill", variableValue: value)
Image(systemName: "waveform", variableValue: value)
}
Slider(value: $value)
}
.font(.system(size: 72))
.foregroundColor(.blue)
.padding()
}
} Download this as an Xcode project
SPONSORED In-app subscriptions are a pain to implement, hard to test, and full of edge cases. RevenueCat makes it straightforward and reliable so you can get back to building your app. Oh, and it's free if your app makes less than $10k/mo.
Sponsor Hacking with Swift and reach the world's largest Swift community!
Similar solutions…
