Vite + Vue3 dans Electron : Comment importer et utiliser les icônes Material Design @mdi/font (ou toute autre police d'icônes)

Question

Je souhaite regrouper les icônes @mdi/font dans mon application (c'est une application Electron).

Je l'ai installé npm i @mdi/font --save-dev :

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

Ensuite j'ai importé le css/scss et j'ai essayé différentes méthodes :

• à 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';

Ensuite, j'ai utilisé les classes mdi-* css dans le balisage :

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>

L'application démarre et s'exécute mais je vois la même icône.

Choses à considérer :

• Je ne veux pas utiliser l'approche des composants par icône (je ne comprends pas cela), c'est parce que je n'utilise pas "vue-material-design-icons" ou quelque chose du genre
• Je ne souhaite pas utiliser les liens externes de CDN

Answer 1

Je réponds à ma propre question. Merci @Duannx, la solution est très simple - ajoutez simplement la mdi classe manquante :

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

Rien de spécifique à vite/vue/electron :)