diff --git a/README.md b/README.md index 26f1424..1201386 100644 --- a/README.md +++ b/README.md @@ -1,12 +1,12 @@ ![official icon](https://img.shields.io/badge/Quasar%201.0-Official%20UI%20App%20Extension-blue.svg) -![npm (scoped)](https://img.shields.io/npm/v/@quasar/quasar-app-extension-icon-factory.svg) -[![GitHub code size in bytes](https://img.shields.io/github/languages/code-size/quasarframework/app-extension-icon-factory.svg)]() -[![GitHub repo size in bytes](https://img.shields.io/github/repo-size/quasarframework/app-extension-icon-factory.svg)]() -[![npm](https://img.shields.io/npm/dt/@quasar/quasar-app-extension-icon-factory.svg)](https://www.npmjs.com/package/@quasar/quasar-app-extension-icon-factory) +![npm (scoped)](https://img.shields.io/npm/v/@quasar/quasar-app-extension-icon-genie.svg) +[![GitHub code size in bytes](https://img.shields.io/github/languages/code-size/quasarframework/app-extension-icon-genie.svg)]() +[![GitHub repo size in bytes](https://img.shields.io/github/repo-size/quasarframework/app-extension-icon-genie.svg)]() +[![npm](https://img.shields.io/npm/dt/@quasar/quasar-app-extension-icon-genie.svg)](https://www.npmjs.com/package/@quasar/quasar-app-extension-icon-genie) -# @quasar/icon-factory +# @quasar/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 and even a minified svg. @@ -27,19 +27,19 @@ A final note: You should always pad your icon design with about 1% of empty spac - @quasar/cli version 1.0.0-beta.7 or higher (if building a new project) or @quasar/app v1.0.0-beta.25 or later in order to add this module as an app-extension. ### Note for early adopters -Things have changed along the way to the RC, and if you have a version of the Icon Factory that is less than v1.0.0-beta.30 (you can find out by running `$ quasar info`), please follow these instructions: +Things have changed along the way to the RC, and if you have a version of the Icon Genie that is less than v1.0.0-beta.30 (you can find out by running `$ quasar info`), please follow these instructions: 1. delete the `.icon-factory/` and all its components 2. if its still there, delete the `quasar.icon-factory.json` file 3. run: `$ quasar ext remove @quasar/icon-factory` 4. move your icon source-file to `app-icon.png` in the root of your app 5. if you want a custom splashscreen, put that file at `app-splashscreen.png` -6. run: `$ quasar ext add @quasar/icon-factory` +6. run: `$ quasar ext add @quasar/icon-genie` ### Install as an App Extension (Quasar v1.0+) ```bash -$ quasar ext add @quasar/icon-factory +$ quasar ext add @quasar/icon-genie ``` If you are on Windows and seeing an error the likes of `pngquant failed to build, make sure that libpng-dev is installed`, please do the following: @@ -62,7 +62,7 @@ The most important part (and indeed the only reason to use this extension) is po -------------------------------------------------------------------- ``` > **Note:** - Please use a valid png of 1240x1240 pixels. If you choose an image that is not square or has smaller dimensions, the icon-factory will do its best, but the results will not be optimal. Transparency is recommended. PNG is required. + Please use a valid png of 1240x1240 pixels. If you choose an image that is not square or has smaller dimensions, the icon-genie will do its best, but the results will not be optimal. Transparency is recommended. PNG is required. Then choose a minification strategy: ```bash @@ -80,7 +80,7 @@ You will be asked the same question for production. Our recommendation is to cho You will also be asked for a background color. This is used in the few cases that a background is required, as with Cordova splashscreens and Cordova iOS icons. ### Triggering -The first time you start Quasar, icon-factory will create the images needed for the specific app artifacts. They will not automatically be added to git, so you will need to manage that yourself. +The first time you start Quasar, icon-genie will create the images needed for the specific app artifacts. They will not automatically be added to git, so you will need to manage that yourself. ```bash $ quasar dev --mode electron @@ -88,10 +88,10 @@ $ quasar dev --mode electron You will also be asked which method of splashscreen generation you prefer, ranging from the mere placement of your logo upon the background color you specified, overlaying your icon on top of a splashscreen image, or just using the splashscreen image. If you aren't happy with the results, don't forget you can change it in `quasar.extensions.json`. -The final option during the install phase is to "always rebuild", which is useful for fine-tuning e.g. background colors, but if you don't remove this flag in quasar.extensions.json (or set it to false), the icon-factory will always run and slow down your dev buildtime. +The final option during the install phase is to "always rebuild", which is useful for fine-tuning e.g. background colors, but if you don't remove this flag in quasar.extensions.json (or set it to false), the icon-genie will always run and slow down your dev buildtime. ### Intermediary Folder -The icon-factory makes an intermediary folder in the `node_modules/@quasar/icon-factory/tmp` folder to host the images when you switch between dev and build. If you haven't changed the source icon, these will merely be copied to the right destination folders. +The icon-genie makes an intermediary folder in the `node_modules/@quasar/icon-genie/tmp` folder to host the images when you switch between dev and build. If you haven't changed the source icon, these will merely be copied to the right destination folders. ### Changing the Source Image If you don't change the source image for the icon or the splashscreen, you will see a default iamge that reminds you to do this. @@ -103,7 +103,7 @@ All relevant settings are stored in `quasar.extensions.json`, and if you change ### Uninstalling Run: ``` -$ quasar ext remove @quasar/icon-factory +$ quasar ext remove @quasar/icon-genie ``` This will remove the extension, its dependencies - but not any of the icons it created. @@ -125,7 +125,7 @@ Splashscreens are obviously a little different depending on whether you are targ - https://github.com/apache/cordova-plugin-splashscreen#readme ## How it Works -There are 5 things that Icon Factory does with your original file. It will create a set of webicons for your project, it will minify those icons, it can make special icns (Mac) / ico (Windows) files for apps that need them and it will create SVG assets. Finally it will sort these icons into folders. +There are 5 things that Icon Genie does with your original file. It will create a set of webicons for your project, it will minify those icons, it can make special icns (Mac) / ico (Windows) files for apps that need them and it will create SVG assets. Finally it will sort these icons into folders. Here is the description of these general functions that are used internally to compose icon sets and if you just want to use them, feel free: @@ -187,21 +187,21 @@ If you are indeed of a discerning nature (and have used gradients in your icon d To make these SVG's as small as possible, they are compressed with SVGO. There are no scripts or remote resources included in these SVG assets. ## CLI Usage -The Icon Factory can be used as a command line tool for batch invocation, and you can simply add it by installing it "globally" with your node package manager: +The Icon Genie can be used as a command line tool for batch invocation, and you can simply add it by installing it "globally" with your node package manager: ```bash -$ yarn global add @quasar/quasar-app-extension-icon-factory +$ yarn global add @quasar/quasar-app-extension-icon-genie - or - -$ npm install --global @quasar/quasar-app-extension-icon-factory +$ npm install --global @quasar/quasar-app-extension-icon-genie ``` To find out about the settings, just use ``` -$ iconfactory --help +$ icongenie --help -Quasar Icon Factory: v.1.0.0 +Quasar Icon Genie: v.1.0.0 License: MIT -Icon Factory is a node utility to create a batch of icons for your app. +Icon Genie is a node utility to create a batch of icons for your app. Designed to work seamlessly with the Quasar Framework, but probably useful for other build pipelines. @@ -220,8 +220,8 @@ Flags: Usage: -$ iconfactory -p=kitchensink -s=icon-1280x1280.png -t=./outputFolder -m=pngquant -$ iconfactory -p=minify -s=icon-1240x1240.png -t=./output -m=pngquant -d=singlefile +$ icongenie -p=kitchensink -s=icon-1280x1280.png -t=./outputFolder -m=pngquant +$ icongenie -p=minify -s=icon-1240x1240.png -t=./output -m=pngquant -d=singlefile ``` ## Consuming as a library @@ -274,5 +274,5 @@ You are welcome to join this project. Please file issues and make PRs! Let us kn ## Licenses - Code: MIT - © 2018: Present Daniel Thompson-Yvetot & Razvan Stoenescu -- Original Image for iconfactory: [Public Domain](https://www.publicdomainpictures.net/pictures/180000/nahled/coffee-grinder-14658946414E8.jpg) +- Original Image for icongenie: [Public Domain](https://www.publicdomainpictures.net/pictures/180000/nahled/coffee-grinder-14658946414E8.jpg) - Modifications: Daniel Thompson-Yvetot. CC-BY diff --git a/bin/cli.js b/bin/cli.js index 554a01b..dd962ac 100755 --- a/bin/cli.js +++ b/bin/cli.js @@ -21,16 +21,16 @@ const args = require('minimist')(process.argv.slice(2), { }) if (args.version) { - console.log('Quasar Icon Factory: v.' + info.version) + console.log('Quasar Icon Genie: v.' + info.version) console.log(' License: MIT') process.exit(0) } if (args.help) { - console.log('Quasar Icon Factory: v.' + info.version) + console.log('Quasar Icon Genie: v.' + info.version) console.log(' License: MIT') console.log(` -The Icon Factory is a node utility to create a batch of icons for your app. +The Icon Genie is a node utility to create a batch of icons for your app. Designed to work seamlessly with the Quasar Framework, but probably useful for other build pipelines. @@ -50,14 +50,14 @@ Flags: Usage: -$ iconfactory -p=kitchensink -s=icon-1280x1280.png -t=./outputFolder -m=pngquant -$ iconfactory -p=minify -s=icon-1240x1240.png -t=./output -m=pngquant -d=singlefile +$ icongenie -p=kitchensink -s=icon-1280x1280.png -t=./outputFolder -m=pngquant +$ icongenie -p=minify -s=icon-1240x1240.png -t=./output -m=pngquant -d=singlefile `) process.exit(0) } if (!args.preset) { - console.log('Icon Factory: v.' + info.version) + console.log('Icon Genie: v.' + info.version) console.log('You must choose a preset or declare custom.') console.log( ' -p, --preset [minify|splash|svg|favicon]\n' + @@ -67,68 +67,68 @@ if (!args.preset) { } if (!args.source) { - console.log('Icon Factory: v.' + info.version) + console.log('Icon Genie: v.' + info.version) console.log('You must provide a source file.') console.log(' -s, --source Your source image as a large square png\n') process.exit(0) } if (!fs.existsSync(args.source)) { - console.log('Icon Factory: v.' + info.version) + console.log('Icon Genie: v.' + info.version) console.log('That is not a file, provide a source image.') console.log(' -s, --source Your source image as a large square png\n') process.exit(0) } if (!args.target) { - console.log('Icon Factory: v.' + info.version) + console.log('Icon Genie: v.' + info.version) console.log('You must provide a target folder.') console.log(' -t, --target The destination directory for the files created\n') process.exit(0) } if (args.preset === 'custom' && !args.options) { - console.log('Icon Factory: v.' + info.version) + console.log('Icon Genie: v.' + info.version) console.log('You must add a file that has the options if you use custom preset') console.log(' -o, --options path to file that overrides defaults (if custom)\n') process.exit(0) } -const iconfactory = require('../lib/index.js') +const icongenie = require('../lib/index.js') switch (args.preset) { case 'minify': - iconfactory.minify(args.source, false, args.minify, args.mode) + icongenie.minify(args.source, false, args.minify, args.mode) break case 'splash': - iconfactory.splash(args.source, false, args.minify, args.mode) + icongenie.splash(args.source, false, args.minify, args.mode) break case 'svg': - iconfactory.svg(args.source, args.target) + icongenie.svg(args.source, args.target) break case 'favicon': - iconfactory.favicon(args.source, args.target) + icongenie.favicon(args.source, args.target) break case 'kitchensink': - iconfactory.kitchensink(args.source, args.target, args.minify) + icongenie.kitchensink(args.source, args.target, args.minify) break case 'spa': - iconfactory.spa(args.source, args.target, args.minify) + icongenie.spa(args.source, args.target, args.minify) break case 'pwa': - iconfactory.pwa(args.source, args.target, args.minify) + icongenie.pwa(args.source, args.target, args.minify) break case 'cordova': - iconfactory.cordova(args.source, args.target, args.minify) + icongenie.cordova(args.source, args.target, args.minify) break case 'electron': - iconfactory.electron(args.source, args.target, args.minify) + icongenie.electron(args.source, args.target, args.minify) break case 'custom': - iconfactory.custom(args.source, args.target, args.options) + icongenie.custom(args.source, args.target, args.options) break case 'validate': - iconfactory.validate(args.source, args.target) + icongenie.validate(args.source, args.target) break default: console.log('You must supply a preset') diff --git a/lib/index.js b/lib/index.js index e0990df..f344db8 100644 --- a/lib/index.js +++ b/lib/index.js @@ -6,8 +6,8 @@ * It will retain transparency and can make special file * types. You can control the settings. * - * @module icon-factory - * @exports iconfactory + * @module icon-genie + * @exports icongenie */ const { promisify } = require('util'), @@ -82,7 +82,7 @@ const checkSrc = async function (src) { const srcExists = await exists(src) if (!srcExists) { image = false - throw 'Source image for icon-factory not found' + throw 'Source image for icon-genie not found' } else { const buffer = await readChunk(src, 0, 8) if (isPng(buffer) === true) { @@ -90,7 +90,7 @@ const checkSrc = async function (src) { return (image = sharp(src)) } else { image = false - console.error('* [ERROR] Source image for icon-factory is not a png') + console.error('* [ERROR] Source image for icon-genie is not a png') // exit because this is BAD! // Developers should catch () { } this as it is // the last chance to stop bad things happening. @@ -189,7 +189,7 @@ const spinner = function () { },500) } -let iconfactory = exports.iconfactory = { +let icongenie = exports.icongenie = { validate: async function (src, target) { await validate(src, target) return typeof image === 'object' @@ -215,7 +215,7 @@ let iconfactory = exports.iconfactory = { } else { console.log('no minify strategy') } - progress('Icon Factory Finished') + progress('Icon Genie Finished') clearInterval(spinnerInterval) }, electron: async function(src, target, strategy, options) { @@ -232,7 +232,7 @@ let iconfactory = exports.iconfactory = { } else { console.log('no minify strategy') } - progress('Icon Factory Finished') + progress('Icon Genie Finished') clearInterval(spinnerInterval) }, pwa: async function(src, target, strategy, options) { @@ -251,7 +251,7 @@ let iconfactory = exports.iconfactory = { } else { console.log('no minify strategy') } - progress('Icon Factory Finished') + progress('Icon Genie Finished') clearInterval(spinnerInterval) }, spa: async function(src, target, strategy, options) { @@ -270,7 +270,7 @@ let iconfactory = exports.iconfactory = { } else { console.log('no minify strategy') } - progress('Icon Factory Finished') + progress('Icon Genie Finished') clearInterval(spinnerInterval) // await this.svgDuochrome(src, target, options) }, @@ -600,7 +600,7 @@ let iconfactory = exports.iconfactory = { if (typeof exports !== 'undefined') { if (typeof module !== 'undefined' && module.exports) { - exports = module.exports = iconfactory + exports = module.exports = icongenie } - exports.iconfactory = iconfactory + exports.icongenie = icongenie } diff --git a/package.json b/package.json index 6275c7a..b0212e6 100644 --- a/package.json +++ b/package.json @@ -1,13 +1,13 @@ { - "name": "@quasar/quasar-app-extension-icon-factory", - "version": "1.0.0-rc.6", - "description": "A Quasar CLI Extension", + "name": "@quasar/quasar-app-extension-icon-genie", + "version": "1.0.0", + "description": "A Quasar CLI Extension for Making All Your Icons", "license": "MIT", "author": "Daniel Thompson-Yvetot <35242872+nothingismagick@users.noreply.github.com>", - "repository": "git@github.com:quasarframework/app-extension-icon-factory.git", + "repository": "git@github.com:quasarframework/app-extension-icon-genie.git", "main": "src/index.js", "bin": { - "iconfactory": "./bin/cli.js" + "icongenie": "./bin/cli.js" }, "scripts": { "format": "prettier --write bin/*.js lib/*.js src/*.js test/*.js", diff --git a/src/index.js b/src/index.js index 55bb4a0..bdb4134 100644 --- a/src/index.js +++ b/src/index.js @@ -1,5 +1,5 @@ const { join } = require('path') -const iconfactory = require('../lib/index.js') +const icongenie = require('../lib/index.js') const execa = require('execa') const settings = require('../lib/settings') const { copySync, existsSync, readFileSync, writeFileSync } = require('fs-extra') @@ -122,7 +122,7 @@ Attempting to install it... } /** - * Run icon-factory + * Run icon-genie * * @param {object} api - App Extension API object */ @@ -135,7 +135,7 @@ async function run (api) { const iconSource = api.resolve.app('app-icon.png') if (api.prompts.cordova.splashscreen_type !== 'generate') { splashscreenSource = api.resolve.app('app-splashscreen.png') - splashscreenHashBasis = await computeHash(splashscreenSource, 'md5', 'icon-factory!!!') + splashscreenHashBasis = await computeHash(splashscreenSource, 'md5', 'icon-genie!!!') } else { splashscreenHashBasis = false } @@ -143,7 +143,7 @@ async function run (api) { const prevConfig = api.getPersistentConf(api)[buildMode][modeName] || {} const currentConfig = { - iconHash: await computeHash(iconSource, 'md5', 'icon-factory!!!') + iconHash: await computeHash(iconSource, 'md5', 'icon-genie!!!') } modeName === 'cordova' && Object.assign(currentConfig, { splashscreenHash: splashscreenHashBasis, @@ -176,7 +176,7 @@ async function run (api) { }) } - await iconfactory[modeName]( + await icongenie[modeName]( iconSource, target, api.prompts['minify_' + buildMode], @@ -194,7 +194,7 @@ async function run (api) { } /** - * Configuring the icon factory extension + * Configuring the icon genie extension */ module.exports = function (api) { api.compatibleWith('@quasar/app', '^1.0.0-rc.1') diff --git a/src/install.js b/src/install.js index ae96b56..c05d1db 100644 --- a/src/install.js +++ b/src/install.js @@ -1,9 +1,9 @@ const { existsSync } = require('fs') const banner = `If you like this app-extension please leave a star at: -https://github.com/quasarframework/app-extension-icon-factory/stargazers +https://github.com/quasarframework/app-extension-icon-genie/stargazers -Please consider becoming a Sponsoring development: +Please consider sponsoring the development of Quasar: https://donate.quasar.dev` module.exports = function (api) { diff --git a/src/prompts.js b/src/prompts.js index 74e3249..17356b8 100644 --- a/src/prompts.js +++ b/src/prompts.js @@ -2,7 +2,7 @@ const { validateHexRGB } = require('./utils') module.exports = function() { console.log(`PROJECT Repo and documentation: -https://github.com/quasarframework/app-extension-icon-factory +https://github.com/quasarframework/app-extension-icon-genie --------------------------- ATTENTION! -----------------------------