Skip to content
This repository has been archived by the owner on Apr 24, 2020. It is now read-only.

Commit

Permalink
feat(naming) Let out the genie!
Browse files Browse the repository at this point in the history
- this has too many changes to track.
  • Loading branch information
nothingismagick committed Jun 21, 2019
1 parent 6c94b2c commit 358ddce
Show file tree
Hide file tree
Showing 7 changed files with 70 additions and 70 deletions.
46 changes: 23 additions & 23 deletions README.md
Original file line number Diff line number Diff line change
@@ -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)

<img src="iconfactory.png" />

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

Expand All @@ -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:
Expand All @@ -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
Expand All @@ -80,18 +80,18 @@ 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
```

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.
Expand All @@ -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.
Expand All @@ -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:

Expand Down Expand Up @@ -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.
Expand All @@ -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
Expand Down Expand Up @@ -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
44 changes: 22 additions & 22 deletions bin/cli.js
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand All @@ -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' +
Expand All @@ -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')
Expand Down
22 changes: 11 additions & 11 deletions lib/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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'),
Expand Down Expand Up @@ -82,15 +82,15 @@ 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) {
// console.log('created image buffer')
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.
Expand Down Expand Up @@ -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'
Expand All @@ -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) {
Expand All @@ -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) {
Expand All @@ -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) {
Expand All @@ -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)
},
Expand Down Expand Up @@ -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
}
10 changes: 5 additions & 5 deletions package.json
Original file line number Diff line number Diff line change
@@ -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 <[email protected]>",
"repository": "[email protected]:quasarframework/app-extension-icon-factory.git",
"repository": "[email protected]: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",
Expand Down
Loading

0 comments on commit 358ddce

Please sign in to comment.