본문 바로가기

프로그램 강좌

[react.js]react-icons 사용하는 방법

 

react 아이콘 사용하기

https://react-icons.netlify.com/#/ 여기 사이트로 접속하세요.

 

설치방법

yarn add react-icons 

사용방법

저는 이 중에서 IonIcon을 사용해보겠습니다.
IonIcon 중에서도 갯수 다양하죠? 저는 닫기 아이콘을 사용해보겠습니다.
ctrl+f 를 누르고 찾기를 누르면 됩니다.


import { ICON_NAME } from "react-icons/io"; //예) import { IoIosClose } from "react-icons/io"; // 맨위에서 사용하고픈 아이콘을 골라 Icon_name에 써줍니다.  ***  <IoIosClose/> //위에서 불러온 형태 그대로 사용해줍니다. 


옵션 추가

import { ICON_NAME } from "react-icons/io";  ***  <IoIosClose size="24" color="#fff"/> 

 이렇게 크기를 변형할 수도 색상도 변경할 수 있습니다. 

 

 

 

 

728x90