Есть ли способ изменить цвет обводки / заливки значка символа sf в swiftui?

Question

Я ищу способ изменить цвет обводки / заливки значка символа SF в Swiftui.

я пытался .background(Color.red) но это просто меняет фон всей иконки (никакие изменения не применяются к самой иконке), как я и пытался .foregroundColor(Color.red)который ничего не делает с иконой.

содержимое просмотра содержимого, как следует

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

Answer 1

Вы можете изменить обводку и цвет заливки символа sf, используя foregroundColor(_ color: Color?)

Следующий код:

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

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

Должны произвести это: Заполненное и Поглаженное Пламя Символы SF Значки

Вот полный SwiftUI View Code

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

}

Answer 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)

_{Обратите внимание, что старый и новый методы выглядят немного по-разному, но ощущаются одинаково. (присмотритесь к округлости головы)}

Answer 3

iOS 15

В SwiftUI 3 / iOS 15 мы можем использовать foregroundStyle чтобы еще больше настроить символы SF:

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

---

Смотрите больше на этой сессии WWDC :

Answer 4

Я понял, что один трюк, который хорошо работает для iOS 14, заключается в том, чтобы использовать версии с заливкой и без заливки вместе, чтобы получить два цвета независимо от того, 14 или 15:

      ZStack {
    Image(systemName: "person.circle")
        .foregroundColor(.white)
    Image(systemName: "person.circle.fill")
        .foregroundColor(.yellow)
}

Answer 5

Да, есть:

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

Answer 6

Это нарисует фон значка красным, а линии - синим:

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

Без clipShape в прямоугольнике за кругом будут синие углы.

Answer 7

SwiftUI теперь позволяет раскрашивать части (слои) многих символов научной фантастики. Некоторые символы имеют много слоев.

Это окрасит передний план символа в синий цвет:

      Image(systemName: "person.circle").foregroundStyle(.blue)

Если вы хотите покрасить круг иначе, чем человек, это окрасит человека в синий цвет, а круг в серый.

      Image(systemName: "person.circle").foregroundStyle(.blue, .gray)

Answer 8

Просто измените цвет оттенка. Это сделало это для меня.

Answer 9

Щелкните меня, чтобы увидеть символы TabView... Пример кода ⬇︎⬇︎

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)