Change SVG color with foregroundStyle

[kekko7072]

I have this code loading svg and i want to change the color of svg:

WebImage(url: URL(string: element.icon.url), options: [], context: [.imageThumbnailPixelSize : CGSize.zero])
                                                .placeholder {ProgressView()}.resizable().frame(width: 22, height: 22).foregroundStyle(.blue)

I read all the docs and i'm not finding a way to do it.

[kekko7072]

for the moment i'm using .opacity(0.5) because i need it grey, but will be a nice feature.

[dreampiggy]

Seems this syntax looks great and easy, but currently the implementation does not use the actual vector or template image internally.😂

The SVG on SwiftUI will use the bitmap snapshot for your WebImage requests. So it can no change the background color or size (which will cause blur) dynamically. Maybe I can update the readme.

But this may be something in the future we can implements, kept for here

[dreampiggy]

This apply the same for PDF vector image. The WebImage can not actually host vector image, it will convert it into bitmap snapshot, so it's fixed size and no-longer been template to change color or size without losing details

[dreampiggy]

Can you use the .renderingMode(.template) and change foreground color ?

https://developer.apple.com/documentation/swiftui/image/renderingmode(_:)

For the v3.x syntax, there is also a content closure args, which pass you the WebImage struct, you can modify and return the template image as well

[dreampiggy]

Tested the rendering mode seems work on WebImage, you can check this as well

[kekko7072]

Yes thank you @dreampiggy worked perfectly.

[dreampiggy]

Added this tip into README: ed081436eb1be6b00720d6f22803511ff1109736

https://github.com/SDWebImage/SDWebImageSwiftUI#render-vector-image-svgpdf-with-tint-color