Skip to content

Commit 10034f8

Browse files
committed
Update the readme about the tint color for AnimatedImage
Fix the implementation that breaks the compatible with SDWebImage 5.18+
1 parent 5f025e5 commit 10034f8

File tree

2 files changed

+38
-2
lines changed

2 files changed

+38
-2
lines changed

README.md

Lines changed: 37 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -229,7 +229,7 @@ Note: `AnimatedImage` supports both image url or image data for animated image f
229229

230230
Note: `AnimatedImage` some methods like `.transition`, `.indicator` and `.aspectRatio` have the same naming as `SwiftUI.View` protocol methods. But the args receive the different type. This is because `AnimatedImage` supports to be used with UIKit/AppKit component and animation. If you find ambiguity, use full type declaration instead of the dot expression syntax.
231231

232-
Note: some of methods on `AnimatedImage` will return `some View`, a new Modified Content. You'll lose the type related modifier method. For this case, you can either reorder the method call, or use Native View in `.onViewUpdate` for rescue.
232+
Note: some of methods on `AnimatedImage` will return `some View`, a new Modified Content. You'll lose the type related modifier method. For this case, you can either reorder the method call, or use native view (actually `SDAnimatedImageView`) in `.onViewUpdate`, use UIKIt/AppKit API for rescue.
233233

234234
```swift
235235

@@ -417,6 +417,42 @@ NavigationView {
417417
}
418418
```
419419

420+
#### Render vector image (SVG/PDF) with tint color
421+
422+
Both `WebImage/AnimatedImage` supports to render the vector image, by using the `SVG/PDF` external coders. However they are different internally.
423+
424+
+ `AnimatedImage`: use tech from Apple's symbol image and vector drawing, supports dynamic size changes without lossing details. And it use UIKit/AppKit based implementation and APIs. If you want, pass `.context(.imageThumbnailPixelSize: size)` to use bitmap rendering and get more pixels.
425+
+ `WebImage`: draws vector image into a bitmap version. Which just like normal PNG. By default, we use vector image content size (SVG canvas size or PDF media box size). If you want, pass `.context(.imageThumbnailPixelSize: size)` to get more pixels.
426+
427+
For bitmap rendering, you can also tint the SVG/PDF icons with custom colors (like symbol images), use the `.renderingMode(.template)` and `.tint(:)` or `.foregroundColor(:)` modifier, which matches `SwiftUI.Image` behavior.
428+
429+
+ WebImage
430+
431+
```swift
432+
var body: some View {
433+
WebImage(url: URL(string: "https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/w3c.svg"))
434+
.resizable()
435+
.renderingMode(.template)
436+
.foregroundColor(.red) // or `.tint(:)`, `.accentColor(:)`
437+
.scaledToFit()
438+
}
439+
```
440+
441+
+ AnimatedImage
442+
443+
```swift
444+
var body: some View {
445+
AnimatedImage(url: URL(string: "https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/w3c.svg"), context: [.imageThumbnailPixelSize : CGSize(width: 100, height: 100)])
446+
.resizable()
447+
.renderingMode(.template)
448+
// seems `.foregroundColor(:)` does effect `UIView.tintColor`, use `tint(:)` or `.accentColor(:)` instead.
449+
// Or you can use `onViewCreate(:)` to get native `SDAnimatedImageView` and set `tintColor` (AppKit use `contentTintColor`)
450+
.tint(.red)
451+
.scaledToFit()
452+
}
453+
```
454+
455+
See more: [Configuring and displaying symbol images in your UI](https://developer.apple.com/documentation/uikit/uiimage/configuring_and_displaying_symbol_images_in_your_ui?language=objc)
420456

421457
#### Using with external loaders/caches/coders
422458

SDWebImageSwiftUI/Classes/AnimatedImage.swift

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -436,7 +436,7 @@ public struct AnimatedImage : PlatformViewRepresentable {
436436
}
437437

438438
// Animated Image does not support resizing mode and rendering mode
439-
if let image = view.wrapped.image, !image.conforms(to: SDAnimatedImageProtocol.self) {
439+
if let image = view.wrapped.image {
440440
var image = image
441441
// ResizingMode
442442
if let resizingMode = imageLayout.resizingMode, imageLayout.capInsets != EdgeInsets() {

0 commit comments

Comments
 (0)