Swift UI shading only outside of symbol

Question

Here are two SF symbols, one with some shading.

As you can see, not only is the outside of the second symbol shaded, but so is the inside. How would I shade only the outside, leaving the inner whitespace white rather than shaded? Ideally a solution would work for other SF symbols, as I'm planning on shading more than just this symbol.

Code:

struct exampleSymbol: View {
    var body: some View {
        Image(systemName: "text.bubble.fill")
            .foregroundColor(.blue)
            .font(.system(size: 100))
    }
}

struct stack: View {
    var body: some View {
        VStack {
            exampleSymbol()
            exampleSymbol()
                .shadow(color: .gray, radius: 2, x: 3, y: 3)
        }
    }
}

score 4 · Answer 1 · answered Aug 08 '21 at 00:55

4

This is possible in iOS 15, using a symbolRenderingMode(_:) of .palette.

       /// Note: This should be capitalized
struct ExampleSymbol: View {
    var body: some View {
        Image(systemName: "text.bubble.fill")
            .symbolRenderingMode(.palette)
            .foregroundStyle(.white, .blue)
            .font(.system(size: 100))
    }
}

struct ContentView: View {
    var body: some View {
        ExampleSymbol()
            .shadow(color: .gray, radius: 2, x: 3, y: 3)
    }
}

Result:

For under iOS 15, you'll need to make your own custom icons.

answered Aug 08 '21 at 00:55

aheze

24,434
8
68
125

1

Wow, this is great. Apple is really adding some great enhancements with iOS 15. – nickreps Aug 08 '21 at 01:03
How would you make a custom icon? – John Sorensen Aug 08 '21 at 15:36
@JohnSorensen with a vector editing app. I prefer [sketch](https://www.sketch.com/). – aheze Aug 08 '21 at 20:12
@JohnSorensen btw if the answer worked, can you press the green checkmark to accept it? – aheze Aug 25 '21 at 01:22

score 0 · Answer 2 · answered Aug 08 '21 at 01:02

If you are not using iOS 15, you could place a white rounded rectangle behind the icon via a ZStack:

    struct exampleSymbol: View {
    var body: some View {
        Image(systemName: "text.bubble.fill")
            .foregroundColor(.blue)
            .font(.system(size: 100))
    }
}

struct ContentView: View {
    var body: some View {
        ZStack {
            VStack {
                RoundedRectangle(cornerRadius: 10).frame(width: 80, height: 60).foregroundColor(.white)
            }
            VStack {
                exampleSymbol()
                    .shadow(color: .gray, radius: 2, x: 3, y: 3)
            }
        }
    }
}

Can you provide an image of your result? I tried your approach in my computer and it didn't seem like it worked. — John Sorensen, Aug 08 '21 at 15:36

Swift UI shading only outside of symbol

2 Answers2

Linked