SFSymbol4ContentView.swift

//
//  ContentView.swift
//  sfsymbols4sample
//
//  Created by Yasuhito Nagatomo on 2022/06/16.
//  Updated on 2022/06/17 with the advice of @kingatarthur.
//

import SwiftUI

struct ContentView: View {
    let symbols = [
        "rays", "slowmo", "timelapse",
        "aqi.medium", "water.waves", "ellipsis.bubble",
        "wand.and.rays", "cellularbars", "person.3.sequence.fill",
        "square.stack.3d.up.fill", "touchid", "livephoto"
    ]
    var body: some View {
        VStack {
            Text("SF Symbols 4 Variable Color")
                .font(.largeTitle)

            TimelineView(.animation) { context in
                let date = context.date
                let level = (nanosValue(for: date) * 10).truncatingRemainder(dividingBy: 1)
                ScrollView {
                    LazyVGrid(columns: Array(repeating: GridItem(), count: 3)) {
                        ForEach(symbols, id:\.self) {
                            ProgressSymbol(level: level,
                                           symbolName: $0,
                                           symbolSize: 60)
                        }
                    }
                }
            }
        }
    }
}

//  Updated on 2022/06/17 with the advice of @kingatarthur.
struct ProgressSymbol: View {
    let level: Double?
    let symbolName: String
    let symbolSize: CGFloat

    var body: some View {
        VStack {
            Image(systemName: symbolName,
                  variableValue: level)
                .symbolRenderingMode(.multicolor)
                .font(.system(size: symbolSize))
                .foregroundColor(.mint) // .accentColor)
            Text((level ?? 0),
                 format: .percent.precision(.fractionLength(0)))
                .foregroundColor(.secondary)
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

func nanosValue(for date: Date) -> Double { // [0...1]
    let seconds = Calendar.current.component(.second, from: date)
    let nanos = Calendar.current.component(.nanosecond, from: date)
    return Double(seconds * 1_000_000_000 + nanos) / 60_000_000_000
}

Updated the code with the advice of @kingatarthur.
ProgressSymbol View:

1. use .font(.system(size:)) to keep correct proportion of the symbols
2. use .percent format to display % in the correct localization manner