Значки mdi- vue отображаются дважды - PullRequest
Новая
       22

Значки mdi- vue отображаются дважды

0 голосов
/ 02 мая 2020

Я использую Значки материалов для библиотеки Vue. js, и когда я пытаюсь отобразить значок, он отображается дважды и может быть исправлен только путем удаления ::before, содержащего меньший дубликат.

(я обычно помещал бы этот код в JSFiddle, но там не может быть использована библиотека mdi- vue)

HTML

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

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

JS

import PowerIcon from 'mdi-vue/Power'

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

CSS

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

Результаты:

mdi-vue-bug

Я неправильно использую библиотеку или это просто ошибка?

1 Ответ

0 голосов
/ 02 мая 2020

Эта ошибка может появиться при параллельном использовании двух разных подходов для включения библиотеки значков дизайна материалов.

Проверьте, не ссылаются ли ваши index.html на файл css, который обрабатывает значки дизайна материалов. Что-то вроде:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">

Это происходит, например, когда вы установили Vuetify over Vue CLI или когда вы тестировали другие варианты использования значков дизайна материала.

...