Language/React

[React-Icons]사용하기

yuns94 2023. 7. 13. 14:00

리액트를 이용하여 웹페이지를 구현하는데 빠르게 아이콘을 사용하고 싶을때 react-icons를 사용할 수 있다.

 

react-icons.github.io/react-icons/

 

React Icons

React Icons Include popular icons in your React projects easily with react-icons, which utilizes ES6 imports that allows you to include only the icons that your project is using. Installation (for standard modern project) npm install react-icons --save Usa

react-icons.github.io

 

 

해당 라이브러리 설치방법

npm install react-icons --save // npm
yarn add react-icons // yarn

 

설치 후 사이트 좌측을 보면 아이콘을 검색할 수 있는 검색창과 아이콘 종류들이 있다. 

Ctrl - F 를 눌러 우너하는 아이콘 페이지 내에서 검색해서 클릭 후 사용해도 되고 

다른 아이콘들도 찾아보고 싶다면 아예 왼쪽에 검색창에서 검색해서 찾아도 된다.

 

그 복사한 아이콘을 Import로 불러와야 하는데 아이콘 종류마다 불러오는 주소가 다르다.

 

 

import { BsSearch, BsYoutube } from 'react-icons/bs';

Test