Electron 中的 Vite + Vue3:如何匯入並使用 Material Design 圖示 @mdi/font(或任何其他圖示字體)
P粉404539732
P粉404539732 2023-11-02 18:43:57
0
1
908

我想將 @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 的外部連結


P粉404539732
P粉404539732

全部回覆(1)
P粉648469285

回答我自己的問題。感謝 @Duannx,解決方案非常簡單 - 只需添加缺少的 mdi 類別:

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

沒有任何特定於 vite/vue/electron 的內容:)

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板