Vuetify 아이콘이 올바르게 표시되지 않음: "$vuetify.icons"로 표시됩니다.."

Vuetify 아이콘이 올바르게 표시되지 않음: "$vuetify.icons"로 표시됩니다.."

Vuetify의 아이콘이 제대로 표시되지 않는 문제가 있습니다.예를 들어 아래는 Vuetify 확장 패널입니다.이 질문의 vuetify 아이콘이 표시되지 않는 솔루션을 이미 시도했지만 효과가 없었습니다.아래는 쉐브론 다운 아이콘이 다음과 같이 표시되는 것을 볼 수 있습니다.$vuetify.icons.expand@mdi/font의 Import를 시도했지만 전혀 효과가 없습니다.사용하고 있는 코드는 다음과 같습니다.

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

Import 중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의 Import 방법은 올바른 것 같습니다.제대로 하지 않으면 오류를 볼 수 있습니다.

현재 매뉴얼은 https://vuetifyjs.com/en/customization/icons에 있습니다.작성 시점에서는 버전 2.1.0용입니다.Vuetify 2와 1.5에 필요한 설정을 혼동하지 않도록 주의해 주십시오.비슷한 점도 있지만 크게 다릅니다.또한 이름이 매우 유사한 글꼴이 두 개 있으며 하나는 다음을 사용하여 구성되어 있음을 확인해야 합니다.iconfont: 'mdi'와 하나가 되다iconfont: 'md'둘 다 문맥에 따라 이름에 '재료', '디자인', '아이콘'이라는 단어를 사용합니다.

조작에 의한 편집

이거 댓글로 올릴 수가 없어서 수정하려고요.결국엔 이렇게 됐죠.

// 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