アプリケーションアイコンを設定しよう
前回、Electron + Vue-cliを用いた環境構築方法についてご紹介しました。
関連記事
【デスクトップアプリ】Electron+Vueの環境構築をvue-cliのみで完結してみた【エディターいらず】
IT
Electron
Github
Mac
Node.js今回はビルド時にアプリケーションアイコンを指定する方法をご紹介します。
せっかくElectronでオリジナルデスクトップアプリケーションを作るのであれば、デフォルトのアプリケーションアイコンではなくオリジナルのアプリケーションアイコンを設定したいですよね。
vue-electron-builderを使っていれば、こちらも簡単に変えることが可能になります。
やり方
アイコンファイルを指定
アプリに指定したいアイコンファイルを用意しましょう。
形式はMacOSとWindowsで異なるので注意しましょう。
svgファイルからのアイコン画像のやり方については以前ご紹介しているので、そちらを参考にしてみてください。
関連記事
【簡単マルチアイコン作成】SVGやPNGから様々なアイコンファイルをまとめて自動生成してくれる「icon-gen」をnpmでインストールして幸せになろう【使い方】
IT
Mac
Windows
アプリケーション
カスタマイズそちらをsrc/assets/配下に格納します。
src/assets/
├── app.icns #マック用アイコンファイル
└── app.ico #Win用アイコンファイル
vue.config.jsの作成
次に、プロジェクトルートにvue.config.jsを作成しましょう。
vue-electron-builderを使うと、vue.config.jsにビルド設定を外出しして管理することが出来るようです。
今回はアプリケーションアイコンの指定のみなので以下のようにしました。
module.exports = {
pluginOptions: {
electronBuilder: {
builderOptions: {
mac: {
icon: 'src/assets/app.icns',
},win: {
icon: 'src/assets/app.ico',
},
}
}
}
}
確認
それでは実際にビルドしてみましょう。
しっかりとアプリケーションアイコンがデフォルトのものから指定したものに変わりました！
これだけでも、自分で作った感が出るのでモチベーションが上がりますよね！
終わりに
以上のように、簡単にアプリケーションアイコンの変更が出来ました。
オリジナルアプリケーションを作るのであれば、アプリケーションアイコンの設定は必須だと思うので、是非試してみてください♪