Supply a background for the icon if it is too short or hard to see. Issue #2220

Multiplatform/Shared/AppAssets.swift

@@ -115,17 +115,21 @@ struct AppAssets {
 	}()
 
 	#if os(macOS)
-	static var iconBackgroundColor: NSColor = {
+	static var nsIconBackgroundColor: NSColor = {
 		return NSColor(named: "IconBackgroundColor")!
 	}()
 	#endif
 
 	#if os(iOS)
-	static var iconBackgroundColor: UIColor = {
+	static var uiIconBackgroundColor: UIColor = {
 		return UIColor(named: "IconBackgroundColor")!
 	}()
 	#endif
 
+	static var iconBackgroundColor: Color = {
+		return Color("IconBackgroundColor")
+	}()
+
 	static var markBelowAsReadImage: Image = {
 		return Image(systemName: "arrowtriangle.down.circle")
 	}()
@@ -154,12 +158,12 @@ struct AppAssets {
 		#if os(macOS)
 		let image = NSImage(systemSymbolName: "folder.fill", accessibilityDescription: nil)!
 		let coloredImage = image.tinted(with: NSColor(named: "AccentColor")!)
-		return IconImage(coloredImage)
+		return IconImage(coloredImage, isSymbol: true)
 		#endif
 		#if os(iOS)
 		let image = UIImage(systemName: "folder.fill")!
 		let coloredImage = image.tinted(color: UIColor(named: "AccentColor")!)!
-		return IconImage(coloredImage)
+		return IconImage(coloredImage, isSymbol: true)
 		#endif
 	}
 	
@@ -193,10 +197,10 @@ struct AppAssets {
 
 	static var searchFeedImage: IconImage = {
 		#if os(macOS)
-		return IconImage(NSImage(systemSymbolName: "magnifyingglass", accessibilityDescription: nil)!)
+		return IconImage(NSImage(systemSymbolName: "magnifyingglass", accessibilityDescription: nil)!, isSymbol: true)
 		#endif
 		#if os(iOS)
-		return IconImage(UIImage(systemName: "magnifyingglass")!)
+		return IconImage(UIImage(systemName: "magnifyingglass")!, isSymbol: true)
 		#endif
 	}()
 	
@@ -233,12 +237,12 @@ struct AppAssets {
 		#if os(macOS)
 		let image = NSImage(systemSymbolName: "star.fill", accessibilityDescription: nil)!
 		let coloredImage = image.tinted(with: NSColor(named: "StarColor")!)
-		return IconImage(coloredImage)
+		return IconImage(coloredImage, isSymbol: true)
 		#endif
 		#if os(iOS)
 		let image = UIImage(systemName: "star.fill")!
 		let coloredImage = image.tinted(color: UIColor(named: "StarColor")!)!
-		return IconImage(coloredImage)
+		return IconImage(coloredImage, isSymbol: true)
 		#endif
 	}()
 	
@@ -276,12 +280,12 @@ struct AppAssets {
 		#if os(macOS)
 		let image = NSImage(systemSymbolName: "sun.max.fill", accessibilityDescription: nil)!
 		let coloredImage = image.tinted(with: .orange)
-		return IconImage(coloredImage)
+		return IconImage(coloredImage, isSymbol: true)
 		#endif
 		#if os(iOS)
 		let image = UIImage(systemName: "sun.max.fill")!
 		let coloredImage = image.tinted(color: .orange)!
-		return IconImage(coloredImage)
+		return IconImage(coloredImage, isSymbol: true)
 		#endif
 	}()
 
@@ -289,12 +293,12 @@ struct AppAssets {
 		#if os(macOS)
 		let image = NSImage(systemSymbolName: "largecircle.fill.circle", accessibilityDescription: nil)!
 		let coloredImage = image.tinted(with: NSColor(named: "AccentColor")!)
-		return IconImage(coloredImage)
+		return IconImage(coloredImage, isSymbol: true)
 		#endif
 		#if os(iOS)
 		let image = UIImage(systemName: "largecircle.fill.circle")!
 		let coloredImage = image.tinted(color: UIColor(named: "AccentColor")!)!
-		return IconImage(coloredImage)
+		return IconImage(coloredImage, isSymbol: true)
 		#endif
 	}
 

Multiplatform/Shared/Images/IconImageView.swift

@@ -10,18 +10,51 @@ import SwiftUI
 
 struct IconImageView: View {
 	
+	@Environment(\.colorScheme) var colorScheme
 	var iconImage: IconImage
 	
-    var body: some View {
-		return Image(rsImage: iconImage.image)
-			.resizable()
-			.scaledToFit()
+    @ViewBuilder var body: some View {
+		GeometryReader { proxy in
+			
+			let newSize = newImageSize(viewSize: proxy.size)
+			let tooShort = newSize.height < proxy.size.height
+			let indistinguishable = colorScheme == .dark ? iconImage.isDark : iconImage.isBright
+			let showBackground = (tooShort && !iconImage.isSymbol) || indistinguishable
+			
+			Group {
+				Image(rsImage: iconImage.image)
+					.resizable()
+					.scaledToFit()
+					.frame(width: newSize.width, height: newSize.height, alignment: /*@START_MENU_TOKEN@*/.center/*@END_MENU_TOKEN@*/)
+			}
+			.frame(width: proxy.size.width, height: proxy.size.height, alignment: /*@START_MENU_TOKEN@*/.center/*@END_MENU_TOKEN@*/)
+			.background(showBackground ? AppAssets.iconBackgroundColor : nil)
 			.cornerRadius(4)
+			
+		}
     }
-}
-
-struct IconImageView_Previews: PreviewProvider {
-    static var previews: some View {
-		IconImageView(iconImage: IconImage(AppAssets.faviconTemplateImage))
-    }
+	
+	func newImageSize(viewSize: CGSize) -> CGSize {
+		let imageSize = iconImage.image.size
+		let newSize: CGSize
+		
+		if imageSize.height == imageSize.width {
+			if imageSize.height >= viewSize.height * 0.75 {
+				newSize = CGSize(width: viewSize.width, height: viewSize.height)
+			} else {
+				newSize = CGSize(width: imageSize.width, height: imageSize.height)
+			}
+		} else if imageSize.height > imageSize.width {
+			let factor = viewSize.height / imageSize.height
+			let width = imageSize.width * factor
+			newSize = CGSize(width: width, height: viewSize.height)
+		} else {
+			let factor = viewSize.width / imageSize.width
+			let height = imageSize.height * factor
+			newSize = CGSize(width: viewSize.width, height: height)
+		}
+		
+		return newSize
+	}
+	
 }

Multiplatform/iOS/Article/IconView.swift

@@ -76,7 +76,7 @@ final class IconView: UIView {
 	override func layoutSubviews() {
 		imageView.setFrameIfNotEqual(rectForImageView())
 		if (iconImage != nil && isVerticalBackgroundExposed && !isSymbolImage) || !isDisconcernable {
-			backgroundColor = AppAssets.iconBackgroundColor
+			backgroundColor = AppAssets.uiIconBackgroundColor
 		} else {
 			backgroundColor = nil
 		}

Multiplatform/macOS/Article/IconView.swift

@@ -85,7 +85,7 @@ final class IconView: NSView {
 			return
 		}
 
-		let color = AppAssets.iconBackgroundColor
+		let color = AppAssets.nsIconBackgroundColor
 		color.set()
 		dirtyRect.fill()
 	}

Shared/Extensions/IconImage.swift

@@ -25,9 +25,11 @@ final class IconImage {
 	}()
 	
 	let image: RSImage
-	
-	init(_ image: RSImage) {
+	var isSymbol: Bool
+
+	init(_ image: RSImage, isSymbol: Bool = false) {
 		self.image = image
+		self.isSymbol = isSymbol
 	}
 	
 }