Electron 中的 Vite + Vue3：如何导入和使用 Material Design 图标 @mdi/font（或任何其他图标字体）

Question

我想将 @mdi/font 图标捆绑到我的应用程序中（它是一个 Electron 应用程序）。

我安装了 npm i @mdi/font --save-dev:

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

然后我导入了css/scss，我尝试了几种不同的方法：

• 在 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 类：

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>

应用程序启动并运行，但我看到相同的图标。

需要考虑的事项：

• 我不想使用每个图标组件的方法（不明白这一点），那是因为我不使用“vue-material-design-icons”之类
• 我不想使用 CDN 的外部链接

Answer 1

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

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

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