quasarframework / icongenie Goto Github PK
View Code? Open in Web Editor NEWCLI tool to generate all the icons and splashscreens for your Quasar Apps
Home Page: https://quasar.dev/icongenie/introduction
License: MIT License
CLI tool to generate all the icons and splashscreens for your Quasar Apps
Home Page: https://quasar.dev/icongenie/introduction
License: MIT License
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:
quasar.icon-factory.json
and quasar.extensions.json
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:
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.
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:
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.
<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">
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.
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.
elementtree
packagePS: 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:
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:
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.
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.