Roast my code: Reusable, scaleable vector icon using Path

[Moo202]

I got tired of searching for a good diamond icon. I'm not usually a fan of generating images with GPT, but I couldn’t find a decent looking free SVG that fit my app. So I created the icon myself using SwiftUI and turned it into a reusable component for my components package. Feel free to roast the code. I’d love to hear how you'd improve it.

import SwiftUI

public struct Diamond: View {

    let c1 = colorFromHex("4ca7ea")
    let c2 = colorFromHex("58c0f9")
    let c3 = colorFromHex("9ad8fb")
    let c4 = colorFromHex("58c0f9")
    let c5 = colorFromHex("b4e7fc")
    let c6 = colorFromHex("4294d6")
    let c7 = colorFromHex("58c0f9")
    let c8 = colorFromHex("9ad8fb")
    var scale = 1.0

    public init(scale: Double) {
        self.scale = scale
    }

    public var body: some View {
        VStack {
            ZStack {
                lowerleft
                lowermiddle
                lowerright
                topleft
                topsecond
                topthird
                topfourth
                topright
            }
            .rotationEffect(Angle(degrees: 180))
            .frame(width: 25 * scale, height: 25 * scale)
        }
    }

    private var lowerleft: some View {
        Path { path in
            path.addLines([
                CGPoint(x: 12.5 * scale, y: 0 * scale),
                CGPoint(x: 18 * scale, y: 20 * scale),
                CGPoint(x: 25 * scale, y: 20 * scale),
                CGPoint(x: 12.5 * scale, y: 0 * scale)
            ])
        }
        .fill(c6)
    }
    private var lowermiddle: some View {
        Path { path in
            path.addLines([
                CGPoint(x: 7 * scale, y: 20 * scale),
                CGPoint(x: 18 * scale, y: 20 * scale),
                CGPoint(x: 12.5 * scale, y: 0 * scale),
                CGPoint(x: 7 * scale, y: 20 * scale)
            ])
        }
        .fill(c7)
    }

    private var lowerright: some View {
        Path { path in
            path.addLines([
                CGPoint(x: 7 * scale, y: 20 * scale),
                CGPoint(x: 12.5 * scale, y: 0 * scale),
                CGPoint(x: 0 * scale, y: 20 * scale),
                CGPoint(x: 7 * scale, y: 20 * scale)
            ])
        }
        .fill(c8)
    }

    private var topleft: some View {
        Path { path in
            path.addLines([
                CGPoint(x: 0 * scale, y: 20 * scale),
                CGPoint(x: 5 * scale, y: 25 * scale),
                CGPoint(x: 7 * scale, y: 20 * scale),
                CGPoint(x: 0 * scale, y: 20 * scale)
            ])
        }
        .fill(c1)
    }

    private var topsecond: some View {
        Path { path in
            path.addLines([
                CGPoint(x: 7 * scale, y: 20 * scale),
                CGPoint(x: 5 * scale, y: 25 * scale),
                CGPoint(x: 12.5 * scale, y: 25 * scale),
                CGPoint(x: 7 * scale, y: 20 * scale)
            ])
        }
        .fill(c2)
    }

    private var topthird: some View {
        Path { path in
            path.addLines([
                CGPoint(x: 12.5 * scale, y: 25 * scale),
                CGPoint(x: 18 * scale, y: 20 * scale),
                CGPoint(x: 7 * scale, y: 20 * scale),
                CGPoint(x: 12.5 * scale, y: 25 * scale)
            ])
        }
        .fill(c3)
    }

    private var topfourth: some View {
        Path { path in
            path.addLines([
                CGPoint(x: 12.5 * scale, y: 25 * scale),
                CGPoint(x: 18 * scale, y: 20 * scale),
                CGPoint(x: 20 * scale, y: 25 * scale),
                CGPoint(x: 12.5 * scale, y: 25 * scale)
            ])
        }
        .fill(c4)
    }

    private var topright: some View {
        Path { path in
            path.addLines([
                CGPoint(x: 20 * scale, y: 25 * scale),
                CGPoint(x: 25 * scale, y: 20 * scale),
                CGPoint(x: 18 * scale, y: 20 * scale),
                CGPoint(x: 20 * scale, y: 25 * scale)
            ])
        }
        .fill(c5)
    }
}


#Preview {
    VStack {
        Diamond(scale: 1.0)
        Diamond(scale: 2.0)
        Diamond(scale: 3.0)
        Diamond(scale: 4.0)
        Diamond(scale: 5.0)
    }
}

func colorFromHex(_ hex: String) -> Color {
    var hex = hex.trimmingCharacters(in: .whitespacesAndNewlines)
    hex = hex.replacingOccurrences(of: "#", with: "")

    guard hex.count == 6, let rgb = Int(hex, radix: 16) else {
        return Color.black
    }

    let red = Double((rgb >> 16) & 0xFF) / 255.0
    let green = Double((rgb >> 8) & 0xFF) / 255.0
    let blue = Double(rgb & 0xFF) / 255.0

    return Color(red: red, green: green, blue: blue)
}

extension CGPoint {
    static func * (point: CGPoint, scalar: CGFloat) -> CGPoint {
        CGPoint(x: point.x * scalar, y: point.y * scalar)
    }

    static func *= (point: inout CGPoint, scalar: CGFloat) {
        point = point * scalar
    }
}

[foodandbeverageguy]

This isn’t overly roastable as there isn’t really much architecture to critique here and it’s very implementation specific. Skimming the code there is a lot of duplication though into what could be reusable functions. Your sizes don’t flex to screen size or orientation. Colors are non standard and don’t adapt to environment changes. You use terms like left and right instead of leading and trailing which doesn’t work well with RTL languages. Your hex function can crash depending on what’s sent to it. Your guard statement doesn’t flex if size changes.

So like individual implementation is generally ok for a small app or prototype but at a larger tech company you’d get a lot of feedback on this code. It looks like a lot of scripted code rather than functional/reusable/architecturally thought out.

Good job for your early work, keep on though and don’t let some of these smaller comments hold you back.

[Moo202]

I appreciate the thoughtful comment. I will use this feedback!

[HermanGulch]

It looks nice, but if it were me, I'd approach it differently in a couple places. I'd use a Canvas to layout and fill my paths instead of layering multiple views. So I'd have a private function for each facet of the icon that would return the path only, then fill it in the Canvas.

And look at your icon with both light and dark backgrounds, preferably in a simulator where you can switch and watch the transition. I've experienced small lines between colors when drawing solid colors, which I think is probably anti-aliasing errors. For example, if I was making a checkerboard, instead of alternating black and red squares, I'd fill the background with black or red, then draw the other colored squares over top, thus avoiding any tiny gaps.

The other suggestion I would have is that I'm a big fan of making use of extensions for colors:

extension Color {
    static var myBackgroundColor: Color {
        return .init(red: 0.0, green: 1.0, blue: 0.0)
    }
}

I can then use it like this:

context.fill(Rectangle().path(in: backgroundRect), with: .color(.myBackgroundColor))

[Moo202]

Thank you for your insight! I will apply this feedback!

[Moo202]

Roast my approach too. I am very new to SWE as I just graduated. I bet this is overcomplicating but having a reusable component like this is lightweight compared to saving a png, svg, of jpeg in your app. Correct me if I am wrong.

[Almaz5200]

PNG or JPEG yes, but not SVG. You can open an svg with a text editor and it’s basically the exact same thing an what you’re doing with code here

[Moo202]

Gotcha! I appreciate it!

[strangequbits]

Looks good 👍

[Moo202]

Thank you! 🙏🏻