18
votes

Existe-t-il un moyen de changer la couleur de trait / remplissage d'une icône de symbole SF dans swiftui?

Je cherche un moyen de changer la couleur de trait / remplissage d'une icône de symbole sf dans swiftui.

J'ai essayé .background(Color.red) mais cela change juste l'arrière-plan de l'icône entière (aucun changement n'est appliqué à l'icône elle-même) comme sous-entendu alors j'ai également essayé .foregroundColor(Color.red) qui ne fait rien à l'icône .

le contenu de la vue du contenu est le suivant

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

swiftui sf-symbols

7 commentaires

Image(systemName: "person.circle").foregroundColor(.red) dessine une personne rouge dans un cercle pour moi. Qu'est-ce que cela attire pour vous?

pour moi, cela reste une icône noire. Cela pourrait être juste un bug xcode ... Du moins c'est ce que j'espère.

Veuillez publier un petit test autonome. Créer un nouveau projet SwiftUI et modifier la valeur par défaut ContentView pour démontrer le problème. Copiez ensuite la définition de ContentView dans votre question.

Édité! Toujours noir avec un projet autonome cependant.

Exécutez-vous le code ou utilisez-vous l'aperçu? Pour moi, l'aperçu montre l'icône en noir, mais son exécution changera la couleur correctement

Oh! Cela semble avoir résolu mon problème. Bizarre, cela ne s'affiche pas dans l'aperçu.

Image(systemName: "person.circle").foregroundColor(.red) fonctionnera, mais je veux colorer le logo personnalisé comme Image("clock").foregroundColor(.blue) et cela ne fonctionne pas.

5 Réponses :

2
votes

Oui il y a:

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

1 commentaires

Cela a fonctionné dans une version bêta antérieure. Je pense qu'actuellement, la bonne façon de le faire est d'utiliser .foregroundColor (.red).

26
votes

Vous pouvez modifier le trait et la couleur de remplissage d'une icône de symbole sf à l'aide de foregroundColor(_ color: Color?)

Le code suivant:

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

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

Devrait produire ceci: Icônes de symbole SF de flamme remplie et caressée

Voici le code complet de la vue SwiftUI

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

}

1 commentaires

Parfait. foregroundColor fait l'affaire pour moi. 👍 Vous diriez que accentColor décrirait mieux cette fonctionnalité, mais celle-ci ne fonctionne pas.

0
votes

Changez simplement la couleur de la teinte. Cela l'a fait pour moi.

0 commentaires

-2
votes

Cliquez sur moi pour ðŸ '€ pour les symboles TabView ... Exemple de code â¬ ‡ ï¸Žâ¬ ‡ ï¸Ž

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)

0 commentaires

1
votes

Cela dessinera l'arrière-plan de l'icône en rouge et les lignes en bleu:

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

Sans clipShape, il y aura des coins bleus dans le rectangle derrière le cercle.

0 commentaires