Vite + Vue3电子:如何导入和使用材料设计图标@mdi/字体(或任何其他图标字体)
Vite + Vue3电子:如何导入和使用材料设计图标@mdi/字体(或任何其他图标字体)
提问于 2022-10-03 15:34:41
我想将@mdi/字体图标绑定到我的应用程序中(它是一个电子应用程序)。
我安装了npm i @mdi/font --save-dev
"devDependencies": {
"@mdi/font": "^7.0.96",
}然后我导入了css/scss，我尝试了几种不同的方法：
import '@mdi/font/css/materialdesignicons.css';
- import中的
- 导入：
main.scss中的scss：@import './node_modules/@mdi/font/scss/materialdesignicons.scss'; - import作为
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-物料-设计-图标”之类的
- ，我不想使用到CDN
的外部链接。
回答 1
Stack Overflow用户
回答已采纳
发布于 2022-10-07 12:14:44
回答我自己的问题。多亏了@Duannx，解决方案非常简单--只需添加缺少的mdi类：
<a class="action-label icon">
<i class="mdi mdi-cog"></i>
</a>没有任何特定于vite/vue/ to :)
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/73937668
复制相关文章
相似问题
腾讯云开发者
