Electron の Vite + Vue3: マテリアル デザイン アイコン @mdi/font (またはその他のアイコン フォント) をインポートして使用する方法

Question

@mdi/font アイコンを自分のアプリ (Electron アプリです) にバンドルしたいと考えています。

npm i @mdi/font --save-dev:

をインストールしました リーリー

次に、css/scss をインポートし、いくつかの異なる方法を試しました。

import in
• main.ts: import '@mdi/font/css/materialdesignicons.css';
• main.scss に scss としてインポート: @import './node_modules/@mdi/font/scss/materialdesignicons.scss';
• base.css に CSS としてインポート: @import './node_modules/@mdi/font/css/materialdesignicons.css';

次に、マークアップで mdi-* css クラスを使用しました。

サイドメニュー.vue:

リーリー

アプリケーションが起動して実行されますが、同じアイコンが表示されます。

考慮事項:

各アイコンコンポーネントのメソッドを使用したくありません (これを理解していません)。「vue-material-design-icons」などを使用していないためです。
CDN の外部リンクを使用したくないです

Answer 1

私自身の質問に答えます。 @Duannx に感謝します。解決策は非常に簡単です。欠落している mdi クラスを追加するだけです:

リーリー

vite/vue/electron に特有のものはありません:)