npm-icon-gen
Generate an icon files from the SVG or PNG files.
Support formats
Supported the output format of the icon are following.
Platform | Icon |
---|
Windows | app.ico or specified name. |
macOS | app.icns or specified name. |
Favicon | favicon.ico and favicon-XX.png . |
Installation
$ npm install icon-gen
Usage
SVG and PNG are automatically selected from the input
path. If the path indicates a file SVG, if it is a directory it will be a PNG folder.
SVG
SVG files are rendering to PNG file in sharp. Rendering files is output to a temporary directory of the each OS.
const icongen = require('icon-gen')
icongen('./sample.svg', './icons', { report: true })
.then((results) => {
console.log(results)
})
.catch((err) => {
console.error(err)
})
Stopped using svg2png because of its dependency on phantomjs, which is deprecated.
The quality of PNG generated from SVG will change, so if you need the previous results, use icon-gen v2.1.0
(old version).
$ npm install icon-gen@2.1.0
In the future, I may add SVG to PNG conversion by Chromium via puppeteer-core in addition to sharp.
PNG
Generate an icon files from the directory of PNG files.
const icongen = require('icon-gen')
icongen('./images', './icons', { report: true })
.then((results) => {
console.log(results)
})
.catch((err) => {
console.error(err)
})
Required PNG files is below. Favicon outputs both the ICO and PNG files (see: audreyr/favicon-cheat-sheet).
Name | Size | ICO | ICNS | Fav ICO | Fav PNG |
---|
16.png | 16x16 | ✔ | ✔ | ✔ | |
24.png | 24x24 | ✔ | | ✔ | |
32.png | 32x32 | ✔ | ✔ | ✔ | ✔ |
48.png | 48x48 | ✔ | | ✔ | |
57.png | 57x57 | | | | ✔ |
64.png | 64x64 | ✔ | ✔ | ✔ | |
72.png | 72x72 | | | | ✔ |
96.png | 96x96 | | | | ✔ |
120.png | 120x120 | | | | ✔ |
128.png | 128x128 | ✔ | ✔ | | ✔ |
144.png | 144x144 | | | | ✔ |
152.png | 152x152 | | | | ✔ |
195.png | 195x195 | | | | ✔ |
228.png | 228x228 | | | | ✔ |
256.png | 256x256 | ✔ | ✔ | | |
512.png | 512x512 | | ✔ | | |
1024.png | 1024x1024 | | ✔ | | |
To make it a special size configuration, please specify with ico
,icns
and favicon
options.
Node API
icongen
icongen is promisify function.
icongen(src, dest[, options])
Name | Type | Description |
---|
src | String | Path of the SVG file or PNG files directory that becomes the source. |
dest | String | Destination directory path. |
options | Object | see: Options. |
Options:
const options = {
report: true,
ico: {
name: 'app',
sizes: [16, 24, 32, 48, 64, 128, 256]
},
icns: {
name: 'app',
sizes: [16, 32, 64, 128, 256, 512, 1024]
},
favicon: {
name: 'favicon-',
pngSizes: [32, 57, 72, 96, 120, 128, 144, 152, 195, 228],
icoSizes: [16, 24, 32, 48, 64]
}
}
If all image options (ico
,icns
, favicon
) are omitted, all images are output with their default settings.
const options = {
report: true
}
If individual image option is omitted, default setting is used. If there is a format that you do not want to output, specify others and omit that image.
const options = {
report: true,
ico: {}
favicon: {}
}
Name | Type | Description |
---|
report | Boolean | Display the process reports. Default is false , disable a report. |
ico | Object | Output setting of ICO file. |
icns | Object | Output setting of ICNS file. |
favicon | Object | Output setting of Favicon file (PNG and ICO). |
ico
, icns
Name | Type | Default | Description |
---|
name | String | app | Name of an output file. |
sizes | Number[] | [Defaults...] | Structure of an image sizes. |
favicon
Name | Type | Default | Description |
---|
name | String | favicon- | Prefix of an output PNG files. Start with the alphabet, can use - and _ . This option is for PNG. The name of the ICO file is always favicon.ico . |
pngSizes | Number[] | [Defaults...] | Size structure of PNG files to output. |
icoSizes | Number[] | [Defaults...] | Structure of an image sizes for ICO. |
CLI
Usage: icon-gen [options]
Generate an icon from the SVG or PNG file.
If "--ico", "--icns", "--favicon" is not specified, everything is output in the standard setting.
Options:
-i, --input <Path> Path of the SVG file or PNG file directory.
-o, --output <Path> Path of the output directory.
-r, --report Display the process reports, default is disable.
--ico Output ICO file with default settings, option is "--ico-*".
--ico-name <Name> ICO file name to output.
--ico-sizes [Sizes] PNG size list to structure ICO file
--icns Output ICNS file with default settings, option is "--icns-*".
--icns-name <Name> ICO file name to output.
--icns-sizes [Sizes] PNG size list to structure ICNS file
--favicon Output Favicon files with default settings, option is "--favicon-*".
--favicon-name <Name> prefix of the PNG file. Start with the alphabet, can use "-" and "_"
--favicon-png-sizes [Sizes] Sizes of the Favicon PNG files
--favicon-ico-sizes [Sizes] PNG size list to structure Favicon ICO file
-v, --version output the version number
-h, --help output usage information
Examples:
$ icon-gen -i sample.svg -o ./dist -r
$ icon-gen -i ./images -o ./dist -r
$ icon-gen -i sample.svg -o ./dist --ico --icns
$ icon-gen -i sample.svg -o ./dist --ico --ico-name sample --ico-sizes 16,32
$ icon-gen -i sample.svg -o ./dist --icns --icns-name sample --icns-sizes 16,32
$ icon-gen -i sample.svg -o ./dist --favicon --favicon-name=favicon- --favicon-png-sizes 16,32,128 --favicon-ico-sizes 16,32
See also:
https://github.com/akabekobeko/npm-icon-gen
ChangeLog
License