如何在通用图标 class 中一起管理自定义导入图标和 sf 符号的大小调整？

Question

I am creating a library icon class which receives an icon name, a flag 'isSF' (this flag will say whether the icon is SF Symbol or not) and the size of the icon. I need to resize both the icons as per the size value received. The issue I am facing here is, for SF Symbols, we can resize it using the.font(.system(size: value)) modifier but how to resize the image (custom icon) similarly.

Kindly help me. Thanks in advance

struct XIcon: View {
    var iconName: String
    var isSF: Bool? = true
    var size: CGFloat
    var body: some View {
        if isSF! {
            return AnyView( Image(systemName: "\(iconName)")
                .font(.system(size: size)))
        } else {
            return AnyView( Image(uiImage: UIImage(named: "\(iconName)")!).resizable())
        }
    }
}

Again, i know when we specify size, the vector alignment is carried out but for frame() it is not the case. For image scaling, scaleEffect() is there but i don't know how to scale the image equivalent to the size specified for SF Symbol

Answer 1

Here is possible solution. Tested with Xcode 11.4 / iOS 13.4

Note: Borders are for better size visibility

struct XIcon: View {
    var iconName: String
    var isSF: Bool? = true
    var size: CGFloat

    var body: some View {
        var image: Image
        if isSF! {
            image = Image(systemName: "\(iconName)")
        } else {
            image = Image(uiImage: UIImage(named: "\(iconName)")!)
        }
        return image.resizable()
            .frame(width: size, height: size).aspectRatio(contentMode: .fill)
    }
}

struct TestXIcon: View {
    var body: some View {
        VStack {
            XIcon(iconName: "tv", size: 100)
                .border(Color.red)
            XIcon(iconName: "icon", isSF: false, size: 100)
                .border(Color.red)
        }
    }
}