quasarframework / icongenie Goto Github PK

View Code? Open in Web Editor NEW

181.0 6.0 17.0 11.95 MB

CLI tool to generate all the icons and splashscreens for your Quasar Apps

Home Page: https://quasar.dev/icongenie/introduction

License: MIT License

JavaScript 100.00%

nodejs icons iconset icns optipng pngcrush pngquant cross-platform icon-factory es6

icongenie's Introduction

Attention!

Moved over to Quasar's core repo: https://github.com/quasarframework/quasar/tree/dev/icongenie

Quasar Framework Icon Genie

A Quasar tool for generating all your Quasar App's icons and splashscreens

What is Icon Genie

This node module outputs a set of SQUARE favicons, webicons, pwa-icons and electron-icons as well as iOS, Windows Store and MacOS icons from an original 1240x1240 square icon that retains transparency and also minifies the assets. It will also create splash screens for Cordova/Capacitor and even a minified svg.

It works cross-platform to generate those pesky .icns and .ico files used by Electron apps and in the case of the latter preferred by some browsers and webscrapers (favicon.ico) - even though modern development guidelines for Apple and Windows recommend using .png.

It has two primary interfaces (with Quasar CTX and as a standalone CLI) and although it is built for the Quasar Framework, it should work anywhere you can run node. You can even import it and use it in your own pipelines if that's your thing. It is designed to be a very useful tool that you will be glad to have lying around.

You MUST use PNG. If you use a source image that is smaller than 1240x1240 some icons will be naively upscaled. If you do not use a square original, it will be cropped square from the center using the smaller dimension as width and height - but will never upscale - which can potentially result in non-square results. You have been warned.

