SwiftUI Icons & Badges

import SwiftUI

struct IconWithBackground: View {
    var body: some View {
        Image(systemName: "bell.badge.fill")
        .foregroundStyle(.white)
        .frame(width: 28, height: 28, alignment: .center)
        .background(.red, in: RoundedRectangle(cornerRadius: 7, style: .continuous))
    }
}

#Preview {
    IconWithBackground()
}

import SwiftUI

struct AppIcon60x60: View {
    var body: some View {
        RoundedRectangle(cornerRadius: 15, style: .continuous)
        .frame(width: 60, height: 60)
        .foregroundStyle(.green.gradient)
        .overlay {
            Image(systemName: "message.fill")
            .resizable()
            .foregroundStyle(.white)
            .frame(width: 40, height: 40)
        }
    }
}

#Preview {
    AppIcon60x60()
}

import SwiftUI

// Place image named "AppIcon" into Assets in your XCode project
enum AppIconProvider {
    static func appIcon(in bundle: Bundle = .main) -> String? {
        guard let icons = bundle.object(forInfoDictionaryKey: "CFBundleIcons") as? [String: Any],
              let primaryIcon = icons["CFBundlePrimaryIcon"] as? [String: Any],
              let iconFiles = primaryIcon["CFBundleIconFiles"] as? [String],
              let iconFileName = iconFiles.last else {
            return nil
        }
        return iconFileName
    }
}

struct AppIcon: View {
    
    let appIcon: String
    
    var body: some View {
        if let appIcon = UIImage(named: appIcon) {
            Image(uiImage: appIcon)
                .resizable()
                .aspectRatio(contentMode: .fit)
                .clipShape(RoundedRectangle(cornerRadius: 15, style: .continuous))
        } else {
            // Fallback icon or placeholder
            Image(systemName: "app.fill")
                .resizable()
                .aspectRatio(contentMode: .fit)
                .foregroundColor(.accentColor)
                .clipShape(RoundedRectangle(cornerRadius: 15, style: .continuous))
        }
    }
}

struct AppIcon75UsingAppIcon: View {
    var body: some View {
        VStack {
            AppIcon(appIcon: AppIconProvider.appIcon() ?? "AppIcon")
        }
        .frame(width: 75, height: 75)
        .shadow(color: .gray.opacity(0.4), radius: 4)
    }
}

#Preview {
    AppIcon75UsingAppIcon()
}

import SwiftUI

struct UseBadgeWSymbolPaletteRendering: View {
    
    var body: some View {
        HStack {
            BadgeWSymbolPaletteRendering(title: "Weather", symbol: "cloud.sun.rain.fill", firstColor: .white, secondColor: .yellow, thirdColor: .blue)
        }
    }
}

#Preview {
    UseBadgeWSymbolPaletteRendering()
}

struct BadgeWSymbolPaletteRendering: View {
    
    var title: String
    var symbol: String
    var firstColor: Color
    var secondColor: Color
    var thirdColor: Color
    
    var body: some View {
        HStack(alignment: .center, spacing: 8) {
            Image(systemName: symbol)
                .font(.system(size: 20, weight: .regular))
                .symbolRenderingMode(.palette)
                .foregroundStyle(firstColor, secondColor, thirdColor)
            Text(title)
                .foregroundStyle(.primary)
        }
        .font(.system(size: 15, weight: .medium))
        .padding(.vertical, 8)
        .padding(.horizontal, 12)
        .background(.thinMaterial, in: RoundedRectangle(cornerRadius: 12.0, style: .continuous))
    }
}