Swift UI shading only outside of symbol - swiftui

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

Answer 1

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.

Answer 2

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