React Icons 사용해서 간편하게 아이콘 추가하기

 

참고자료 및 문서

https://react-icons.github.io/react-icons

 

React Icons

 

 

 

터미널에서 리액트 아이콘 추가하기

 

//npm 사용
npm install react-icons --save

//yarn 사용
yarn add react-icons

 

 

 

 

성공적으로 추가되면 이렇게 됩니다.

package.json에서 dependencies로 가면 추가된 버전까지 확인할 수 있습니다.

 

 

 

 

 

 

 

이제 마음에 드는 아이콘을 사이트에서 찾아봅니다.

 

 

 

 

cancel 아이콘을 검색해서 마음에 드는 아이콘을 선택하면

 

 

 

자동으로 복사가 됩니다.

 

사용할 때는 이렇게 손쉽게 붙여넣기 해서 사용하면 되고

 

 

임포트 하는 건 절대 잊지 말아야 겠죠!

임포트할 때 주의할 것은 react-icons 다음에

어디서 아이콘을 가져오는지 꼭 써줘야 한다는거!

ImCancelCircle을 사용한다면 im이라고 써줘야 합니다.

 

 

 

위와 같이 화면에 나타난 리액트 cancel 아이콘을 볼 수 있습니다!

 

 

더 자세히 알고 싶다면 아래 링크에서 참고해주세요!

https://github.com/react-icons/react-icons

 

GitHub - react-icons/react-icons: svg react icons of popular icon packs