SwiftUIcon
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
- Add SwiftUIcon to your project using Swift Package Manager. Add the library to the app target.
- Create an
Icon.swift
file in your project. It must have aView
calledIcon
. Check out the example for a more complex icon, but this could help get you started:
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
- 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 yourIcon.swift
as the Input File (probably$(PROJECT_DIR)/$(PRODUCT_NAME)/Icon.swift
) and theAssets.xcassets
as the output file (probably$(PROJECT_DIR)/$(PRODUCT_NAME)/Assets.xcassets
):
"${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
and add any shapes, paths or colors you want to build your icon. See Apple's SwiftUI Drawing Tutorial 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 is currently using it in a project 👍
- 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
Contact
- Email - zac@velosmobile.com
- Github - @zac / @velos
- Twitter - @zacwhite / @velosmobile