How to dynamically adjust the color of an SF Symbol
Updated for Xcode 14.0 beta 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. The code can be hard to write, hard to test, and full of edge cases. RevenueCat makes it straightforward and reliable so you can get back to building your app.
Sponsor Hacking with Swift and reach the world's largest Swift community!
Similar solutions…
