Vite+React(npm)에서 Eui(ElasticUI) 사용 시 아이콘 불러오는 방법

https://eui.elastic.co/#/forms/combo-box

Elastic UI

 

 

(왼쪽) SingleMeeting.tsx (가운데) DateField.tsx (오른쪽) UserField.tsx

 

(왼쪽) DateField.tsx 파일의 달력 아이콘 오류 (오른쪽) UserField.tsx 파일의 아래 화살표 아이콘 오류

 

위에 있는 사이트에서 comboBox 태그를 사용하여 해당 이미지처럼 코드를 짰으나

아이콘을 불러오지 못하는 결과가 나온다.  

 

https://github.com/elastic/eui/tree/main/wiki/consuming-eui#failing-icon-imports

eui/wiki/consuming-eui at main · elastic/eui

구글링해서 해당 경로를 알게 되었고, 참고하여 코드에 적용시켰다.

 

상위 컴포넌트인 SingleMeeting.tsx에 해당 코드 작성

 

바로 오류없이 원하던 결과물이 출력되었다.

 

Elastic UI가 yarn에 최적화 되어있고, 해당과정이 필요 없는데

npm을 사용하니 위에 깃허브처럼 적용 시켜줘야 한다.