| < 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.2
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 Thorough mobile testing hasn’t been efficient testing. With Waldo Sessions, it can be! Test early, test often, test directly in your browser and share the replay with your team.
Sponsor Hacking with Swift and reach the world's largest Swift community!
Similar solutions…
