heroicons 유형별로 불러오는 방법 (solid/outline/mini/micro)

가장 많이 사용하는 아이콘 라이브러리 Heroicons

프론트엔드 개발을 하면서 가장 많이 사용하는 라이브러리 중 하나이면서, 디자이너에게도 가장 많이 사랑받는 아이콘 시스템이 horoicons 이다. 간편하게 import 해서 사용하지만 이번에는유형별로 불러오는 법을 모르는 분들을 위해 간단하게 포스팅 해보려고 합니다.

 

 

Heroicons 사이트

 

 

 

heroicons git

GitHub - tailwindlabs/heroicons: A set of free MIT-licensed high-quality SVG icons for UI development.

 

 

heroicons 실제 아이콘 확인 (서칭용)

Heroicons

 

 

 

horoicons 는 아래처럼 네가지 유형을 제공한다.

outline 

solid

mini

micro

 

 

유형은 사이트에서 확인이 가능합니다

 

 

 

 

 

---

 

 

 

 

1. React 에서 실제 사용하기 또는 Vue 에서 사용하려면 아래 명령어를 터미널에 입력해준다.

npm install @heroicons/react

 

 

 

 

2. import 시 경로를 /outline /solid 이런식으로 찾아서 불러와주면 된다.

/outline 을 불러오면 이렇게 됩니다

<MegaphoneIcon className="size-5 text-primary-700" />