Vue 3는 Props를 기반으로 동적으로 가져옵니다.

Question

아이콘 구성요소를 생성하기 위해 unplugin-icon을 사용하고 있습니다. 일반적으로 예를 들어 가져올 수 있습니다. 으아악

작동은 되지만 다른 아이콘을 사용하려면 하나씩 불러오기가 불편해서 Eunoicon.vue라는 동적 컴포넌트를 만들었습니다

으아악

하지만 컴포넌트로 가져오려고 하면 오류가 발생합니다

이 접근 방식에 대한 제안 사항이나 간단한 접근 방식을 제공하는 아이콘 라이브러리가 있습니까? Vue Font Awesome을 사용해 보았지만 여전히 원하는 만큼 간단하지 않습니다. Uncaught (in Promise) TypeError: 无法解析模块说明符 '~icons/prime/copy'.

Answer 1

안타깝게도 현재는 동적으로 가져오기를 생성할 수 없습니다. 몇 달 전에도 같은 문제가 발생했습니다. 내 해결책은 아이콘을 SVG로 처리하고 다음과 같이 내 프로젝트에 첨부된 가져오기 파일을 만드는 것이었습니다.

으아악

그리고 props를 사용하여 아래와 같이 뷰 구성 요소를 생성하면 이 구성 요소는 주어진 이름에 해당하는 아이콘을 검색합니다.

으아악 으아악

물론 가져오기 파일을 수동으로 생성하는 것은 번거로울 수 있으므로 제 경우에는 SVG 아이콘 폴더의 경로를 사용하고 각 아이콘을 처리하여 축소하고 가져오기 파일을 자동으로 생성하는 Python 스크립트를 만들었습니다. 이 스크립트는 Phosphor Icon Library의 아이콘과 함께 작동합니다. github 저장소에서 스크립트 및 Vue 구성 요소에 대한 코드를 찾을 수 있습니다:

https://github.com/fchancel/Phosphor-icon-vue-comComponent

인광체 아이콘을 사용하기로 결정했다면 주저하지 말고 영감을 받아 수정하거나 사용하세요