Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: support adaptive icons for init command #81

Merged
merged 4 commits into from
Apr 22, 2019
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 7 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
# app-icon [![npm version](https://badge.fury.io/js/app-icon.svg)](https://badge.fury.io/js/app-icon) [![CircleCI](https://circleci.com/gh/dwmkerr/app-icon.svg?style=shield)](https://circleci.com/gh/dwmkerr/app-icon) [![AppVeyor Build Status](https://ci.appveyor.com/api/projects/status/3e334rknhjbpx555?svg=true)](https://ci.appveyor.com/project/dwmkerr/app-icon) [![codecov](https://codecov.io/gh/dwmkerr/app-icon/branch/master/graph/badge.svg)](https://codecov.io/gh/dwmkerr/app-icon) [![dependencies Status](https://david-dm.org/dwmkerr/app-icon/status.svg)](https://david-dm.org/dwmkerr/app-icon) [![devDependencies Status](https://david-dm.org/dwmkerr/app-icon/dev-status.svg)](https://david-dm.org/dwmkerr/app-icon?type=dev) [![GuardRails badge](https://badges.production.guardrails.io/dwmkerr/app-icon.svg)](https://www.guardrails.io) [![Greenkeeper badge](https://badges.greenkeeper.io/dwmkerr/app-icon.svg)](https://greenkeeper.io/) [![Conventional Commits](https://img.shields.io/badge/Conventional%20Commits-1.0.0-yellow.svg)](https://conventionalcommits.org)
# app-icon

[![npm version](https://badge.fury.io/js/app-icon.svg)](https://badge.fury.io/js/app-icon) [![CircleCI](https://circleci.com/gh/dwmkerr/app-icon.svg?style=shield)](https://circleci.com/gh/dwmkerr/app-icon) [![AppVeyor Build Status](https://ci.appveyor.com/api/projects/status/3e334rknhjbpx555?svg=true)](https://ci.appveyor.com/project/dwmkerr/app-icon) [![codecov](https://codecov.io/gh/dwmkerr/app-icon/branch/master/graph/badge.svg)](https://codecov.io/gh/dwmkerr/app-icon) [![dependencies Status](https://david-dm.org/dwmkerr/app-icon/status.svg)](https://david-dm.org/dwmkerr/app-icon) [![devDependencies Status](https://david-dm.org/dwmkerr/app-icon/dev-status.svg)](https://david-dm.org/dwmkerr/app-icon?type=dev) [![GuardRails badge](https://badges.production.guardrails.io/dwmkerr/app-icon.svg)](https://www.guardrails.io) [![Greenkeeper badge](https://badges.greenkeeper.io/dwmkerr/app-icon.svg)](https://greenkeeper.io/) [![Conventional Commits](https://img.shields.io/badge/Conventional%20Commits-1.0.0-yellow.svg)](https://conventionalcommits.org)

Icon management for Mobile Apps. Create icons, generate all required sizes, label and annotate. Supports Native, Cordova, React Native, Xamarin and more. Inspired by [cordova-icon](https://github.com/AlexDisler/cordova-icon). Node 6 and onwards supported.

Expand Down Expand Up @@ -105,6 +107,10 @@ You can also add a simple label to the icon.
app-icon init --caption "App" # creates an icon with the text 'App'
```

To create template [Adaptive Icons for Android](https://developer.android.com/guide/practices/ui_guidelines/icon_design_adaptive) include the `--adaptive-icons` flag.

To test how adaptive icons will look when animated, swiped, etc, the [Adaptive Icons](https://adapticon.tooo.io/) website by [Marius Claret](https://twitter.com/mariusclaret) is very useful!

### Generating Icons

Add an icon (ideally at least 192x192 pixels) named `icon.png` to your project root (or run `app-icon init`). To automatically generate icons of all sizes for all app projects in the same folder, run:
Expand Down
Binary file added assets/icon.background.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/icon.foreground.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/icon.psd
Binary file not shown.
22 changes: 17 additions & 5 deletions bin/app-icon.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
#!/usr/bin/env node

// We use Node 4 to keep compatibility high, so need the 'use strict' statement.
// We use Node 6 to keep compatibility high, so need the 'use strict' statement.
// eslint-disable-next-line
'use strict';

Expand Down Expand Up @@ -96,10 +96,11 @@ program
// Define the 'init' command.
program
.command('init')
.description('Initialises app icons')
.description('Initialises app icons by creating simple icon templates')
.option('-c, --caption [caption]', "An optional caption for the icon, e.g 'App'.")
.option('--adaptive-icons', 'Additionally, generate Android Adaptive Icon templates')
.action((params) => {
const { caption } = params;
const { caption, adaptiveIcons } = params;
imagemagickCli.getVersion()
.then((version) => {
if (!version) {
Expand All @@ -110,10 +111,20 @@ program

// Create the icon from the template, captioned if needed.
const input = path.resolve(__dirname, '../src/init/icon.template.png');
return init(input, './icon.png', { caption });
return init(input, './icon.png', { caption })
.then(() => console.log(`Created icon '${chalk.green('icon.png')}'`));
})
.then(() => {
console.log(`Created icon '${chalk.green('icon.png')}'`);
// If we are going to use adaptive icons, create them.
if (!adaptiveIcons) return;
const inputBackground = path.resolve(__dirname, '../src/init/icon.background.template.png');
const inputForeground = path.resolve(__dirname, '../src/init/icon.foreground.template.png');
init(inputBackground, './icon.background.png')
.then(() => init(inputForeground, './icon.foreground.png'))
.then(() => {
console.log(`Created icon '${chalk.green('icon.background.png')}'`);
console.log(`Created icon '${chalk.green('icon.foreground.png')}'`);
});
})
.catch((createError) => {
console.error('An error occurred creating the icon...');
Expand All @@ -130,6 +141,7 @@ program.on('--help', () => {
console.log(' $ app-icon generate -i myicon.png -s ./app/cordova-app');
console.log(' $ app-icon label -i myicon.png -o myicon.out.png -t qa -b 1.2.3');
console.log(' $ app-icon init --caption "App"');
console.log(' $ app-icon init --caption "App" --adaptive-icons');
console.log('');
});

Expand Down
Binary file added src/init/icon.background.template.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/init/icon.foreground.template.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.