mdi-vue图标显示两次

qij5mzcb 于 2023-06-06 发布在 Vue.js

关注(0)|答案(2)|浏览(283)

我正在使用Material Design Icons for Vue.js库，当我试图显示一个图标时，它显示了两次，只能通过删除包含较小副本的::before来修复。
（我通常会将这些代码放在JSFiddle中，但在那里不能使用mdi-vue库）
HTML

<div id="app">
  <PowerIcon />

  <div class='fixed'>
    <PowerIcon />
  </div>
</div>

import PowerIcon from 'mdi-vue/Power'

new Vue({
  el: "#app",
  components: {
    PowerIcon
  }
})

CSS

.fixed .mdi-power::before {
  display: none;
}

结果：

是我使用库不正确还是这只是一个bug？

vue.js

来源：https://stackoverflow.com/questions/61552565/mdi-vue-icons-display-twice

2条答案

按热度按时间

roejwanj1#

当并行使用两种不同的方法来包含Material Design图标库时，可能会出现此错误。
检查你的index.html是否链接到一个处理材质设计图标的css文件。类似于：
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
例如，当您安装Vuetify over Vue CLI或测试使用Material Design图标的其他选项时，就会发生这种情况。

赞(0）回复(0）举报 2023-06-06

zpf6vheq2#

从我的调查，如Uchendu已经回答，这是CSS影响的图标。我看到：：before除了SVG之外还有图标作为内容。我制定了一个全局CSS规则

*[class*="mdi-"]::before {
  content: none;
}

这颠倒了材质设计CSS，现在只显示一个图标

赞(0）回复(0）举报 2023-06-06

我来回答

mdi-vue图标显示两次

2条答案

相关问题

热门标签

最新问答