Discourage use of resizable() view modifier on SFSymbol

While working for Settings page for Snapped, I need to create an icon with SFSymbol and RoundedRectangle background. At once, I was confused that SFSymbol isn’t rendering properly. I’m trying to attach .resizable() view modifier but it also required me to provide different width and height for frame size.

Turns out, using SFSymbol in Image with .resizable() view modifier is discourage because it affects layout and text alignment. I found it from Natalia Panferova blog.

In sort, use .font() to resize Image that use SFSymbol

Image(systemName: "mail") 
	.font(.title)