Vite + Vue3 in Electron: So importieren und verwenden Sie Material Design-Symbole @mdi/font (oder eine andere Symbolschriftart)

Question

Ich möchte @mdi/font-Symbole in meine App bündeln (es ist eine Electron-App).

Ich habe es installiert npm i @mdi/font --save-dev:

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

Dann habe ich das CSS/SCSS importiert und ein paar verschiedene Methoden ausprobiert:

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

Dann habe ich mdi-* CSS-Klassen im Markup verwendet:

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>

Die App startet und läuft, aber ich sehe das gleiche Symbol.

Dinge, die Sie beachten sollten:

• Ich möchte nicht den Pro-Icon-Komponenten-Ansatz verwenden (ich verstehe das nicht), weil ich keine „vue-material-design-icons“ oder so etwas verwende
• Ich möchte die externen Links von CDN nicht verwenden

Answer 1

回答我自己的问题。感谢@Duannx，解决方案非常简单 - 只需添加缺少的 mdi 类：

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

没有任何特定于 vite/vue/electron 的内容:)