A final note: You should always pad your icon design with about 1% of empty space. This is because you will lose aliasing resolution when downscaling, which means at smaller sizes your round icon (if it doesn't have padding) will seem to have flattened top, bottom, left and right sides.

Supporting Quasar

Quasar Framework is an MIT-licensed open source project. Its ongoing development is made possible thanks to the support by these awesome backers.

Please read our manifest on Why donations are important. If you'd like to become a donator, check out Quasar Framework's Donator campaign.

Documentation

Head on to the Quasar Framework official website: https://quasar.dev

Stay in Touch

For latest releases and announcements, follow on Twitter: @quasarframework

Chat Support

Ask questions at the official community Discord server: https://chat.quasar.dev

Community Forum

Ask questions at the official community forum: https://forum.quasar.dev

Semver

Quasar Icon Genie is following Semantic Versioning 2.0.

License

MIT License

icongenie's People

Contributors

Stargazers

Watchers

Forkers

gluneau rohantalip tobymosque informatious smolinari hotdogee dsl101 wfd2018 stungkit coreymakes nothingismagick zmilan vim-arcange steveclarke rstoenescu engineervix

icongenie's Issues

Revise outputs

output should respect the exact output folder defined - if not kitchensink

e.g. electron folder should not append with ./electron

Ability to delete app-splashscreen.png

I love the RC of icon-factory 🎉

I chose as splashscreen strategy "use icon with color as bg for splash" so, I deleted that warning icon about the splashscreen, but then I get this error on building:

Error: File not found: /Users/lucaban/.ghq/github.com/mesqueeb/sokketsu/app-splashscreen.png

I think most devs would intuitively delete the app-splashscreen.png with the big warning, in case they just use an icon with a single bg color for splash screen.

and / or

have it not generate app-splashscreen.png if "use icon with color as bg for splash" is chosen?

RFC - Usage

Overall, this RFC is for making usage much easier and speeding up dev/build time.

Rather than creating images each time dev/build commands run, I propose the AE:

registering command to generate them (optionally asking about how to do it and/or through command params)
dev/build hooks (from index AE script) checking if icons are already generated and if so then skipping creation; otherwise generate the icons for first time;
- additional mechanism: storing hash of source png file and comparing last image used to generate icons with current hash of file to determine if dev/build should rebuild icons; one hash per Quasar mode used (so that generating with a mode then with another doesn't wrongly skips updating icons)
this would also allow for us to drop prompting user about the dev vs build algorithm to use for icons

Cordova

automatically injecting needed config in src-cordova/config.xml so that the icons + splashscreen are picked up -- so no user further interaction needed; ref from what I did in quasar/app: managing the config.xml file through elementtree package
splashscreens require a cordova package installed into Cordova project (/src-cordova) --> maybe a warning about this when icon-factory generates icons?

PS: Sorry for the bullet-style approach with this RFC due to time constraints.

imagemin compliance

imagemin is not being passed the right vars

created image buffer
electron
batch minify: electron
{ ArgumentError: Expected argument to be of type `array` but received type `string`
    at input (/app-extension-icon-factory/node_modules/imagemin-pngquant/index.js:32:3)
    at fsP.readFile.then.data (/app-extension-icon-factory/node_modules/imagemin/index.js:20:66) name: 'ArgumentError' }
png2icons wrote type ic10 for size 512x512@2 with 1024 pixels
png2icons wrote type ic09 for size 512x512   with 512 pixels
png2icons wrote type ic14 for size 256x256@2 with 512 pixels
png2icons wrote type ic08 for size 256x256   with 256 pixels
png2icons wrote type ic13 for size 128x128@2 with 256 pixels
png2icons wrote type ic07 for size 128x128   with 128 pixels
png2icons wrote type ic12 for size 32x32@2   with 64 pixels
png2icons wrote type ic11 for size 16x16@2   with 32 pixels
png2icons done
png2icons wrote bmp icon for size 16
png2icons wrote bmp icon for size 32
png2icons wrote bmp icon for size 48
png2icons wrote bmp icon for size 256
png2icons done
pwa
batch minify: pwa
{ ArgumentError: Expected argument to be of type `array` but received type `string`
    at input (/app-extension-icon-factory/node_modules/imagemin-pngquant/index.js:32:3)
    at fsP.readFile.then.data (/app-extension-icon-factory/node_modules/imagemin/index.js:20:66) name: 'ArgumentError' }
spa
batch minify: spa
{ ArgumentError: Expected argument to be of type `array` but received type `string`
    at input (/app-extension-icon-factory/node_modules/imagemin-pngquant/index.js:32:3)
    at fsP.readFile.then.data (/app-extension-icon-factory/node_modules/imagemin/index.js:20:66) name: 'ArgumentError' }
(node:8832) DeprecationWarning: background(background) is deprecated, use resize({ background }), extend({ background }) or flatten({ background }) instead
p1 test/__tests__/output/cordova/android/ldpi-screen-portrait.png [ 200, 320 ]
p1 test/__tests__/output/cordova/android/ldpi-screen-landscape.png [ 320, 200 ]
p1 test/__tests__/output/cordova/android/mdpi-screen-portrait.png [ 320, 480 ]
p1 test/__tests__/output/cordova/android/mdpi-screen-landscape.png [ 480, 320 ]
p1 test/__tests__/output/cordova/android/hdpi-screen-portrait.png [ 480, 800 ]
p1 test/__tests__/output/cordova/android/hdpi-screen-landscape.png [ 800, 480 ]
p1 test/__tests__/output/cordova/android/xhdpi-screen-portrait.png [ 720, 1280 ]
p1 test/__tests__/output/cordova/android/xhdpi-screen-landscape.png [ 1280, 720 ]
p1 test/__tests__/output/cordova/android/xxhdpi-screen-portrait.png [ 960, 1600 ]
p1 test/__tests__/output/cordova/android/xxhdpi-screen-landscape.png [ 1600, 960 ]
p1 test/__tests__/output/cordova/android/xxxhdpi-screen-portrait.png [ 1280, 1920 ]
p1 test/__tests__/output/cordova/android/xxxhdpi-screen-landscape.png [ 1920, 1280 ]
p1 test/__tests__/output/cordova/ios/screen-ipad-landscape-2x.png [ 2048, 1536 ]
p1 test/__tests__/output/cordova/ios/screen-ipad-landscape.png [ 1024, 768 ]
p1 test/__tests__/output/cordova/ios/screen-ipad-portrait-2x.png [ 1536, 2048 ]
p1 test/__tests__/output/cordova/ios/screen-ipad-portrait.png [ 768, 1024 ]
p1 test/__tests__/output/cordova/ios/screen-iphone-landscape-2x.png [ 960, 640 ]
p1 test/__tests__/output/cordova/ios/screen-iphone-landscape.png [ 480, 320 ]
p1 test/__tests__/output/cordova/ios/screen-iphone-portrait-2x.png [ 640, 960 ]
p1 test/__tests__/output/cordova/ios/screen-iphone-portrait-568h-2x.png [ 640, 1136 ]
p1 test/__tests__/output/cordova/ios/screen-iphone-portrait.png [ 320, 480 ]
p1 test/__tests__/output/cordova/windows/Splashscreen-480x800.png [ 480, 800 ]
p1 test/__tests__/output/cordova/windows/Splashscreen-620x300.png [ 620, 300 ]
p1 test/__tests__/output/cordova/windows/Splashscreen-868x420.png [ 868, 420 ]
p1 test/__tests__/output/cordova/windows/Splashscreen-1116x540.png [ 1116, 540 ]
p1 test/__tests__/output/cordova/ios/Default@2x~universal.png [ 2732, 2732 ]
cordova/android
cordova/ios
cordova/windows
batch minify: cordova/android
{ ArgumentError: Expected argument to be of type `array` but received type `string`
    at input (/app-extension-icon-factory/node_modules/imagemin-pngquant/index.js:32:3)
    at fsP.readFile.then.data /app-extension-icon-factory/node_modules/imagemin/index.js:20:66) name: 'ArgumentError' }
batch minify: cordova/ios
{ ArgumentError: Expected argument to be of type `array` but received type `string`
    at input (/app-extension-icon-factory/node_modules/imagemin-pngquant/index.js:32:3)
    at fsP.readFile.then.data (/app-extension-icon-factory/node_modules/imagemin/index.js:20:66) name: 'ArgumentError' }
batch minify: cordova/windows
{ ArgumentError: Expected argument to be of type `array` but received type `string`
    at input (/app-extension-icon-factory/node_modules/imagemin-pngquant/index.js:32:3)
    at fsP.readFile.then.data /app-extension-icon-factory/node_modules/imagemin/index.js:20:66) name: 'ArgumentError' }

