npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@capacitor/assets

v3.0.5

Published

Generate icon and splash screen images for Capacitor apps

Downloads

304,642

Readme

Capacitor Assets

This tool will crop and resize JPEG and PNG source images to generate icons and splash screens for iOS, Android, and Progressive Web Apps using Capacitor.

Note: previous versions of this tool supported Cordova but Cordova support has been removed as of 1.x. We strongly recommend teams migrate to Capacitor.

Install

npm install --save-dev @capacitor/assets

Usage

The tool expects a assets or resources folder to exist in the root of the project.

There are two modes this tool can be used in: Easy Mode, and Full Control mode.

Usage - Easy Mode (recommended)

With Easy Mode, the tool supports generating all the icon and splash assets you need for iOS, Android, and PWA from a single logo file along with an optional dark mode logo, and background colors. This is the easiest way to generate all your assets, but it trades customizability for convenience.

To use this mode, create a single logo.png or icon.png with an optional logo-dark.png in assets/ (the tool also supports using SVG files as source images, substitue .svg as needed):

assets/
├── logo.png
└── logo-dark.png

Then, generate the assets and provide the background colors that will be used to generate background layers for icons:

npx @capacitor/assets generate --iconBackgroundColor '#eeeeee' --iconBackgroundColorDark '#222222' --splashBackgroundColor '#eeeeee' --splashBackgroundColorDark '#111111'

Where the provided flags are:

  • --iosProject - the path to the iOS project (default ios/App)
  • --androidProject - the path to the Android project (default android)
  • --assetPath <path> - Path to the assets directory for your project. By default will check "assets" and "resources" directories, in that order.
  • --iconBackgroundColor - the background color (hex value) used when generating icon layers for light mode (default #ffffff)
  • --iconBackgroundColorDark - the background color (hex value) used when generating icon layers for dark mode (where supported) (default #111111)
  • --splashBackgroundColor - the background color (hex value) used when generating splash screens (default #ffffff)
  • --splashBackgroundColorDark - the background color (hex value) used when generating splash screens for dark mode (where supported) (default #111111)
  • --logoSplashTargetWidth - A specific width to set the logo to when generating splash screens from a single logo file (not used by default, logo is scaled as percentage of splash instead, see --logoSplashScale)
  • --logoSplashScale - the scale multiplier to apply to the logo when generating splash screens from a single logo file (default: 0.2)
  • --ios - explicitly run iOS asset generation. Using a platform flag makes the platform list exclusive.
  • --android - explicitly run Android asset generation. Using a platform flag makes the platform list exclusive.
  • --pwa - explicitly run PWA asset generation. Using a platform flag makes the platform list exclusive.

Usage - Custom Mode

This mode provides full control over the assets used to generate icons and splash screens, but requires more source files. To use this mode, provide custom icons and splash screen source images as shown below:

assets/
├── icon-only.png
├── icon-foreground.png
├── icon-background.png
├── splash.png
└── splash-dark.png
  • assets/icon-only.(png|jpg) must be at least 1024×1024px
  • assets/icon-(foreground|background).(png|jpg) must be at least 1024×1024px
  • assets/splash[-dark].(png|jpg) must be at least 2732×2732px

To generate resources with all the default options, just run:

npx @capacitor/assets generate

@capacitor/assets accepts a platform for the first argument (ios, android, or pwa currently). If specified, resources are generated only for that platform:

npx @capacitor/assets generate --ios

Otherwise @capacitor/assets will use all detected Capacitor platforms.

PWA Notes

Manifest

This tool will create and/or update the web app manifest used in your project, and supports both the older manifest.json file and the newer manifest.webmanifest files, preferring manifest.webmanifest when no existing manifest is found.

By default, the tool will look for the manifest file in public, src, and www in that order. Use the flag --pwaManifestPath to specify the exact path to your web app manifest.

Help

See the help instructions on the command line with the --help flag.

npx @capacitor/assets generate --help