【问题标题】：Change the stroke/fill color of SF Symbol icon in SwiftUI?在 SwiftUI 中更改 SF Symbol 图标的笔触/填充颜色？
【发布时间】：2019-11-04 15:51:09
【问题描述】：

我正在寻找一种方法来更改 SwiftUI 中 SF Symbol 图标的笔触/填充颜色。

我已经尝试过.background(Color.red)，但这只是隐含地更改了整个图标的背景（没有对实际图标本身应用任何更改）。我也试过.foregroundColor(Color.red)这对图标没有任何作用。

内容视图的内容如下：

var body: some View {
    Image(systemName: "person.circle").foregroundColor(.red)    
}

【问题讨论】：

Image(systemName: "person.circle").foregroundColor(.red) 为我画了一个圆圈里的红色人。它对你有什么影响？
对我来说它仍然是一个黑色图标。这可能只是一个 xcode 错误......至少这是我所希望的。
请发布一个小型的、独立的测试。新建一个 SwiftUI 项目，修改默认的ContentView 来演示问题。然后将ContentView 的定义复制到您的问题中。
已编辑！然而，一个独立的项目仍然是黑色的。
您是在运行代码，还是在使用预览版？对我来说，预览将图标显示为黑色，但运行它会正确更改颜色

标签： swiftui sf-symbols

【解决方案1】：

您可以使用 foregroundColor(_ color: Color?) 更改 sf 符号图标的笔触和填充颜色

以下代码：

Image(systemName: "flame.fill").foregroundColor(.red)

Image(systemName: "flame").foregroundColor(.red)

应该产生这个：

这里是完整的 SwiftUI 查看代码

struct Icon : View {
    var body: some View {
        HStack{
            Image(systemName: "flame.fill")
            .foregroundColor(.red)
            Image(systemName: "flame")
            .foregroundColor(.red)
        }
        .padding()
    }
}

【讨论】：

完美。 foregroundColor 为我做了诀窍。 ? 你会说accentColor 会更好地描述这个功能，但是那个不起作用。
另请注意，如果您使用Image(uiImage: UiImage("flame.fill"))，foregroundColor 对 Image 没有影响
SFSymbol .fill 或 .outline 变体现在会根据包含的视图自动选择。例如在 Mac 上TabView。 Mac 和 iOS 选项卡视图不都使用.fill。
@Thomas 你可以通过设置渲染模式来克服foregroundColor not working with a UIImage source，例如Image(uiImage: UiImage("flame.fill")).renderingMode(.template).foregroundColor(Color(.red))。我仍然有一些通过返回 UIImages 的 PaintCode 生成的以编程方式创建的图标。

【解决方案2】：

iOS 15

从 iOS 15 和 SFSymbols 3 开始，您可以使用前景样式修饰符将不同的颜色层应用于单个符号：

Image(systemName: "person.circle")
    .resizable()
    .foregroundStyle(.red, .blue)
    .frame(width: 200, height: 200, alignment: .center)

iOS 13 和 14

您可以在图标的不同部分使用ZStack，并对每个图层应用不同的修饰符，例如：

/// ? I've used `GeometryReader ` for setting the size of elements dependent on each other

GeometryReader { proxy in 
    ZStack {
        Image(systemName: "circle")
            .resizable()
            .foregroundColor(.blue)

        Image(systemName: "person.fill")
            .resizable()
            .foregroundColor(.red)
            .frame(
                   width: proxy.size.width * 0.55,
                   height: proxy.size.width * 0.55,
                   alignment: .center
            )
    }
}.frame(width: 200, height: 200, alignment: .center)

_{注意，新旧方法看起来略有不同，但感觉相同。（仔细看看头部的圆度）}

【讨论】：

【解决方案3】：

是的，有：

var body: some View {
    Image(systemName: "person.circle").accentColor(.red)    
}

【讨论】：

这在早期的测试版中有效。我认为目前，正确的做法是使用 .foregroundColor(.red)。

【解决方案4】：

iOS 15

在 SwiftUI 3 / iOS 15 中，我们可以使用 foregroundStyle 来更多地自定义 SF Symbols：

Image(systemName: "cloud.sun.bolt")
    .foregroundStyle(.gray, .blue)

在this WWDC session查看更多信息：

【讨论】：

【解决方案5】：

这会将图标的背景绘制为红色，线条绘制为蓝色：

Image(systemName: "person.circle")
    .foregroundColor(Color.red)
    .background(Color.blue)
    .frame(width: size, height: self, alignment: .center)
    .clipShape(Circle())

如果没有clipShape，圆后面的矩形会有蓝色角。

【讨论】：

【解决方案6】：

只需更改色调颜色。这对我有用。

【讨论】：

【解决方案7】：

Click Me to ? For TabView Symbols...示例代码⬇︎⬇︎

struct StartView: View{
@State private var selection = 0
var body: some View {
    TabView(selection: $selection) {
        Text("Start")
            .tabItem{
                selection == 0 ? Image(systemName: "rectangle.stack.fill") : Image(systemName: "rectangle.stack")
                Text("Start")
        }
        .tag(0)

        Text("Favorites")
            .tabItem {
                selection == 1 ? Image(systemName: "star.fill") : Image(systemName: "star")
                Text("Favorites")
        }
        .tag(1)

【讨论】：