投稿日：
2019年9月6日
最終更新日：
【自作デスクトップアプリ】Electronにアイコンを設定する方法【Vue.js】
YouTubeも見てね♪
Anker PowerCor
旅行には必須の大容量モバイルバッテリー！
[ノースフェイス] THE NORTH FACE メンズ アウター マウンテンライトジャケット
防水暴風で耐久性抜群なので旅行で大活躍です！
レッドブル エナジードリンク 250ml×24本
翼を授けよう！
モンスターエナジー 355ml×24本 [エナジードリンク]
脳を活性化させるにはこれ！
ドラゴンクエスト メタリックモンスターズギャラリー メタルキング
みんな大好き経験値の塊をデスクに常備しておこう！
Bauhutte ( バウヒュッテ ) 昇降式 L字デスク ブラック BHD-670H-BK
メインデスクの横に置くのにぴったりなおしゃれな可動式ラック！
サンディスク microSD 128GB
スマホからSwitchまで使える大容量MicroSDカード！
アプリケーションアイコンを設定しよう
前回、Electron + Vue-cliを用いた環境構築方法についてご紹介しました。
今回はビルド時にアプリケーションアイコンを指定する方法をご紹介します。
せっかくElectronでオリジナルデスクトップアプリケーションを作るのであれば、デフォルトのアプリケーションアイコンではなくオリジナルのアプリケーションアイコンを設定したいですよね。
vue-electron-builderを使っていれば、こちらも簡単に変えることが可能になります。
やり方
アイコンファイルを指定
アプリに指定したいアイコンファイルを用意しましょう。
形式はMacOSとWindowsで異なるので注意しましょう。
svgファイルからのアイコン画像のやり方については以前ご紹介しているので、そちらを参考にしてみてください。
そちらをsrc/assets/配下に格納します。
|
1
2
3
|
src/assets/
├── app.icns #マック用アイコンファイル
└── app.ico #Win用アイコンファイル
|
vue.config.jsの作成
次に、プロジェクトルートにvue.config.jsを作成しましょう。
vue-electron-builderを使うと、vue.config.jsにビルド設定を外出しして管理することが出来るようです。
今回はアプリケーションアイコンの指定のみなので以下のようにしました。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
module.exports = {
pluginOptions: {
electronBuilder: {
builderOptions: {
mac: {
icon: 'src/assets/app.icns',
},win: {
icon: 'src/assets/app.ico',
},
}
}
}
}
|
確認
それでは実際にビルドしてみましょう。
しっかりとアプリケーションアイコンがデフォルトのものから指定したものに変わりました！
これだけでも、自分で作った感が出るのでモチベーションが上がりますよね！
終わりに
以上のように、簡単にアプリケーションアイコンの変更が出来ました。
オリジナルアプリケーションを作るのであれば、アプリケーションアイコンの設定は必須だと思うので、是非試してみてください♪