Cordova/Phonegap splash screens support

In addition with icon generation provide hybrid app splash screen support.

Extension always rebuild image set

"build_always" flag set to false
and no changes with source image
Any run of quasar dev rebuilds all images

speed up possibility

Will require a bit of a rethink, but maybe its possible to parse the list, hold all the sizes needed in the buffer, minify them and then write from the buffer to the respective folders...

Compile errors on windows when using `import { icon-factory }`

I've got VS installed but still had to run npm install --global --production windows-build-tools in order for it to compile.

I forget the exact error but it was complaining about not having access to MSBuild.exe (which I do).

npm repo Not found

Good morning,
Cannot install quasar-icon-factory with the following methods :

$ yarn global add quasar-icon-factory 
- or -
$ npm install --global quasar-icon-factory

Here is the answer to the command:
error An unexpected error occurred: "https://registry.yarnpkg.com/quasar-icon-factory: Not found".

List of formats

<link rel="icon" type="image/png" sizes="16x16" href="favicon/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicon/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="192x192" href="favicon/android-chrome-192x192.png">
<link rel="icon" type="image/png" sizes="384x384" href="favicon/android-chrome-384x384.png">
<link rel="mask-icon" href="favicon/safari-pinned-tab.svg" color="#5bbad5">

`iconfactory.splash` can't be called directly unless options are passed.

When splash is called via other methods i.e Electron, Cordova it passes options but doesn't set any defaults.

Subsequent Builds Aren't Using Cache

running quasar build -m cordova -T android --debug triggers a new zopfli compression every time.

Running Build/Dev Can Produce a nested src-cordova folder

If you happen to be in src-cordova already then icon-factory will create a nested src-cordova folder

