投稿日：
2018年11月30日
最終更新日：
【簡単マルチアイコン作成】SVGやPNGから様々なアイコンファイルをまとめて自動生成してくれる「icon-gen」をnpmでインストールして幸せになろう【使い方】
YouTubeも見てね♪
Anker PowerCor
旅行には必須の大容量モバイルバッテリー！
[ノースフェイス] THE NORTH FACE メンズ アウター マウンテンライトジャケット
防水暴風で耐久性抜群なので旅行で大活躍です！
ペヤング ソースやきそば 120g×18個
とりあえず保存食として買っておけば間違いなし！
レッドブル エナジードリンク 250ml×24本
翼を授けよう！
Bauhutte ( バウヒュッテ ) 昇降式 L字デスク ブラック BHD-670H-BK
メインデスクの横に置くのにぴったりなおしゃれな可動式ラック！
BANDAI SPIRITS ULTIMAGEAR 遊戯王 千年パズル 1/1スケール
もう一人の僕を呼び覚ませ！！
サンディスク microSD 128GB
スマホからSwitchまで使える大容量MicroSDカード！
目次
アイコン画像を作りたい
レトロなやり方はやめたい
Webサイト制作をしていると、ほぼ100%の確率でfaviconを作成することになると思うのですが、このfaviconの作成方法について、以外と確立されていないのが現状です。
イラストレーターで作ったり、無料のWebツールで作成したりと手段は様々ありますが、画質が荒くなったりサイズごとの画像を用意しないといけなかったり課題がたくさんです。
Electronでもアイコン画像が必要
最近のデスクトップアプリの開発でよく使われているElectronでも、アプリアイコンが必要となっています。
Electron自体はマルチプラットフォームのアプリなのでWindowsでもMacでも動くのですが、それぞれ別のアイコンファイルを作成する必要があり、これもそれぞれ作らないといけないのが手間ですね。orz
npmのicon-genを使えば一発でまとめて作成
そんなあなたにオススメなのが、icon-genです！
こちらを使えば、コマンドベースで単一の画像ファイルからサクッと様々な形式のアイコン画像をまとめて作ることが出来ます。
マルチアイコンにも対応
さらに、このicon-genの強みとして、マルチアイコンの作成にも対応している点が挙げられます。
一つのSVGからコマンド一発でWindows/mac/ホームページのそれぞれのマルチアイコンを生成出来るのは最強すぎませんかね？！
手順
インストール
まずは今回使うicon-genを以下のコマンドでインストールしましょう。
|
1 |
npm install icon-gen
|
以下のように依存パッケージ含めインストールが完了します。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
|
└─┬ icon-gen@2.0.0
├─┬ del@3.0.0
│ ├─┬ globby@6.1.0
│ │ ├─┬ array-union@1.0.2
│ │ │ └── array-uniq@1.0.3
│ │ ├─┬ glob@7.1.3
│ │ │ ├── fs.realpath@1.0.0
│ │ │ ├─┬ inflight@1.0.6
│ │ │ │ └── wrappy@1.0.2
│ │ │ ├── inherits@2.0.3
│ │ │ ├─┬ minimatch@3.0.4
│ │ │ │ └─┬ brace-expansion@1.1.11
│ │ │ │ ├── balanced-match@1.0.0
│ │ │ │ └── concat-map@0.0.1
│ │ │ ├── once@1.4.0
│ │ │ └── path-is-absolute@1.0.1
│ │ ├── object-assign@4.1.1
│ │ ├── pify@2.3.0
│ │ └─┬ pinkie-promise@2.0.1
│ │ └── pinkie@2.0.4
│ ├── is-path-cwd@1.0.0
│ ├─┬ is-path-in-cwd@1.0.1
│ │ └─┬ is-path-inside@1.0.1
│ │ └── path-is-inside@1.0.2
│ ├── p-map@1.2.0
│ ├── pify@3.0.0
│ └── rimraf@2.6.2
├─┬ mkdirp@0.5.1
│ └── minimist@0.0.8
├── pngjs-nozlib@1.0.0
├─┬ svg2png@4.1.1
│ ├── file-url@2.0.2
│ ├─┬ phantomjs-prebuilt@2.1.16
│ │ ├── es6-promise@4.2.5
│ │ ├─┬ extract-zip@1.6.7
│ │ │ ├─┬ concat-stream@1.6.2
│ │ │ │ ├── buffer-from@1.1.1
│ │ │ │ ├─┬ readable-stream@2.3.6
│ │ │ │ │ ├── core-util-is@1.0.2
│ │ │ │ │ ├── isarray@1.0.0
│ │ │ │ │ ├── process-nextick-args@2.0.0
│ │ │ │ │ ├── string_decoder@1.1.1
│ │ │ │ │ └── util-deprecate@1.0.2
│ │ │ │ └── typedarray@0.0.6
│ │ │ ├─┬ debug@2.6.9
│ │ │ │ └── ms@2.0.0
│ │ │ └─┬ yauzl@2.4.1
│ │ │ └─┬ fd-slicer@1.0.1
│ │ │ └── pend@1.2.0
│ │ ├─┬ fs-extra@1.0.0
│ │ │ ├── graceful-fs@4.1.15
│ │ │ ├── jsonfile@2.4.0
│ │ │ └── klaw@1.3.1
│ │ ├─┬ hasha@2.2.0
│ │ │ └── is-stream@1.1.0
│ │ ├── kew@0.7.0
│ │ ├── progress@1.1.8
│ │ ├─┬ request@2.88.0
│ │ │ ├── aws-sign2@0.7.0
│ │ │ ├── aws4@1.8.0
│ │ │ ├── caseless@0.12.0
│ │ │ ├─┬ combined-stream@1.0.7
│ │ │ │ └── delayed-stream@1.0.0
│ │ │ ├── extend@3.0.2
│ │ │ ├── forever-agent@0.6.1
│ │ │ ├─┬ form-data@2.3.3
│ │ │ │ └── asynckit@0.4.0
│ │ │ ├─┬ har-validator@5.1.3
│ │ │ │ ├─┬ ajv@6.6.1
│ │ │ │ │ ├── fast-deep-equal@2.0.1
│ │ │ │ │ ├── fast-json-stable-stringify@2.0.0
│ │ │ │ │ ├── json-schema-traverse@0.4.1
│ │ │ │ │ └─┬ uri-js@4.2.2
│ │ │ │ │ └── punycode@2.1.1
│ │ │ │ └── har-schema@2.0.0
│ │ │ ├─┬ http-signature@1.2.0
│ │ │ │ ├── assert-plus@1.0.0
│ │ │ │ ├─┬ jsprim@1.4.1
│ │ │ │ │ ├── extsprintf@1.3.0
│ │ │ │ │ ├── json-schema@0.2.3
│ │ │ │ │ └── verror@1.10.0
│ │ │ │ └─┬ sshpk@1.15.2
│ │ │ │ ├── asn1@0.2.4
│ │ │ │ ├── bcrypt-pbkdf@1.0.2
│ │ │ │ ├── dashdash@1.14.1
│ │ │ │ ├── ecc-jsbn@0.1.2
│ │ │ │ ├── getpass@0.1.7
│ │ │ │ ├── jsbn@0.1.1
│ │ │ │ ├── safer-buffer@2.1.2
│ │ │ │ └── tweetnacl@0.14.5
│ │ │ ├── is-typedarray@1.0.0
│ │ │ ├── isstream@0.1.2
│ │ │ ├── json-stringify-safe@5.0.1
│ │ │ ├─┬ mime-types@2.1.21
│ │ │ │ └── mime-db@1.37.0
│ │ │ ├── oauth-sign@0.9.0
│ │ │ ├── performance-now@2.1.0
│ │ │ ├── qs@6.5.2
│ │ │ ├── safe-buffer@5.1.2
│ │ │ ├─┬ tough-cookie@2.4.3
│ │ │ │ ├── psl@1.1.29
│ │ │ │ └── punycode@1.4.1
│ │ │ └── tunnel-agent@0.6.0
│ │ ├─┬ request-progress@2.0.1
│ │ │ └── throttleit@1.0.0
│ │ └─┬ which@1.3.1
│ │ └── isexe@2.0.0
│ ├── pn@1.1.0
│ └─┬ yargs@6.6.0
│ ├── camelcase@3.0.0
│ ├─┬ cliui@3.2.0
│ │ ├─┬ strip-ansi@3.0.1
│ │ │ └── ansi-regex@2.1.1
│ │ └── wrap-ansi@2.1.0
│ ├── decamelize@1.2.0
│ ├── get-caller-file@1.0.3
│ ├─┬ os-locale@1.4.0
│ │ └─┬ lcid@1.0.0
│ │ └── invert-kv@1.0.0
│ ├─┬ read-pkg-up@1.0.1
│ │ ├─┬ find-up@1.1.2
│ │ │ └── path-exists@2.1.0
│ │ └─┬ read-pkg@1.1.0
│ │ ├─┬ load-json-file@1.1.0
│ │ │ ├─┬ parse-json@2.2.0
│ │ │ │ └─┬ error-ex@1.3.2
│ │ │ │ └── is-arrayish@0.2.1
│ │ │ ├── pify@2.3.0
│ │ │ └─┬ strip-bom@2.0.0
│ │ │ └── is-utf8@0.2.1
│ │ ├─┬ normalize-package-data@2.4.0
│ │ │ ├── hosted-git-info@2.7.1
│ │ │ ├─┬ is-builtin-module@1.0.0
│ │ │ │ └── builtin-modules@1.1.1
│ │ │ ├── semver@5.6.0
│ │ │ └─┬ validate-npm-package-license@3.0.4
│ │ │ ├─┬ spdx-correct@3.0.2
│ │ │ │ └── spdx-license-ids@3.0.2
│ │ │ └─┬ spdx-expression-parse@3.0.0
│ │ │ └── spdx-exceptions@2.2.0
│ │ └─┬ path-type@1.1.0
│ │ └── pify@2.3.0
│ ├── require-directory@2.1.1
│ ├── require-main-filename@1.0.1
│ ├── set-blocking@2.0.0
│ ├─┬ string-width@1.0.2
│ │ ├── code-point-at@1.1.0
│ │ └─┬ is-fullwidth-code-point@1.0.0
│ │ └── number-is-nan@1.0.1
│ ├── which-module@1.0.0
│ ├── y18n@3.2.1
│ └── yargs-parser@4.2.1
└── uuid@3.3.2
|
次に、以下のコマンドでpackage.jsonを作成しましょう。
対話は基本空欄でいいのでエンター連打でOKです。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
|
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.
See `npm help json` for definitive documentation on these fields
and exactly what they do.
Use `npm install <pkg> --save` afterwards to install a package and
save it as a dependency in the package.json file.
Press ^C at any time to quit.
name: (icon-gen)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to /Users/blogenist/tmp/work/javaScript/npm/icon-gen/package.json:
{
"name": "icon-gen",
"version": "1.0.0",
"description": "",
"main": "index.js",
"dependencies": {
"icon-gen": "^2.0.0"
},
"devDependencies": {},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
Is this ok? (yes) yes
|
すると、以下のようにpackage.jsonが生成されます。
|
1
2
3
|
.
├── node_modules # 省略
└── package.json
|
package.jsonの中身はこんな感じ。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
{
"name": "icon-gen",
"version": "1.0.0",
"description": "",
"main": "script.js",
"dependencies": {
"icon-gen": "^2.0.0"
},
"devDependencies": {},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
|
スクリプトの準備
では、実際にicon-genを使うスクリプトを用意しましょう。
今回は同階層にあるblogenist_icon.svgと言うsvg画像から生成してみます。
まずは、script.jsと言うファイルを用意して以下の内容をコーディングしてください。
※${XXX}は適時変えてください
|
1
2
3
4
5
6
7
8
9
|
const icongen = require('icon-gen');
icongen('${iconにしたいファイル}', '${出力先ディレクトリ}', { report: true })
.then((results) => {
console.log(results)
})
.catch((err) => {
console.error(err)
});
|
出力先ディレクトリの作成
ここで指定したディレクトリが存在しない場合は自動生成されないため、エラーが発生するので存在するディレクトリを指定する必要があります。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
> icon-gen@1.0.0 start /Users/blogenist/tmp/work/javaScript/npm/icon-gen
> node script.js
Error: Output directory is not found.
at GenerateIcon (/Users/blogenist/tmp/work/javaScript/npm/icon-gen/node_modules/icon-gen/dist/lib/icon-generator.js:209:27)
at Object.<anonymous> (/Users/blogenist/tmp/work/javaScript/npm/icon-gen/script.js:3:1)
at Module._compile (module.js:570:32)
at Object.Module._extensions..js (module.js:579:10)
at Module.load (module.js:487:32)
at tryModuleLoad (module.js:446:12)
at Function.Module._load (module.js:438:3)
at Module.runMain (module.js:604:10)
at run (bootstrap_node.js:394:7)
at startup (bootstrap_node.js:149:9)
|
package.jsonに起動スクリプトの追加
次に、package.jsonに起動スクリプトを定義します。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
{
"name": "icon-gen",
"version": "1.0.0",
"description": "",
"main": "script.js",
"dependencies": {
"icon-gen": "^2.0.0"
},
"devDependencies": {},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1", // Json形式なのでカンマ(,)をお忘れなく
"start": "node script.js" // 追加
},
"author": "",
"license": "ISC"
}
|
実行
では、実際に以下のコマンドで実行をしてみましょう。
|
1 |
npm run start
|
すると、以下のようなログが出始めて処理が開始されます。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
|
> icon-gen@1.0.0 start /Users/blogenist/tmp/work/javaScript/npm/icon-gen
> node script.js
Icon generator from SVG:
src: /Users/blogenist/tmp/work/javaScript/npm/icon-gen/blogenist_icon.svg
dir: /Users/blogenist/tmp/work/javaScript/npm/icon-gen/icons
SVG to PNG:
Create: /var/folders/qs/XXX/T/YYY/16.png
Create: /var/folders/qs/XXX/T/YYY/24.png
Create: /var/folders/qs/XXX/T/YYY/32.png
Create: /var/folders/qs/XXX/T/YYY/48.png
Create: /var/folders/qs/XXX/T/YYY/57.png
Create: /var/folders/qs/XXX/T/YYY/64.png
Create: /var/folders/qs/XXX/T/YYY/72.png
Create: /var/folders/qs/XXX/T/YYY/96.png
Create: /var/folders/qs/XXX/T/YYY/120.png
Create: /var/folders/qs/XXX/T/YYY/128.png
Create: /var/folders/qs/XXX/T/YYY/144.png
Create: /var/folders/qs/XXX/T/YYY/152.png
Create: /var/folders/qs/XXX/T/YYY/195.png
Create: /var/folders/qs/XXX/T/YYY/228.png
Create: /var/folders/qs/XXX/T/YYY/256.png
Create: /var/folders/qs/XXX/T/YYY/512.png
Create: /var/folders/qs/XXX/T/YYY/1024.png
ICNS:
Create: /Users/blogenist/tmp/work/javaScript/npm/icon-gen/icons/app.icns
ICO:
Create: /Users/blogenist/tmp/work/javaScript/npm/icon-gen/icons/app.ico
ICO:
Create: /Users/blogenist/tmp/work/javaScript/npm/icon-gen/icons/favicon.ico
Favicon:
Create: /Users/blogenist/tmp/work/javaScript/npm/icon-gen/icons/favicon-32.png
Create: /Users/blogenist/tmp/work/javaScript/npm/icon-gen/icons/favicon-57.png
Create: /Users/blogenist/tmp/work/javaScript/npm/icon-gen/icons/favicon-72.png
Create: /Users/blogenist/tmp/work/javaScript/npm/icon-gen/icons/favicon-96.png
Create: /Users/blogenist/tmp/work/javaScript/npm/icon-gen/icons/favicon-120.png
Create: /Users/blogenist/tmp/work/javaScript/npm/icon-gen/icons/favicon-128.png
Create: /Users/blogenist/tmp/work/javaScript/npm/icon-gen/icons/favicon-144.png
Create: /Users/blogenist/tmp/work/javaScript/npm/icon-gen/icons/favicon-152.png
Create: /Users/blogenist/tmp/work/javaScript/npm/icon-gen/icons/favicon-195.png
Create: /Users/blogenist/tmp/work/javaScript/npm/icon-gen/icons/favicon-228.png
[ '/Users/blogenist/tmp/work/javaScript/npm/icon-gen/icons/app.icns',
'/Users/blogenist/tmp/work/javaScript/npm/icon-gen/icons/app.ico',
'/Users/blogenist/tmp/work/javaScript/npm/icon-gen/icons/favicon.ico',
'/Users/blogenist/tmp/work/javaScript/npm/icon-gen/icons/favicon-32.png',
'/Users/blogenist/tmp/work/javaScript/npm/icon-gen/icons/favicon-57.png',
'/Users/blogenist/tmp/work/javaScript/npm/icon-gen/icons/favicon-72.png',
'/Users/blogenist/tmp/work/javaScript/npm/icon-gen/icons/favicon-96.png',
'/Users/blogenist/tmp/work/javaScript/npm/icon-gen/icons/favicon-120.png',
'/Users/blogenist/tmp/work/javaScript/npm/icon-gen/icons/favicon-128.png',
'/Users/blogenist/tmp/work/javaScript/npm/icon-gen/icons/favicon-144.png',
'/Users/blogenist/tmp/work/javaScript/npm/icon-gen/icons/favicon-152.png',
'/Users/blogenist/tmp/work/javaScript/npm/icon-gen/icons/favicon-195.png',
'/Users/blogenist/tmp/work/javaScript/npm/icon-gen/icons/favicon-228.png' ]
|
確認
iconsディレクトリの中を見ると一通りのアイコンファイルが生成されています。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
icons
├── app.icns
├── app.ico
├── favicon-120.png
├── favicon-128.png
├── favicon-144.png
├── favicon-152.png
├── favicon-195.png
├── favicon-228.png
├── favicon-32.png
├── favicon-57.png
├── favicon-72.png
├── favicon-96.png
└── favicon.ico
|
マルチアイコンにもしっかりなっていますね♪
終わりに
以上のように簡単にSVG画像から各種アイコン画像を生成することが出来ました。
もちろん、SVGだけでなくPNGからの生成も出来ますし、様々なオプションが備わっているので是非試してみてください♪