quasarframework / icongenie Goto Github PK

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".

electron-builder halts otherwise

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.

There are a few cases where this is needed.

If you do this, then change the repo name.

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

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

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

steps to reproduce:

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

workaround

delete all the generated icons once

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

I'm gettings this when i try to install it

It works on:

• MacOS
• Linux
• Windows
• Electron

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.

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

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

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

Considering adding our own GC and nulling all the const / lets to manually destroy everything. Not concerned about RAM per sé - more thinking about thread safety.

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.

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. 😣

Favicon.ico is now produced by spa & pwa.

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

Considering this for reasons.

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

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

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

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

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).

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

1. 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

2. 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.

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.

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?

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

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
            }
          },

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

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' }

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

1. You provide a background
2. 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.

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.

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

I'll do a PR.

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

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

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

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_always" flag set to false
and no changes with source image
Any run of quasar dev rebuilds all images

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

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": {}
    }
  }

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...

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

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

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.

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

quasarframework/quasar#777

This issue will confuse 95% of the devs who use this project.

(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" 👎

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