Settings Row with Custom LabeledContent

import SwiftUI

struct SettingsRowWLabeledContent: View {
    var body: some View {
        Form {
            LabeledContent {
                Text("Router Name")
                    .foregroundStyle(.secondary)
                    .font(.system(size: 17, weight: .regular))
                    .frame(alignment: .trailing)
            } label: {
                SettingsLabelWIcon(labelTitle: "Wi-Fi", symbol: "wifi", fgColor: .white, bgColor: .blue)
            }
        }
        
    }
}

#Preview {
    SettingsRowWLabeledContent()
}

struct SettingsLabelWIcon:  View {
    
    let labelTitle: String
    let symbol: String
    let fgColor: Color
    let bgColor: Color
    
    var body: some View {
        Label {
            Text(labelTitle)
                .foregroundStyle(.primary)
        } icon: {
            SettingsLabelIconWBackground(symbol: symbol, fgColor: fgColor, bgColor: bgColor)
        }
        .labelStyle(DefaultLabelStyle())
    }
}

#Preview {
    SettingsLabelWIcon(labelTitle: "Wi-Fi", symbol: "wifi", fgColor: .white, bgColor: .blue)
}

struct SettingsLabelIconWBackground: View {
    
    let symbol: String
    let fgColor: Color
    let bgColor: Color
    
    var body: some View {
        Image(systemName: symbol)
            .font(.system(size: 14))
            .foregroundStyle(fgColor)
            .frame(width: 28, height: 28)
            .background(bgColor, in: RoundedRectangle(cornerRadius: 7, style: .continuous))
    }
}

#Preview {
    SettingsLabelIconWBackground(symbol: "wifi", fgColor: .white, bgColor: .blue)
}