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

app-icon-test

v0.4.1

Published

Automatic icon resizing for Mobile Apps. Supports Native, Cordova and React Native. Inspired by cordova-icon.

Downloads

7

Readme

app-icon CircleCI codecov dependencies Status devDependencies Status

Automatic icon resizing for Mobile Apps. Supports Native, Cordova and React Native. Also supports labelling of app icons. Inspired by cordova-icon.

Introduction

This simple tool allows you to create a single icon in your app project, then create icons of all required sizes from it. It currently works for iOS and Android. You can also add labels to your app icons.

Installation

Install with:

npm install -g app-icon

You will need imagemagick installed:

brew install imagemagick          # OSX
sudo apt-get install imagemagick  # Debian/Ubuntu/etc
sudo yum install imagemagick      # CentOS/etc

Usage

Add an icon (ideally at least 192x192 pixels) named icon.png to your project root. To automatically generate icons of all sizes for all app projects in the same folder, run:

app-icon generate

If an iOS project is present, then the icon will be copied at all required sizes to:

./ios/<ProjectName>/Images.xcassets/AppIcon.appiconset

If an Android project is present, then the icon will be copied at all required sizes to:

./android/app/src/main/res

You can specify the path to the source icon, as well as the folder to search for app projects, just run app-icon generate -h to see the options.

Add labels to an icon with the command below:

app-icon label -i icon.png -o output.png --top UAT --bottom 0.12.3

This would produce output like the below image:

Labelled Icon Image

This is a useful trick when you are creating things like internal QA versions of your app, where you might want to show a version number or other label in the icon itself.

Coding

The only dependencies are Node 6 (or above) and Yarn.

Useful commands for development are:

| Command | Usage | |---------|-------| | npm test | Runs the unit tests. | | npm run test:debug | Runs the tests in a debugger. Combine with .only and debugger for ease of debugging. | | npm run cov | Runs the tests, writing coverage reports to ./artifacts/coverage. |

Currently the linting style is based on airbnb. Run npm run lint to lint the code.

Initial Setup

Install the dependencies (I recommend Node Version Manager):

nvm install 6
nvm use 6
npm install -g yarn
git clone [email protected]:dwmkerr/app-icon.git
cd app-icon
yarn

Running Tests

Run the tests with:

npm test

Tests are executed with Mocha and coverage is handled by Istanbul. Coverage reports are written to an ./artifacts folder.

Creating a Release

To create a release.

  • Merge your work to master.
  • Use npm version to bump, e.g. npm version patch
  • Push and deploy git push --tags && git push && npm publish

The Sample Projects

This project includes some sample apps in the test folder, which are used for the tests. You can also run these apps to see the icons produced in action.

React Native

To run:

cd ./test/ReactNativeIconTest/
npm install
react-native run-ios
# OR react-native run-android

Cordova

To run:

cd ./test/CordovaApp/
npm install
cordova run ios
# OR cordova run android

Native

To run the native apps, open the ./test/NativeApp directory, then open the iOS/Android projects in XCode/AndroidStudio as needed.

Troubleshooting

Images labelled with app-icon label have the text slightly vertically offset

This seems to be an issue with Imagemagick 6 - try upgrading to 7.

License

MIT