Giter VIP home page Giter VIP logo

gulp-cordova-icon's Introduction

gulp-cordova-icon

Generate all the icons for your Cordova build automatically

Installation

$ npm install --save-dev gulp-cordova-icon

This library depends on GraphicsMagick or ImageMagick, so be sure to install one of those.

Usage

const create = require('gulp-cordova-create'),
const icon = require('gulp-cordova-icon'),
const android = require('gulp-cordova-android');

gulp.task('build', () => {
    return gulp.src('dist')
        .pipe(create())
        .pipe(icon('res/my-icon.png'))
        .pipe(android())
        .pipe(gulp.dest('build'));
});

When the project is build for a platform, the icon provided will be used as application icon. It will generate all the different sizes of the icon and puts them in the correct location.

API

icon(file [, options])

file

Type: string

The path to the png or svg icon that will be used as application icon.

options

Type: object

errorHandlingStrategy

Type: string
Default: lenient

The error handling strategy of the process. This field has 3 possible values:

  • lenient (default): any encountered error is silently discarded and the build continues
  • warn: any encountered error is logged as a warning on the console
  • throw: any encountered error is thrown and interrupts the Gulp stream
imageMagick

Type: boolean
Default: false

Use ImageMagick instead of GraphicsMagick.

See gulp-cordova for the full list of available packages.

License

MIT © Sam Verschueren

gulp-cordova-icon's People

Contributors

djjanse avatar samverschueren avatar thecertain avatar wvanderdeijl avatar

Stargazers

 avatar

Watchers

 avatar  avatar  avatar

gulp-cordova-icon's Issues

Crash with NPM?

Note: This is not due to the dep upgrades.

Using NPM 3.4 and NodeJS 4.1.2, the NPM being used by gulp-cordova (or dep) is crashing and is an old version of 2.10.

If I remove the gulp-cordova-icon from the pipe, the cordova build works. If I add it back, I get the error below.

[email protected] .cordova\hooks\node_modules\async
[14:05:55] '<anonymous>' errored after 4.18 s
[14:05:55] ReferenceError: resolver is not defined
    at null._onTimeout (c:\git\pos\node_modules\gulp-cordova-icon\node_modules\npm\lib\install.js:840:7)
    at Timer.listOnTimeout (timers.js:92:15)
[14:05:55] 'cordova:debug' errored after 42 s
[14:05:55] ReferenceError: resolver is not defined
    at null._onTimeout (c:\git\pos\node_modules\gulp-cordova-icon\node_modules\npm\lib\install.js:840:7)
    at Timer.listOnTimeout (timers.js:92:15)

Add support for svg

Both GraphicsMagick and ImageMagick support converting svg to png. It would be great if I can use a single SVG to generate the plaform icons instead of using a png.

can not create icons

H!

with ImageMagick (exist in PATH too) plugin doesn't work correct... better say: did NOTHING.

After I installed GraficImage from official page and add it in PATH and install, "maybe not need it" via "npm isntall -g gm" plugin created all icons...

Not working

I installed the plugin. It's copying my icon to .cordova/res/icon.png. I installed graphicsmagick on my system and installed npm i gm (which is missing from the docs). It's not creating the pngs into platforms.

I'm on windows

"Usage example" not working with iOS build

After successfully incorporating most of the gulp-cordova-* plugins into my build process, gulp-cordova-icon is giving me a hard time :-(

So I finally tried out the simple usage example of the readme file (only substituting android with ios).

var gulp = require('gulp'),
    create = require('gulp-cordova-create'),
    icon = require('gulp-cordova-icon'),
    ios = require('gulp-cordova-build-ios');

gulp.task('build', function() {
    return gulp.src('dist')
    .pipe(create())
    .pipe(icon('res/my-icon.png'))
    .pipe(ios())
    .pipe(gulp.dest('build'));
});

The gulp task finishes without complaints. Also, the folder .cordova/res contains the icon. However, the app itself still features the standard cordova icon.

Maybe I am missing something here, but since I basically used the most basic example, I am not sure what to do. Any help would be greatly appreciated!

Two other (probably unrelated) things I noticed about the usage example:

android = require('gulp-cordova-android')

should probably read

android = require('gulp-cordova-build-android')

Also, I noticed that after performing the gulp task, I not only end up with a directory ./.cordova, but also an empty directory ./build/.cordova

Test for BlackBerry 10

Not sure if 0.3.0 is still working for BlackBerry 10. A fast test tells me it's not. Should look into it.

Split out the icon making functionality into a cmd npm package

I'm no longer using cordova but I really liked the easy png/svg -> android/ios icons.

It would be great if that could be in an npm package that I can use.

mobile-icon-generator
mig path/to/my/pngorsvg

that would generate the needed image sizes with filenames, folder structure and supporting files (json for ios)

Wrong iOS folder?

Hi,
I'm developing Cordova iPhone app and I'm using gulp-cordova-icon to setup custom app icon.
But images are generated wrongly in "{appName}/Resources/icons" instead "{appName}/Images.xcassets/AppIcon.appiconset" (which contains default cordova icons).

Make the hook configurable

For all the information: #10

TL;DR

The user should be able to use extra options like stopOnError and warnOnError to configure the flow of the hook. This should be done by using the EJS templating system.

@vincent-vieira will make a PR for this.

Resize don't work for iOS build.

The generate icon file is not resized. The fix would be change follow line in icon.js:

gm(source).density(icon.dimension, icon.dimension).write(dest, next);

to:

gm(source).resize(icon.dimension, icon.dimension).write(dest, next);

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.