Vite + Vue3 dalam Electron: Cara mengimport dan menggunakan ikon Reka Bentuk Bahan @mdi/font (atau mana-mana fon ikon lain)

Question

Saya ingin menggabungkan ikon @mdi/fon ke dalam apl saya (ia adalah apl Elektron).

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

  "devDependencies": {
    "@mdi/font": "^7.0.96",
  }

Kemudian saya mengimport css/scss dan saya mencuba beberapa kaedah berbeza:

• di main.ts 中导入：import '@mdi/font/css/materialdesignicons.css';
• di main.scss中导入为scss：@import './node_modules/@mdi/font/scss/materialdesignicons.scss';
• di base.css 中作为 css 导入：@import './node_modules/@mdi/font/css/materialdesignicons.css';

Kemudian saya menggunakan kelas css mdi-* dalam markup:

SideMenu.vue:

<template>
  <aside class="menu">
    <ul class="action-bar">
      <li class="action-item active">
        <a class="action-label icon">
          <i class="mdi-cog"></i>
        </a>
      </li>
      <li class="action-item">
        <a class="action-label icon">
          <i class="mdi-home"></i>
        </a>
      </li>
      <li class="action-item">
        <a class="action-label icon">
          <i class="mdi-content-copy"></i>
        </a>
      </li>
    </ul>
  </aside>
</template>

Apl bermula dan berjalan tetapi saya melihat ikon yang sama.

Perkara yang perlu dipertimbangkan:

• Saya tidak mahu menggunakan pendekatan komponen per-ikon (tidak faham ini), itu kerana saya tidak menggunakan "vue-material-design-icons" atau sesuatu
• Saya tidak mahu menggunakan pautan luar CDN

Answer 1

Menjawab soalan saya sendiri. Terima kasih @Duannx, penyelesaiannya sangat mudah - cuma tambah kelas mdi yang hilang:

<a class="action-label icon">
  <i class="mdi mdi-cog"></i>
</a>

Tiada yang khusus untuk vite/vue/electron :)