WIP - custom widget icon

Feels.xcodeproj/project.pbxproj

@@ -90,6 +90,8 @@
 		1CD90B77278C8119001C4FEA /* LocalNotification.swift in Sources */ = {isa = PBXBuildFile; fileRef = 1CD90B75278C8119001C4FEA /* LocalNotification.swift */; };
 		1CEC966F27B9C29300CC8688 /* IconView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 1CEC966E27B9C29300CC8688 /* IconView.swift */; };
 		1CEC967127B9C2BB00CC8688 /* CustomIcon.swift in Sources */ = {isa = PBXBuildFile; fileRef = 1CEC967027B9C2BB00CC8688 /* CustomIcon.swift */; };
+		1CEC967227B9C9FB00CC8688 /* IconView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 1CEC966E27B9C29300CC8688 /* IconView.swift */; };
+		1CEC967327B9CA0C00CC8688 /* CustomIcon.swift in Sources */ = {isa = PBXBuildFile; fileRef = 1CEC967027B9C2BB00CC8688 /* CustomIcon.swift */; };
 /* End PBXBuildFile section */
 
 /* Begin PBXContainerItemProxy section */
@@ -297,6 +299,7 @@
 		1CAD602A27A5C1C800C520BD /* Views */ = {
 			isa = PBXGroup;
 			children = (
+				1C358FB927B35252002C83A6 /* ActivityViewController.swift */,
 				1CAD602F27A5C1C800C520BD /* AddMoodHeaderView.swift */,
 				1CAD603127A5C1C800C520BD /* BGView.swift */,
 				1CAD603227A5C1C800C520BD /* ContentView.swift */,
@@ -308,10 +311,9 @@
 				1CAD603327A5C1C800C520BD /* HeaderStatsView.swift */,
 				1CEC966E27B9C29300CC8688 /* IconView.swift */,
 				1CAD602C27A5C1C800C520BD /* SettingsView.swift */,
+				1C358FB027B0AD87002C83A6 /* SharingListView.swift */,
 				1CAD602B27A5C1C800C520BD /* SmallRollUpHeaderView.swift */,
 				1CAD603D27A6ECCD00C520BD /* SwitchableView.swift */,
-				1C358FB027B0AD87002C83A6 /* SharingListView.swift */,
-				1C358FB927B35252002C83A6 /* ActivityViewController.swift */,
 			);
 			path = Views;
 			sourceTree = "<group>";
@@ -417,17 +419,17 @@
 		1CD90B60278C7EBA001C4FEA /* Models */ = {
 			isa = PBXGroup;
 			children = (
-				1C358FB427B0ADF3002C83A6 /* SharingTemplates */,
+				1C02589D27B9821700EB91AC /* CenterTiledImage.swift */,
 				1CA0376F2799FFA600D26164 /* ContentModeViewModel.swift */,
+				1CEC967027B9C2BB00CC8688 /* CustomIcon.swift */,
 				1CC469AB27907D48003E0C6E /* DayChartView.swift */,
 				1C2618FD27960A4F00FDC148 /* FilterViewModel.swift */,
 				1CD90B61278C7EBA001C4FEA /* Mood.swift */,
 				1CD90B62278C7EBA001C4FEA /* MoodEntryExtension.swift */,
+				1CB101C627B81CAC00D1C033 /* MoodMetrics.swift */,
+				1C358FB427B0ADF3002C83A6 /* SharingTemplates */,
 				1C358FAC27ADD0C3002C83A6 /* Theme.swift */,
 				1C5F4977279C945E0092F1B4 /* UserDefaultsStore.swift */,
-				1C02589D27B9821700EB91AC /* CenterTiledImage.swift */,
-				1CEC967027B9C2BB00CC8688 /* CustomIcon.swift */,
-				1CB101C627B81CAC00D1C033 /* MoodMetrics.swift */,
 			);
 			path = Models;
 			sourceTree = "<group>";
@@ -719,6 +721,7 @@
 			buildActionMask = 2147483647;
 			files = (
 				1CD90B65278C7EBA001C4FEA /* Mood.swift in Sources */,
+				1CEC967227B9C9FB00CC8688 /* IconView.swift in Sources */,
 				1CA2662D2793908700C0E12C /* Persistence.swift in Sources */,
 				1CD90B5F278C7EAD001C4FEA /* Random.swift in Sources */,
 				1CD90B68278C7EBA001C4FEA /* MoodEntryExtension.swift in Sources */,
@@ -726,6 +729,7 @@
 				1C10E25127A1AB320047948B /* OnboardingTitle.swift in Sources */,
 				1CB101C827B81CAC00D1C033 /* MoodMetrics.swift in Sources */,
 				1C683FCB2792281400745862 /* Stats.swift in Sources */,
+				1CEC967327B9CA0C00CC8688 /* CustomIcon.swift in Sources */,
 				1C10E25027A1AB220047948B /* OnboardingDay.swift in Sources */,
 				1C10E24F27A1AB1D0047948B /* OnboardingData.swift in Sources */,
 				1CD90B52278C7E7A001C4FEA /* FeelsWidget.intentdefinition in Sources */,

Feels.xcodeproj/xcshareddata/xcschemes/FeelsWidgetExtension.xcscheme

@@ -80,7 +80,7 @@
       <EnvironmentVariables>
          <EnvironmentVariable
             key = "_XCWidgetKind"
-            value = "FeelsWidget"
+            value = "FeelsIconWidget"
             isEnabled = "YES">
          </EnvironmentVariable>
          <EnvironmentVariable

FeelsWidget/FeelsWidget.swift

@@ -279,12 +279,23 @@ struct FeelsIconWidgetEntryView : View {
 
 struct SmallIconView: View {
     var entry: Provider.Entry
-
+    @AppStorage(UserDefaultsStore.Keys.customIcon.rawValue, store: GroupUserDefaults.groupDefaults) private var savedCustomIcon = Data()
+    
     var body: some View {
-        GeometryReader { geo in
+        ZStack {
-            Mood.missing.graphic
+            if let image = UIImage(data: savedCustomIcon) {
-                .resizable()
+                GeometryReader { geo in
-                .scaledToFit()
+                    Image(uiImage: image)
+                        .resizable()
+                        .scaledToFit()
+                }
+            } else {
+                GeometryReader { geo in
+                    Mood.missing.graphic
+                        .resizable()
+                        .scaledToFit()
+                }
+            }
         }
     }
 }

Shared/Models/CustomIcon.swift

@@ -8,25 +8,98 @@
 import SwiftUI
 
 class CustomIcon: ObservableObject {
-    init(leftEye: AnyView,
+    static let numberOfBGItems = 99
-         rightEye: AnyView,
+
-         mouth: AnyView,
+    init(leftEye: Image,
-         background: [(AnyView, UUID)],
+         rightEye: Image,
+         mouth: Image,
+         background: [(Image, UUID)],
          bgColor: Color,
-         innerColor: Color) {
+         innerColor: Color,
+         bgOverlayColor: Color) {
         self.leftEye = leftEye
         self.rightEye = rightEye
         self.mouth = mouth
         self.background = background
         self.bgColor = bgColor
         self.innerColor = innerColor
+        self.bgOverlayColor = bgOverlayColor
     }
     
-    @Published var leftEye: AnyView
+    @Published var leftEye: Image
-    @Published var rightEye: AnyView
+    @Published var rightEye: Image
-    @Published var mouth: AnyView
+    @Published var mouth: Image
     
-    @Published var background: [(AnyView, UUID)]
+    @Published var background: [(Image, UUID)]
     @Published var bgColor: Color
     @Published var innerColor: Color
+    @Published var bgOverlayColor: Color
+}
+
+enum BackGroundOptions: String, CaseIterable {
+    case horrible
+    case bad
+    case average
+    case good
+    case great
+    case random
+    
+    static var selectable: [BackGroundOptions] {
+        return [.great, .good, .average, .bad, .horrible]
+    }
+}
+
+enum Eyes {
+    case left
+    case right
+}
+
+enum EyeOptions: String, CaseIterable {
+    case fire = "fire"
+    case bolt = "bolt2"
+    case dollar = "dollar"
+    case bell = "bell"
+    case btc = "btc"
+    case code = "code"
+    case crown = "crown"
+    case divide = "divide"
+    case exclamation = "exclamation"
+    case fan = "fan"
+    case floppy = "floppy"
+    case x = "x"
+    case skull = "skull"
+    case covid = "covid"
+    case bomb = "bomb"
+    case skull2 = "skull2"
+    case poo = "poo"
+    
+    static public var defaultOption: Image {
+        let image = Image(EyeOptions.fire.rawValue, bundle: .main)
+        return image
+    }
+}
+
+enum MouthOptions: String, CaseIterable {
+    case fire = "fire"
+    case bolt = "bolt2"
+    case dollar = "dollar"
+    case bell = "bell"
+    case btc = "btc"
+    case code = "code"
+    case crown = "crown"
+    case divide = "divide"
+    case exclamation = "exclamation"
+    case fan = "fan"
+    case floppy = "floppy"
+    case x = "x"
+    case skull = "skull"
+    case covid = "covid"
+    case bomb = "bomb"
+    case skull2 = "skull2"
+    case poo = "poo"
+    
+    static public var defaultOption: Image {
+        let image = Image(MouthOptions.bomb.rawValue, bundle: .main)
+        return image
+    }
 }

Shared/Random.swift

@@ -113,6 +113,23 @@ extension View {
             view?.drawHierarchy(in: controller.view.bounds, afterScreenUpdates: true)
         }
     }
+    
+    func asImage(size: CGSize) -> UIImage {
+        let controller = UIHostingController(rootView: self)
+        controller.view.bounds = CGRect(origin: .zero, size: size)
+        let image = controller.view.asImage()
+        return image
+    }
+}
+
+extension UIView {
+    func asImage() -> UIImage {
+        let format = UIGraphicsImageRendererFormat()
+        format.scale = 1
+        return UIGraphicsImageRenderer(size: self.layer.frame.size, format: format).image { context in
+            self.drawHierarchy(in: self.layer.bounds, afterScreenUpdates: true)
+        }
+    }
 }
 
 extension Date {

Shared/views/CreateIconView.swift

@@ -7,111 +7,50 @@
 
 import SwiftUI
 
-enum BackGroundOptions: String, CaseIterable {
-    case horrible
-    case bad
-    case average
-    case good
-    case great
-    case random
-    
-    static var selectable: [BackGroundOptions] {
-        return [.great, .good, .average, .bad, .horrible]
-    }
-}
-
-enum Eyes {
-    case left
-    case right
-}
-
-enum EyeOptions: String, CaseIterable {
-    case fire = "fire"
-    case bolt = "bolt2"
-    case dollar = "dollar"
-    case bell = "bell"
-    case btc = "btc"
-    case code = "code"
-    case crown = "crown"
-    case divide = "divide"
-    case exclamation = "exclamation"
-    case fan = "fan"
-    case floppy = "floppy"
-    case x = "x"
-    case skull = "skull"
-    case covid = "covid"
-    case bomb = "bomb"
-    case skull2 = "skull2"
-    case poo = "poo"
-    
-    static public var defaultOption: AnyView {
-        let image = Image(EyeOptions.fire.rawValue, bundle: .main)
-            .resizable()
-            .frame(width: 20, height: 20)
-        return AnyView(image)
-    }
-}
-
-enum MouthOptions: String, CaseIterable {
-    case fire = "fire"
-    case bolt = "bolt2"
-    case dollar = "dollar"
-    case bell = "bell"
-    case btc = "btc"
-    case code = "code"
-    case crown = "crown"
-    case divide = "divide"
-    case exclamation = "exclamation"
-    case fan = "fan"
-    case floppy = "floppy"
-    case x = "x"
-    case skull = "skull"
-    case covid = "covid"
-    case bomb = "bomb"
-    case skull2 = "skull2"
-    case poo = "poo"
-    
-    static public var defaultOption: AnyView {
-        let image = Image(MouthOptions.bomb.rawValue, bundle: .main)
-            .resizable()
-            .frame(width: 20, height: 20)
-        return AnyView(image)
-    }
-}
-
 struct CreateIconView: View {
-    @State private var mouth: AnyView = MouthOptions.defaultOption
+    @AppStorage(UserDefaultsStore.Keys.customIcon.rawValue, store: GroupUserDefaults.groupDefaults) private var savedCustomIcon = Data()
-    @StateObject private var customIcon = CustomIcon(leftEye: EyeOptions.defaultOption,
-                                                   rightEye: EyeOptions.defaultOption,
-                                                   mouth: MouthOptions.defaultOption,
-                                                   background: [(AnyView, UUID)](),
-                                                   bgColor: .red,
-                                                   innerColor: .green)
     
+    @AppStorage(UserDefaultsStore.Keys.theme.rawValue, store: GroupUserDefaults.groupDefaults) private var theme: Theme = .system
+    
+    static var iconViewBGs: [(Image, UUID)] = {
+        var blah = [(Image, UUID)]()
+        for _ in 0...99 {
+            let image = Image(BackGroundOptions.selectable.randomElement()!.rawValue, bundle: .main)
+            blah.append((image, UUID()))
+        }
+        return blah
+    }()
+    
+    @State private var mouth: Image = MouthOptions.defaultOption
+    @StateObject private var customIcon = CustomIcon(leftEye: EyeOptions.defaultOption,
+                                                     rightEye: EyeOptions.defaultOption,
+                                                     mouth: MouthOptions.defaultOption,
+                                                     background: CreateIconView.iconViewBGs,
+                                                     bgColor: .red,
+                                                     innerColor: .green,
+                                                     bgOverlayColor: .black)
     private var randomElements: [AnyView] = [
         AnyView(Image(BackGroundOptions.selectable.randomElement()!.rawValue)
-            .resizable()
+                    .resizable()
-            .frame(width: 20, height: 20)),
+                    .frame(width: 20, height: 20)),
         AnyView(Image(BackGroundOptions.selectable.randomElement()!.rawValue)
-            .resizable()
+                    .resizable()
-            .frame(width: 20, height: 20)),
+                    .frame(width: 20, height: 20)),
         AnyView(Image(BackGroundOptions.selectable.randomElement()!.rawValue)
-            .resizable()
+                    .resizable()
-            .frame(width: 20, height: 20)),
+                    .frame(width: 20, height: 20)),
         AnyView(Image(BackGroundOptions.selectable.randomElement()!.rawValue)
-            .resizable()
+                    .resizable()
-            .frame(width: 20, height: 20))
+                    .frame(width: 20, height: 20))
     ]
     
     func update(eye: Eyes, eyeOption: EyeOptions) {
         let image = Image(eyeOption.rawValue, bundle: .main)
-            .resizable()
-            .frame(width: 20, height: 20)
         switch eye {
         case .left:
-            customIcon.leftEye = AnyView(image)
+            customIcon.leftEye = image
         case .right:
-            customIcon.rightEye = AnyView(image)
+            customIcon.rightEye = image
         }
     }
     
@@ -136,9 +75,7 @@ struct CreateIconView: View {
     }
     
     func update(mouthOption: MouthOptions) {
-        let image = AnyView(Image(mouthOption.rawValue, bundle: .main)
+        let image = Image(mouthOption.rawValue, bundle: .main)
-            .resizable()
-            .frame(width: 20, height: 20))
         customIcon.mouth = image
     }
     
@@ -146,25 +83,15 @@ struct CreateIconView: View {
         customIcon.background.removeAll()
         
         if background == .random {
-            for _ in 0...120 {
+            for _ in 0...CustomIcon.numberOfBGItems {
                 let image = Image(BackGroundOptions.selectable.randomElement()!.rawValue, bundle: .main)
-
+                customIcon.background.append((image, UUID()))
-                let sizedImage = image
-                    .resizable()
-                    .frame(width: 20, height: 20)
-                
-                customIcon.background.append((AnyView(sizedImage), UUID()))
             }
             return
         }
         let image = Image(background.rawValue, bundle: .main)
-
+        for _ in 0...CustomIcon.numberOfBGItems {
-        let sizedImage = image
+            customIcon.background.append((image, UUID()))
-            .resizable()
-            .frame(width: 20, height: 20)
-        
-        for _ in 0...120 {
-            customIcon.background.append((AnyView(sizedImage), UUID()))
         }
     }
     
@@ -182,99 +109,134 @@ struct CreateIconView: View {
     }
     
     var iconView: some View {
-       IconView(customIcon: customIcon)
+        IconView(customIcon: customIcon, isPreview: true)
     }
     
     var body: some View {
         VStack {
             iconView
-                .padding()
+                .frame(width: 256, height: 256)
+                .cornerRadius(10)
+                .padding(.top)
+            
             Spacer()
             
             VStack {
                 ColorPicker("Set the background color", selection: $customIcon.bgColor)
-                .padding([.leading, .trailing])
+                    .padding([.leading, .trailing])
                 ColorPicker("Set the inner color", selection: $customIcon.innerColor)
-                .padding([.leading, .trailing])
+                    .padding([.leading, .trailing])
             }
             
-            HStack {
+            ZStack {
-                Spacer()
+                Color(theme.currentTheme.secondaryBGColor)
-                Menu("Left Eye") {
-                    ForEach(EyeOptions.allCases, id: \.self) { option in
-                        Button(action: {
-                            update(eye: .left, eyeOption: option)
-                        }, label: {
-                            Label(option.rawValue, image: option.rawValue)
-                        })
-                    }
-                }
-                Spacer()
-                Menu("Right Eye") {
-                    ForEach(EyeOptions.allCases, id: \.self) { option in
-                        Button(action: {
-                            update(eye: .left, eyeOption: option)
-                        }, label: {
-                            Label(option.rawValue, image: option.rawValue)
-                        })
-                    }
-                }
-                Spacer()
-                Menu("Mouth") {
-                    ForEach(MouthOptions.allCases, id: \.self) { option in
-                        Button(action: {
-                            update(mouthOption: option)
-                        }, label: {
-                            Label(option.rawValue, image: option.rawValue)
-                        })
-                    }
-                }
-                Spacer()
-            }
-            .padding(.top, 10)
-            
-            VStack{
-                Text("Background")
-                
                 HStack {
-                    ForEach(BackGroundOptions.selectable, id: \.self) { bg in
+                    Spacer()
-                        Image(bg.rawValue, bundle: .main)
+                    Menu("Left Eye") {
-                            .resizable()
+                        ForEach(EyeOptions.allCases, id: \.self) { option in
-                            .frame(width: CGFloat(50), height: CGFloat(50), alignment: .center)
+                            Button(action: {
-                            .onTapGesture {
+                                update(eye: .left, eyeOption: option)
-                                update(background: bg)
+                            }, label: {
-                            }
+                                Label(option.rawValue, image: option.rawValue)
-                    }
+                            })
-                    mixBG
-                        .onTapGesture {
-                            update(background: .random)
                         }
+                    }
+                    Spacer()
+                    Menu("Right Eye") {
+                        ForEach(EyeOptions.allCases, id: \.self) { option in
+                            Button(action: {
+                                update(eye: .right, eyeOption: option)
+                            }, label: {
+                                Label(option.rawValue, image: option.rawValue)
+                            })
+                        }
+                    }
+                    Spacer()
+                    Menu("Mouth") {
+                        ForEach(MouthOptions.allCases, id: \.self) { option in
+                            Button(action: {
+                                update(mouthOption: option)
+                            }, label: {
+                                Label(option.rawValue, image: option.rawValue)
+                            })
+                        }
+                    }
+                    Spacer()
                 }
             }
+            .frame(height: 44)
             .padding(.top, 10)
             
-            Button(action: {
+            ZStack {
-                createRandom()
+                Color(theme.currentTheme.secondaryBGColor)
-            }, label: {
+                VStack{
-                Text("Random")
+                    Text("Background")
-                    .font(.title)
+                    
-                    .fontWeight(.bold)
+                    HStack {
-                    .foregroundColor(Color(UIColor.white))
+                        ForEach(BackGroundOptions.selectable, id: \.self) { bg in
-                    .frame(minWidth: 0, maxWidth: .infinity)
+                            Image(bg.rawValue, bundle: .main)
-                    .background(.blue)
+                                .resizable()
-            })
+                                .frame(minWidth: 10, idealWidth: 40, maxWidth: 40,
+                                       minHeight: 10, idealHeight: 40, maxHeight: 40,
+                                       alignment: .center)
+                                .onTapGesture {
+                                    update(background: bg)
+                                }
+                        }
+                        mixBG
+                            .onTapGesture {
+                                update(background: .random)
+                            }
+                        
+                        ColorPicker("", selection: $customIcon.bgOverlayColor)
+                    }
+                    .padding([.leading, .trailing])
+                }
+            }
+            .frame(height: 88)
+            .frame(minWidth: 0, maxWidth: .infinity)
+            .padding(.top, 10)
             
-            Button(action: {
+            ZStack {
-//                let icon = icon
+                VStack{
-            }, label: {
+                    Color(theme.currentTheme.secondaryBGColor)
-                Text("Save")
+                    Button(action: {
-                    .font(.title)
+                        createRandom()
-                    .fontWeight(.bold)
+                    }, label: {
-                    .foregroundColor(Color(UIColor.white))
+                        Text("Random")
-                    .frame(minWidth: 0, maxWidth: .infinity)
+                            .font(.title)
-                    .background(.green)
+                            .fontWeight(.bold)
-            })
+                            .foregroundColor(Color(UIColor.white))
+                            .frame(minWidth: 0, maxWidth: .infinity)
+                    })
+                        .frame(height: 44)
+                        .background(.blue)
+                    
+                    Button(action: {
+                        let bigIconView = IconView(customIcon: customIcon, isPreview: false)
+                            .frame(width: 1024, height: 1024, alignment: .center)
+                            .aspectRatio(contentMode: .fit)
+                        let icon = bigIconView.snapshot()
+                        if let data = icon.pngData() {
+                            savedCustomIcon = data
+                        }
+                    }, label: {
+                        Text("Save")
+                            .font(.title)
+                            .fontWeight(.bold)
+                            .foregroundColor(Color(UIColor.white))
+                            .frame(minWidth: 0, maxWidth: .infinity)
+                            .background(.green)
+                    })
+                        .frame(height: 44)
+                }
+            }
+            .frame(height: 88)
         }
+        .background(
+            theme.currentTheme.bg
+                .edgesIgnoringSafeArea(.all)
+        )
     }
 }
 

Shared/views/IconView.swift

@@ -10,70 +10,125 @@ import SwiftUI
 struct IconView: View {
     @State public var customIcon: CustomIcon
     
+    private let facePercSize = 0.6
+    public let isPreview: Bool
+    
+    private var gridXOffset: CGFloat {
+        if isPreview {
+            return CGFloat(0)
+        }
+        return CGFloat(6)
+    }
+    
+    private var gridYOffset: CGFloat {
+        if isPreview {
+            return CGFloat(0)
+        }
+        return CGFloat(-8)
+    }
+    
     let columns = [
-        GridItem(.fixed(20), spacing: 0),
+        GridItem(.flexible(minimum: 1, maximum: 100), spacing: 1),
-        GridItem(.fixed(20), spacing: 0),
+        GridItem(.flexible(minimum: 1, maximum: 100), spacing: 1),
-        GridItem(.fixed(20), spacing: 0),
+        GridItem(.flexible(minimum: 1, maximum: 100), spacing: 1),
-        GridItem(.fixed(20), spacing: 0),
+        GridItem(.flexible(minimum: 1, maximum: 100), spacing: 1),
-        GridItem(.fixed(20), spacing: 0),
+        GridItem(.flexible(minimum: 1, maximum: 100), spacing: 1),
-        GridItem(.fixed(20), spacing: 0),
+        GridItem(.flexible(minimum: 1, maximum: 100), spacing: 1),
-        GridItem(.fixed(20), spacing: 0),
+        GridItem(.flexible(minimum: 1, maximum: 100), spacing: 1),
-        GridItem(.fixed(20), spacing: 0),
+        GridItem(.flexible(minimum: 1, maximum: 100), spacing: 1),
-        GridItem(.fixed(20), spacing: 0),
+        GridItem(.flexible(minimum: 1, maximum: 100), spacing: 1),
-        GridItem(.fixed(20), spacing: 0),
+        GridItem(.flexible(minimum: 1, maximum: 100), spacing: 1)
-        GridItem(.fixed(20), spacing: 0),
-        GridItem(.fixed(20), spacing: 0)
     ]
     
     var body: some View {
-        ZStack {
+        GeometryReader { geo in
-            LazyVGrid(columns: columns, spacing: 0) {
+            ZStack {
-                ForEach(customIcon.background, id: \.self.1) {
+                Rectangle()
-                    $0.0
+                    .fill(
+                        customIcon.bgColor
+                    )
+                    .frame(width: geo.size.width, height: geo.size.height, alignment: .center)
+                    .position(x: geo.size.width/2, y: geo.size.height/2)
+                
+                LazyVGrid(columns: columns, alignment: .leading, spacing: 0) {
+                    ForEach(customIcon.background, id: \.self.1) { (image, uuid) in
+                        image
+                            .resizable()
+                            .aspectRatio(1, contentMode: .fill)
+                            .foregroundColor(customIcon.bgOverlayColor)
+                    }
                 }
-            }
+                .frame(width: geo.size.width,
-            .frame(width: 200, height: 200)
+                       height: geo.size.height,
-            .position(x: 100, y: 110)
+                       alignment: .center)
-            
+                .position(x: geo.size.width/2 + gridXOffset,
-            
+                          y: geo.size.height/2 + gridYOffset)
-            Circle()
+                
-                .strokeBorder(Color.black, lineWidth: 12)
+                .background(
-                .background(Circle().fill(customIcon.innerColor))
+                    .clear
-                .frame(width: 120, height: 120, alignment: .center)
+                )
-            
+
-            VStack {
+                Circle()
-                Spacer()
+                    .strokeBorder(Color.black, lineWidth: geo.size.width * 0.045)
-                    .frame(height: 70)
+                    .background(Circle().fill(customIcon.innerColor))
-                HStack {
+                    .frame(width: geo.size.width*facePercSize,
-                    Spacer()
+                           height: geo.size.height*facePercSize,
-                        .frame(width: 72)
+                           alignment: .center)
-                    customIcon.leftEye
+                    .position(x: geo.size.width/2, y: geo.size.height/2)
-                    Spacer()
+
-                        .frame(width: 20)
+                customIcon.leftEye
-                    customIcon.rightEye
+                    .resizable()
-                    Spacer()
+                    .aspectRatio(contentMode: .fit)
-                }
+                    .frame(width: geo.size.width*0.12,
-                Spacer()
+                           height: geo.size.height*0.12,
-                    .frame(height: 28)
+                           alignment: .center)
+                    .position(x: geo.size.width*0.4,
+                              y: geo.size.height*0.4)
+
+                customIcon.rightEye
+                    .resizable()
+                    .aspectRatio(contentMode: .fit)
+                    .frame(width: geo.size.width*0.12,
+                           height: geo.size.height*0.12,
+                           alignment: .center)
+                    .position(x: geo.size.width*0.6,
+                              y: geo.size.height*0.4)
+
                 customIcon.mouth
-                Spacer()
+                    .resizable()
+                    .aspectRatio(contentMode: .fit)
+                    .frame(width: geo.size.width*0.12,
+                           height: geo.size.height*0.12,
+                           alignment: .center)
+                    .position(x: geo.size.width*0.5,
+                              y: geo.size.height*0.59)
             }
+            .position(x: geo.size.width/2,
+                      y: geo.size.height/2)
         }
-        .frame(width: 200, height: 200)
-        .background(
-            customIcon.bgColor
-        )
-        .cornerRadius(10)
     }
 }
 
 struct IconView_Previews: PreviewProvider {
+    static var backgrounds: [(Image, UUID)] = {
+        var blah = [(Image, UUID)]()
+        for _ in 0...CustomIcon.numberOfBGItems {
+            let image = Image(BackGroundOptions.selectable.randomElement()!.rawValue, bundle: .main)
+            blah.append((image, UUID()))
+        }
+        return blah
+    }()
+    
     static var previews: some View {
         IconView(customIcon: CustomIcon(leftEye: EyeOptions.defaultOption,
                                         rightEye: EyeOptions.defaultOption,
                                         mouth: MouthOptions.defaultOption,
-                                        background: [(AnyView, UUID)](),
+                                        background: IconView_Previews.backgrounds,
                                         bgColor: .red,
-                                        innerColor: .green))
+                                        innerColor: .green,
+                                        bgOverlayColor: .orange),
+                 isPreview: true)
+            .frame(width: 256, height: 256, alignment: .center)
+        
     }
 }