Import Icon

[lachlanwgordon]

I've just about finished a new app and now I have to add icons which has reminded me how painful it is.

The Image asset manager already supports scaling to various sizes and creating xcassettes so hopefully this can be neatly intergrated into that workflow.

There a few apps out there that will do the scaling for you but it would be awesome to have it in the IDE and put it in the correct folders and declare it in info.plist/android manifest.

Work flow

1. In image assett manager user clicks "Import new image assett"
2. In the popup, user clicks new checkbox called "App Icon"
3. If the user clicks on the iOS, they will see the icon at all the different required sizes.
4. If the user clicks Android they will see all the sizes.
5. User clicks "Import Image"
6. User will be able to see the new icon in their xcassets.
7. When user opens android manifest or info.plist they will see there new icon is set.

Requirements

iOS

There are so many different sizes. Official docs are here but they're a little hard to digest. https://developer.apple.com/library/archive/qa/qa1686/_index.html

Xamarin iOS docs have a good list of the different resolutions. https://docs.microsoft.com/en-us/xamarin/ios/app-fundamentals/images-icons/app-icons?tabs=windows

I think a reasonable assumption for which ones to generate would be the first 18(all the ipad and iphone sizes + App Store marketing)

These images all go in a folder called "{IconName}.iconset" and need a .json file to list all the sizes.

When scaling these icons they need to end up at absolute sizes, as opposed to the relative sizes used for other assetts.

I find if you're going to scale down to all these sizes it's best to start with a 1024*1024 image. If it's not square or it's less than that you'll get some unpleasant scaling. Perhaps show a warning to the user if they try to use anything else?

Info.plist need to be modified with new icon names.

Mac/Watch/AppleTv/CarPlay

The Xcassets also has spots for another 23 sizes for other platforms. I never use them and wouldn't want all that bloat in my app size and I'm guessing most users would be the same. You could either leave these assets out entirley, or make them optional.

Android

Android scalings are probably all the same folders you already use.

There are new circular android icons which need a .json to work. I don't fully understand them yet but if you don't do it right, your icon will look really ugly on Android 10.

Declaring the icon in android can be done in the manifest or it might be set in the MainActivity.cs so I suppose we have to check in both. For best results we'll need to set the Icon and RoundIcon.

[matthewrdev]

@lachlanwgordon I did some preliminary design work on an app icon importer a little while ago, its definitely needed by the community.

This is the design that was originally built for the tool, can you comment on it and provide some feedback on if we are on the right path?

[matthewrdev]

@ravero Please focus your attention on implementing this feature next. If required, speak directly with @lachlanwgordon to make sure what we build is correct.

Focus on creating an MVP first and we can iterate on it once the MVP is published. For an MVP, please support the following iOS iconsets and normal icons in Android (no circular icon support, just do a standard image import).

[lachlanwgordon]

Oops, never replied to your mockup.

Yep, this is exactly what I'm after.

I definitely like how you can untick groups of icons for iOS in bulk. e.g. Turn on/off CarPlay with one tick.

In my original spec i suggested a tick box within the image assett importer to put it into icon mode, but I think another button in the assett Manager "Import New Icon" would be just as good if that fits better.

If you do use a different window to the Image Assett importer it should be as close to the image importer layout as possible so it feels consisten.

• The File Path and Resource name section would stay the same
• The Target projects area should be similar but could be smaller.
• The resize image, height and width no longer make sense so they'll go
• The previews area should be much bigger and split up like in the mockup.

[matthewrdev]

@lachlanwgordon I'll update the mock of the app icon importer to be more inline with the image importer, using your suggested changes as the basis.

[matthewrdev]

All done and shipped @lachlanwgordon. Closing this issue.