Electron의 Vite + Vue3: 머티리얼 디자인 아이콘 @mdi/font(또는 기타 아이콘 글꼴)을 가져오고 사용하는 방법

Question

@mdi/font 아이콘을 내 앱(Electron 앱)에 번들로 묶고 싶습니다.

설치했습니다 npm i @mdi/font --save-dev:

으아악

그런 다음 CSS/scss를 가져오고 몇 가지 다른 방법을 시도했습니다.

• 에서 main.ts 中导入：import '@mdi/font/css/materialdesignicons.css';
• 에서 main.scss中导入为scss：@import './node_modules/@mdi/font/scss/materialdesignicons.scss';
• 에서 base.css 中作为 css 导入：@import './node_modules/@mdi/font/css/materialdesignicons.css';

그런 다음 마크업에 mdi-* CSS 클래스를 사용했습니다.

SideMenu.vue:

으아악

앱이 시작되고 실행되는데 동일한 아이콘이 표시됩니다.

고려 사항:

• 저는 아이콘별 구성 요소 접근 방식을 사용하고 싶지 않습니다(이해가 안 되네요). 그 이유는 "vue-material-design-icons" 또는 이와 유사한 것을 사용하지 않기 때문입니다
• CDN의 외부 링크를 사용하고 싶지 않습니다

Answer 1

내 질문에 답합니다. @Duannx에게 감사드립니다. 해결책은 매우 간단합니다. 누락된 mdi 클래스를 추가하세요.

으아악

vite/vue/electron에 특정한 것은 없습니다 :)