素敵なサムシングを独断と偏見で一方的に紹介するブログ(´・ω・`)

IT

【自作デスクトップアプリ】Electronにアイコンを設定する方法【Vue.js】

投稿日: 2019年9月6日
最終更新日:

スポンサーリンク

336×280




アプリケーションアイコンを設定しよう

前回、Electron + Vue-cliを用いた環境構築方法についてご紹介しました。

今回はビルド時にアプリケーションアイコンを指定する方法をご紹介します。

せっかくElectronでオリジナルデスクトップアプリケーションを作るのであれば、デフォルトのアプリケーションアイコンではなくオリジナルのアプリケーションアイコンを設定したいですよね。

vue-electron-builderを使っていれば、こちらも簡単に変えることが可能になります。

やり方

アイコンファイルを指定

アプリに指定したいアイコンファイルを用意しましょう。

形式はMacOSとWindowsで異なるので注意しましょう。

svgファイルからのアイコン画像のやり方については以前ご紹介しているので、そちらを参考にしてみてください。

そちらをsrc/assets/配下に格納します。

vue.config.jsの作成

次に、プロジェクトルートにvue.config.jsを作成しましょう。

vue-electron-builderを使うと、vue.config.jsにビルド設定を外出しして管理することが出来るようです。

今回はアプリケーションアイコンの指定のみなので以下のようにしました。

確認

それでは実際にビルドしてみましょう。

しっかりとアプリケーションアイコンがデフォルトのものから指定したものに変わりました!

これだけでも、自分で作った感が出るのでモチベーションが上がりますよね!

本日のオススメ商品

終わりに

以上のように、簡単にアプリケーションアイコンの変更が出来ました。

オリジナルアプリケーションを作るのであれば、アプリケーションアイコンの設定は必須だと思うので、是非試してみてください♪

336×280




336×280




CATEGORIES & TAGS

IT, , , , , , , , , , , ,

blogenist

Author: blogenist