diff --git a/Example/IconHarness/Icon.swift b/Example/IconHarness/Icon.swift index 056a6d4..bb38fc8 100644 --- a/Example/IconHarness/Icon.swift +++ b/Example/IconHarness/Icon.swift @@ -8,7 +8,7 @@ import SwiftUI import SwiftUIcon -struct Icon : View { +struct Icon: View { var body: some View { /// Note: All of these assume a canvas size of 1024. diff --git a/README.md b/README.md index 8debf61..0c9f8b8 100644 --- a/README.md +++ b/README.md @@ -1,35 +1,55 @@ # SwiftUIcon -**SwiftUIIcon** is a set of scripts and helpers for creating your iOS or iPadOS app icon in SwiftUI using shape and path drawing primitives. +**SwiftUIIcon** is a library that provides scripts and preview helpers for drawing and generating your iOS, iPad OS, and macOS app icons in SwiftUI using shape and path drawing primitives. + +By defining your app's icon in code, SwiftUIcon can generate all image sizes you need, show you real-time previews of your icon changes and can even allow you to integrate your icon right into your app's view hierarchy.
- +
## Getting Started -1. Add SwiftUIcon using Swift Package Manager -2. Add a Run Script build phase before your Copy Resources phase and specify the path to `Icon.swift` as the Input File (probably `$(PROJECT_DIR)/$(PRODUCT_NAME)/Icon/Icon.swift`) and the `Assets.xcassets` as the output file (probably `$(PROJECT_DIR)/$(PRODUCT_NAME)/Assets.xcassets`): +1. Add SwiftUIcon to your project using Swift Package Manager. Add the library to the app target. +2. Create an `Icon.swift` file in your project. It must have a `View` called `Icon`. Check out [the example](Example/IconHarness/Icon.swift) for a more complex icon, but this could help get you started: + +```Swift +struct Icon: View { + var body: some View { + IconStack { canvas in + Color.blue + } + } +} + +#if DEBUG +struct Icon_Previews : PreviewProvider { + static var previews: some View { + IconPreviews(icon: Icon()) + } +} +#endif +``` + +3. Add a Run Script build phase before your Copy Resources phase calling the `build-script.sh` included in the package. You'll need to specify the path to your `Icon.swift` as the Input File (probably `$(PROJECT_DIR)/$(PRODUCT_NAME)/Icon.swift`) and the `Assets.xcassets` as the output file (probably `$(PROJECT_DIR)/$(PRODUCT_NAME)/Assets.xcassets`): ```bash -cd "${BUILD_ROOT}"/../../SourcePackages/checkouts/SwiftUIcon -chmod +x build-script.sh -./build-script.sh +"${BUILD_ROOT%Build/*}SourcePackages/checkouts/SwiftUIcon/build-script.sh" ```- +
## Adding Your Icon -You can now edit the contents of the `IconStack` wrapper helper view inside of `Icon.swift`. This is essentially a `ZStack` with a `.center` alignment that provides a proxy to relatively position elements based on an assumed 1024x1024 canvas size. See [Apple's SwiftUI Drawing Tutorial](https://developer.apple.com/tutorials/swiftui/drawing-paths-and-shapes) for more info on drawing using SwiftUI. +You can now edit the contents of the `IconStack` wrapper helper view inside of `Icon.swift` and add any shapes, paths or colors you want to build your icon. See [Apple's SwiftUI Drawing Tutorial](https://developer.apple.com/tutorials/swiftui/drawing-paths-and-shapes) for more info on drawing using SwiftUI. + +The `IconStack` is essentially a `ZStack` with a `.center` alignment that provides a `CanvasProxy` value to relatively position elements based on an assumed 1024x1024 canvas size. This is helpful because the `Icon` is rendered individually at all the required icon sizes, so anything that has a fixed size will not scale properly. Any place where you would normally have a hard-coded number like `42`, you should instead use `canvas[42]`. You can also scale fonts and other elements manually using the `CanvasProxy.scale` property. As an example, `Text("Testing").font(Font.system(size: 200 * canvas.scale))` should get you a properly scaled `Text` element. ## Limitations * It's a bit of a hack, but [Velos](https://velosmobile.com/) is currently using it in a project 👍 -* Installing this is pretty manual. Some currently technical issues prevent making it a Swift Package, but feel free to file an issue if you find a better way! -* Because the View is rendered at all the individual sizes, anything that has a fixed size will not scale properly. To get around this, you should use the `CanvasProxy` passed into the function builder of `IconStack`. Any place where you would normally have a hard-coded `value`, you should use `canvas[value]`. You can also scale fonts and other elements manually with the `CanvasProxy.scale` property. As an example, `Text("Testing").font(Font.system(size: 200 * canvas.scale))` should get you a properly scaled `Text` element. -* Since the run script essentially concatenates all the Swift files and runs it as a macOS script, any elements you use in your Icon must look the same on both iOS and macOS. So you should probably stay away from actual UI controls 😉 +* Since the run script essentially concatenates all the Swift files and runs it as a macOS script, any elements you use in your Icon will be rendered using your Mac's version of SwiftUI. Because of this, there might be some differences or changes between macOS versions or between macOS and iOS that could manifest in your Icon. You should probably also stay away from putting UI elements like `Slider` in your Icon too 😉 ## License MIT diff --git a/images/build-phase.jpg b/images/build-phase.jpg deleted file mode 100644 index a1f9365..0000000 Binary files a/images/build-phase.jpg and /dev/null differ diff --git a/images/live-preview.gif b/images/live-preview.gif deleted file mode 100644 index c6d2eb6..0000000 Binary files a/images/live-preview.gif and /dev/null differ