Closed janpio closed 1 year ago
For now it's manual, you add the images as you'll do it on a native project
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.
Yep definitely want to get Ionic's resources working for capacitor as well
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.
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.
@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?
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
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?
+1, looking for guidance in that respect as well
Capacitor can use cordova-res
for this: https://github.com/ionic-team/cordova-res
It would be useful. Please add it.
+1 to add this
+1
It would be useful. Please add it. +1
I have the same problem. I saw that the priority is low :face_with_head_bandage:
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.
npm install cordova-res --save-dev
resources/icon.png
resources/splash.png
"resources": "cordova-res ios && cordova-res android && node scripts/resources.js"
to scripts
in package.json
scripts/resources.js
sudo chmod -R 777 scripts/resources.js
npm run resources
@dalezak Awesome, thanks a lot!!
Thanks ! Something like this should be added to capacitor sync android
+1 for this request we really need splash screen and app icon generation automated on capacitor by default
There are a few different projects for generating these resources.
I've tried to encourage them to collaborate: https://github.com/ionic-team/cordova-res/issues/51
If anyone is interested, there are a list of similar projects in that issue.
@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
. 😄
@dalezak Thank you so much!! I'm so happy I found this!
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!
Great! Support for automatically copying icons and spash screens into a Capacitor project is very useful. Thanks @wannadream!
Hello, I've found an NPM library focused on Capacitor proyects, it works like ionic cordova resources
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
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?
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
Hope they will release soon. Meantime you could use https://www.npmjs.com/package/capacitor-resources
It's ok, it generate each png file for the splash but... about the SVG images, isn't yet?
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
@mlynch Suggestion: try to use an SVG as the source image (optionally several, in case you want less detail in the smaller icons).
https://github.com/ionic-team/capacitor/issues/229#issuecomment-389088750
closing closing as @capacitor/assets
is available now.
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.
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?