뷰에티파이 아이콘이 올바르게 표시되지 않음: "$vuetify.icons...."

뷰에티파이 아이콘이 올바르게 표시되지 않음: "$vuetify.icons...."

나는 Vuetify의 아이콘이 제대로 표시되지 않는 문제에 직면해 있다. 예를 들어, 아래는 Vuetify 확장 패널이다.나는 이미 이 물음표 아이콘의 해결책이 보이지 않는 것을 시도해 보았지만, 내게는 효과가 없었다.아래에는 쉐브론다운 아이콘이 다음과 같이 표시되는 것을 볼 수 있다.$vuetify.icons.expand. 나에게 아무런 도움이 되지 않는 @mdi/font를 모두 수입해 보았다...내가 사용하는 코드는 다음과 같다.

import Vue from 'vue'
import Vuetify from 'vuetify';
import 'vuetify/dist/vuetify.min.css'
// import 'material-design-icons-iconfont/dist/material-design-icons.css'
import '@mdi/font/css/materialdesignicons.css'

Vue.use(Vuetify, {
    icons: {
        iconfont: 'mdi'
    }
});

//expansion panels

가져오는 중material-design-icons-iconfont/dist/material-design-icons.css는 아이콘을 이상한 아이콘으로 바꾼다.

무엇이 문제일 수 있고 내가 다른 어떤 것을 시도할 수 있는지 알려줘!

당신이 Vuetify 2를 사용한다고 가정하면...

여기서 설명한 대로 Vuetify를 Vue 생성자에게 전달하는 것이 핵심이라고 생각한다.

https://vuetifyjs.com/en/getting-started/quick-start#bootstrapping-the-vuetify-object

다음과 같은 경우:

new Vue({
  vuetify: new Vuetify(),
  // ... all the other stuff you're currently passing

글꼴을 구성하려면 에 해당 글꼴을 전달하십시오.Vuetify아닌 시공자Vue.use예:

const vuetify = new Vuetify({
  icons: {
    iconfont: 'mdi'
  }
})

new Vue({
  vuetify,
  // ... all the other stuff you're currently passing

mdi설정된 기본 아이콘이므로 해당 글꼴을 사용하려면 이 작업을 수행하지 마십시오.

CSS를 가져오는 방법은 올바른 것으로 보인다.그렇게 제대로 하지 않았다면 너는 실수를 하고 있어야 한다.

현재 문서는 다음과 같다: https://vuetifyjs.com/en/customization/icons.글을 쓸 때 그것은 버전 2.1.0을 위한 것이다.Vuetify 2에 필요한 구성을 1.5와 혼동하지 않도록 주의하십시오. 이러한 구성은 일부 유사성에도 불구하고 상당히 다르다.또한 매우 유사한 이름을 가진 두 개의 글꼴이 있으며, 하나는 다음을 사용하여 구성됨을 알아야 한다.iconfont: 'mdi'와 한 사람iconfont: 'md'. 둘 다 문맥에 따라 이름에 '재료', '디자인', '아이콘'이라는 단어를 사용한다.

OP로 편집

이걸 댓글로 달 수가 없어서 정답을 수정해야겠다고 생각했어.이것이 결국 나를 위해 작용하게 된 것이다.

// src/plugins/vuetify.ts

import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css';
import '@mdi/font/css/materialdesignicons.css'

Vue.use(Vuetify);

const vuetify = new Vuetify({
    icons: {
        iconfont: 'mdi'
    }
});

export default vuetify

그런 다음 Vue를 사용하는 다른 파일에서:

// other_file.ts

import vuetify from './plugins/vuetify';

new Vue({
    vuetify,
    // ...other stuff...
})

참조URL: https://stackoverflow.com/questions/58189596/vuetify-icons-not-showing-correctly-they-appear-as-as-vuetify-icons