Icon and Splashscreen assets?

[janpio]

In Ionic with Cordova this is all done (more or less) automatically by using ionic cordova resources and then Cordova copies all the images to the right places and does the configuration.

How does it work in Capacitor?

[jcesarmobile]

For now it's manual, you add the images as you'll do it on a native project

[janpio]

Capacitor could use a docs article with a description of that process and/or links to description on guides on that.

And of course some help and automation in resizing and placing the pictures would be nice as well.

[mlynch]

Yep definitely want to get Ionic's resources working for capacitor as well

[janpio]

Are you planning to implement this in the Ionic CLI when a capacitor integrations exists there or should this somehow be more independent from the Ionic CLI and covered over here?

There are npm packages that can resize icons locally, then it would "only" missing to copy the files and modify the native project files.

[sandstrom]

This package is great for building iOS/Android assets from an SVG source:
https://github.com/isleofcode/splicon

Although it's currently used for Corber (build-tooling for Cordova) it is an isolated npm package (it only does resizing) that could easily be adapted to work well with capacitor.

Also, not reinventing the wheel and sharing the code with other projects makes a lot of sense.

[sneko]

@jcesarmobile I know there is no built-in generator in Capacitor, but did you organized all the icons and splashcreens tree manually for iOS and Android? Or did you use a generator?

[jcesarmobile]

Android Studio has a generator for the icons, for splash you have to manually put them in res folder. For iOS there is an asset catalog where you drag the icons and splash and Xcode put them in the right place and rename

[stewones]

hello @mlynch, first of all thank you for all your efforts on making our next "cordova". Do you have any idea about when we'll able to use ionic resources for capacitor?

[Freelane]

+1, looking for guidance in that respect as well

[imhoffd]

Capacitor can use cordova-res for this: https://github.com/ionic-team/cordova-res

[joseadame]

It would be useful. Please add it.

[scottieslg]

+1 to add this

[lindsey-tonn]

+1

[SansaoVinicius]

It would be useful. Please add it. +1

[leandrorebelo]

I have the same problem. I saw that the priority is low 🤕

[dalezak]

It's still a work in progress, but here's a semi-automated way to generate icon and splash resources for Capacitor. https://gist.github.com/dalezak/a6b1de39091f4ace220695d72717ac71

It will use cordova-res to generate all the various image sizes, then runs the script to copy over the generated images to the iOS and Android projects.

1. Run npm install cordova-res --save-dev
2. Create 1024x1024px icon at resources/icon.png
3. Create 2732x2732px splash at resources/splash.png
4. Add "resources": "cordova-res ios && cordova-res android && node scripts/resources.js" to scripts in package.json
5. Copy resources.js file to scripts/resources.js
6. Run sudo chmod -R 777 scripts/resources.js
7. Run npm run resources

[alejandrovisciglio]

@dalezak Awesome, thanks a lot!!

[brospars]

Thanks ! Something like this should be added to capacitor sync android

[3alampro]

+1 for this request we really need splash screen and app icon generation automated on capacitor by default

[sandstrom]

There are a few different projects for generating these resources.

I've tried to encourage them to collaborate:
ionic-team/capacitor-assets#51

If anyone is interested, there are a list of similar projects in that issue.

[imhoffd]

@dalezak It looks like resources.js is what copies the generated resources into the native Capacitor projects. I'd be more than happy to look at a PR that adds that functionality to cordova-res. 😄

[mckelveygreg]

@dalezak Thank you so much!! I'm so happy I found this!

[imhoffd]

Hello 👋

cordova-res now has this functionality thanks to a PR by @wannadream 👏

To give it a try:

npm install -g cordova-res

Then run the following in your project:

cordova-res --skip-config --copy

See the README for more details: https://github.com/ionic-team/cordova-res#capacitor

Let me know what you think! Thanks!

[sandstrom]

Great! Support for automatically copying icons and spash screens into a Capacitor project is very useful. Thanks @wannadream!

[EdvardGilz]

Hello, I've found an NPM library focused on Capacitor proyects, it works like ionic cordova resources

https://www.npmjs.com/package/capacitor-resources

[sebinbenjamin]

https://github.com/sebinbenjamin/image-res-generator additionally supports PWA icon generation.
Like https://www.npmjs.com/package/capacitor-resources, it is also a fork of https://github.com/olivab/cordova-res-generator

[IT-MikeS]

I believe this will be covered in the upcoming docs update but in the meantime please reference this section of cordova-res

https://github.com/ionic-team/cordova-res#capacitor

@dwieeb would this be better suited as a discussion now?

[imhoffd]

There are still a few things missing with cordova-res and Capacitor, unfortunately. They should work in 1.0.0. Track this milestone for progress: https://github.com/ionic-team/cordova-res/milestone/1

[danielehrhardt]

Hope they will release soon. Meantime you could use https://www.npmjs.com/package/capacitor-resources

[neoacevedo]

It's ok, it generate each png file for the splash but... about the SVG images, isn't yet?

[mlynch]

Going to be tackling some of this in the first release of @capacitor/assets which is going to be the next generation of the old cordova-res project. Track progress here: https://github.com/ionic-team/capacitor-assets

[sandstrom]

@mlynch Suggestion: try to use an SVG as the source image (optionally several, in case you want less detail in the smaller icons).

#229 (comment)

[jcesarmobile]

closing closing as @capacitor/assets is available now.

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Capacitor, please create a new issue and ensure the template is fully filled out.