cd src-cordova
quasar build -m cordova -T android --debug

Webpack plugin

There is a lot to do for this, but I think that the approach used here (for passing the options) is great:

https://github.com/EmilTholin/image-trace-loader/blob/master/example/webpack.config.js

loaders: [
          {
            loader: "image-trace-loader",
            options: {
              // turnPolicy: 'TURNPOLICY_MINORITY',
              // turdSize: 100,
              // alphaMax: 1,
              // optCurve: true,
              // optTolerance: 0.2,
              // threshold: 'THRESHOLD_AUTO',
              // flipColors: false,
              // color: 'COLOR_AUTO',
              // background: 'COLOR_TRANSPARENT',
              // skipTraceIfBase64: false
            }
          },

RFC - Gradient Backgrounds

I've been thinking about ways to enable gradient backgrounds. Is this something people would find useful? I see two ways to do this:

You provide a background
The gradient is created internally

They both have plus sides and downsides, and I don't know if this is really something people want. I sort of tend to think it is too fancy, and if you want that you should just provide your icon with the gradient embedded in it.

Different Icon for Different Builds

In my company's use case we have two apps:

internal staging app
external prod app

In this manner, our employees/QA can install both apps at the same time as they have different app ids. I've rigged something together to make the app id dynamic with quasar.conf.js

cordova: {
      id: ctx.dev || ctx.debug ? [STAGE_APP_ID] : [PROD_APP_ID],
      ...
}

I then also use a similar check in the app tow change which set of APIs I'm hitting prod vs. stage.

Ideally the icon would be different too (although not necessary) as I can change the name of the application that's printed in ios/android.

quasar dev -m cordova hangs with icon-factory installed

Hi,

MacOS, "quasar dev -m cordova -T ios".
Sorry for not detailing more because of time constraints. Logging here so it doesn't gets lost. I may get to fixing this if time will allow. Feel free to take a crack at it.

-Razvan

Alternative to graphicsmagick

If you do this, then change the repo name.

Alternatives:
https://jcupitt.github.io/libvips/

imagemin-optipng is ridden with flaws

This needs to be either removed or replaced with a drop-in api-equivalent to imagemin.

Optipng has not only dependency warnings, but also critical buffer overflow possibilities.

imagemin/optipng-bin#98
imagemin/optipng-bin#93

A pull request has been waiting for several months that would fix the exploits, but there has been absolutely no activity from the devs.

Perhaps this is the downside of using nano-modules... how do you keep up?

If the issues at imagemin are not resolved within 48 hrs I will make offbrand dropins for imagemin that I will publish to npm and maintain.

Build jsdocs pipeline

Already stubbed, just need to make one for the pre-commit githook.

remove linux-256x256.png for electron-builder

electron-builder halts otherwise

Alternative to iconutil

check out tiffutil
from https://developer.apple.com/library/content/documentation/GraphicsAnimation/Conceptual/HighResolutionOSX/Optimizing/Optimizing.html

You can use the man command tiffutil with the option -cathidpicheck. The command lets you manipulate TIFF files using the specified options. The -cathidpdicheck option writes a single output file containing the files supplied as arguments to the option. This option also checks to make sure that the standard- and high-resolution files you supply are sized correctly. That is, the dimensions of the high-resolution image must be twice that of the standard-resolution image. Running tiffutil explicitly changes the dpi. Using tiffutil also compresses the resulting output file, so there is no need for you to perform additional compression.

tiffutil -cathidpicheck myimage.png [email protected] -out myimage.tiff

app Unknown command "ext" +2ms

I'm gettings this when i try to install it

Update installation to request background color.

It seems that iOS will not permit transparent app-icon colors. Let's default to white #ffffff - and offer the dev the option to set another one.

We may have to enhance the internal interface to add background color on iOS.

CLI kitchensink produces empty favicon

When running kitchensink the icons are generated in a subdirectory "outputDirectory/src/statics/icons", when favicon command tries to find the source icons it fails b/c it is looking in "outputDirectory/icons".

The following lines are where the subdirectory is specified.
https://github.com/quasarframework/app-extension-icon-factory/blob/cd7a1de20856db45b50c2035bc7966588f3002c1/lib/index.js#L271-L273

android splash screens xdpi xxdpi & xxxdpi should be xhdpi xxhdpi & xxxhdpi

These splash screens are missing the "h" to match the naming standard and their icon counterpart.

https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-splashscreen/index.html

unable to use

can you show me how to use this as cli https://github.com/quasarframework/quasar-icon-factory, i used like this node cli.js -p svg spa -s /root/quasar/src/statics/logo.png -t ./ it gives me error TypeError: iconfactory.svg is not a function at Object.<anonymous> (/root/quasar-icon-factory/bin/cli.js:103:21) at Module._compile (internal/modules/cjs/loader.js:723:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:734:10) at Module.load (internal/modules/cjs/loader.js:620:32) at tryModuleLoad (internal/modules/cjs/loader.js:560:12) at Function.Module._load (internal/modules/cjs/loader.js:552:3) at Function.Module.runMain (internal/modules/cjs/loader.js:776:12) at executeUserCode (internal/bootstrap/node.js:342:17) at startExecution (internal/bootstrap/node.js:276:5) at startup (internal/bootstrap/node.js:227:5)

build breaks webpack

when building, webpack breaks the electron build - probably because of the promise stuff. :(

Pre-defined config.xml for Cordova?

Hi,

I've installed the plugin, and triggers and works upon building Cordva, as describe in the Readme

Cordova Icons and Splash png files are generated for Android, iOS and Windows Phone

However, the paths icons are not updated automatically in config.xml

Note: To be clear, I'm looking for lines of XML like this:

    <platform name="android">
        <icon density="ldpi" src="res/icon/android/icon-36-ldpi.png" />
        <icon density="mdpi" src="res/icon/android/icon-48-mdpi.png" />
        <icon density="hdpi" src="res/icon/android/icon-72-hdpi.png" />
        <icon density="xhdpi" src="res/icon/android/icon-96-xhdpi.png" />
        <icon density="xxhdpi" src="res/icon/android/icon-144-xxhdpi.png" />
        <icon density="xxxhdpi" src="res/icon/android/icon-192-xxxhdpi.png" />
    </platform>

I can't find find one that matches the generated pngs

I even dug the repo and found this: https://github.com/quasarframework/app-extension-icon-factory/blob/dev/research/cordova.txt

Which again, doesn't match

So far I'm typing in the paths one by one for Android, but iOS requires width and height each png, which is very tedious and very prone to mistakes.

Regardless, it's an awesome extension!

Regards

Nickson

Verify is missing from the import iconfactory and the CLI

I'll do a PR.

Will expose verify(src, target) to the CLI and imported versions

phantomjs?

Would just using a phantomjs instance solve all of these resizing issues? Hmm.

Feature Request: Ability to specify a HTTP source

Rather than being forced to supply a local source file, it would be nice to pass along a URL to a file.

Color Profile

The default behaviour of sharp is to strip metadata, including color-profile. We should add an option because in colorspace controlled workplaces this would be CRITICAL not to tamper with that.

https://sharp.pixelplumbing.com/en/stable/api-output/#withmetadata

quasar build breaks with UnhandledPromiseRejectionWarning

When building a project in QuasarFramework I receive the following error:

(node:6208) UnhandledPromiseRejectionWarning:   TypeError: Cannot read property 'preset' of undefined

  - index.js:525 compiler.hooks.emit.tapAsync
    [app.harabello.com]/[quasar-icon-factory]/lib/index.js:525:32




(node:6208) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:6208) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

Command: quasar build -m pwa -t mat
Quasar version: 0.17.19
quasar-icon-factory version: 1.1.0

Output path: not clear how to configure

Right out of the box, I run quasar dev -m ssr and the icons are generated on the /statics/icons directory.
This directory doesn't integrate with default quasar directory structure: https://quasar.dev/quasar-cli/cli-documentation/directory-structure#Introduction, that says that they should be in /src/statics/icons

I cannot find any docs for configuring the output dir. This is my current config (tried to set output variable without success):

"@quasar/icon-factory": {
    "minify_dev": "optipng",
    "minify_build": "zopfli",
    "cordova": {
      "background_color": "#00b588",
      "splashscreen_type": "pure"
    },
    "output": "src",
    "build_always": false,
    "__internal": {
      "dev": {
        "spa": {
          "iconHash": "83f2df02feb532963fa26595daebacd6"
        }
      },
      "build": {}
    }
  }

Check cross platform usage.

It works on:

MacOS
Linux
Windows
Electron

SVG mask creation

There are a few cases where this is needed.

icons not copied to: /src-cordova/platforms/ios/ProjectName/Images.xcassets

It seems the icons in /src-cordova/platforms/ios/ProjectName/Images.xcassets where ProjectName is the actual name of my app, are not overwritten by app-extension-icon-factory.

They stay the default Cordova icons, even after removing and re-adding the platform.

This makes it so in XCode only the Cordova icons are picked up:

PS: the icons for iOS cannot have a transparent bg or alpha layer, else I cannot upload my app to Testflight. 😣

Sharp 21.3 fails to install on MacOS

Sharp 21.3 fails to install on MacOS, any chance you could bump it to the latest version (22.1)?

Never enable background for SVG safari-pinned tab

This just looks bad and no one will ever want this.

batch minifying only works on individual presets

If you run e.g.
cli.js -p=kitchensink -s=test/example-1240x1240.png -t=test/output -m=pngquant

only the last folder in the series will get minified.

[low-priority] Changing the bg colour doesn't trigger re-build

steps to reproduce:

I reinstalled the icon-factory and gone through the setup
I chose a bg colour
I built for cordova-ios
I changed "background_color" in quasar.icon-factory.json and quasar.extensions.json
I built again for cordova-ios
→ the icons are not generated with new background colours.

workaround

delete all the generated icons once

Missing some iOS icons

Noticed we are still missing icons for iOS.
On XCode if I inspect the assets, I can find these missing ones (more details below):

Location:

-src-cordova/platform/ios/AppName/Images.xcassets/AppIcon.appiconset

Files I took from this folder:

missing icons.zip

CLI kitchen sink and cordova fails

When running kitchen sink with the following in command

iconfactory -p=kitchensink -s="./favicon-white.png" -t="./outputFolder" -m=pngquant

it partially completes with the following error:

(node:350332) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'replace' of undefined
    at hexToRgb (C:\Users\kerry.huguet\AppData\Roaming\npm\node_modules\@quasar\quasar-app-extension-icon-factory\lib\index.js:124:13)
    at Object.splash (C:\Users\xxxxx\AppData\Roaming\npm\node_modules\@quasar\quasar-app-extension-icon-factory\lib\index.js:335:13)
    at Object.cordova (C:\Users\xxxxx\AppData\Roaming\npm\node_modules\@quasar\quasar-app-extension-icon-factory\lib\index.js:203:16)
(node:350332) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 2)
(node:350332) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

Enable buffer in addition to file

Considering this for reasons.

Responsive Image Loader

There has been a bit of talk about using the icon-factory to also manage responsive images.

quasarframework/quasar#777

Move Cache into .icon-factory

I would like to have the dev/build output cached in git so that the files aren't generated in various situations, such as: continuous integration

Also, for my use cases it will be common to switch back and forth between quasar dev and quasar build -m cordova -T (adnroid|ios]) [--debug -s] and various forms of `quasar build. So, I'd rather it not run compression when I switch back and forth.

(node:47475) UnhandledPromiseRejectionWarning:   Error: The module 
'/user/app/node_modules/sharp/build/Release/sharp.node'
  was compiled against a different Node.js version using
  NODE_MODULE_VERSION 67. This version of Node.js requires
  NODE_MODULE_VERSION 57. Please try re-compiling or re-installing
  the module (for instance, using `npm rebuild` or `npm install`).

=> the problem is that they built with yarn and then are told to "npm rebuild" 👎