Vite + Vue3 dans Electron : Comment importer et utiliser les icônes Material Design @mdi/font (ou toute autre police d'icônes)
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
