(React) 아이콘 사용하기 (상세 설명)

웹/(React)리액트

공부가싫다가도좋아 2021. 8. 26. 23:40

리액트에서 수많은 아이콘들을 제공해 주고 있습니다.

쓰는 방법도 매우 쉬워요~~ :)

포스팅 요약

1.react-icons 사이트에서 아이콘 고르기

사이트 접속: https://react-icons.github.io/react-icons

사이트 접속 후, 왼쪽박스에서 원하는 카테고리를 클릭하여 들어간다.

원하는 아이콘을 고르고, 아이콘 이름을 복사(혹은 기억)합니다.

(* 아이콘 모양을 클릭하면 자동 복사됩니다!!)

(* 저는 복사가 안되서 그냥 대충 기억해 놓습니다. < import해야 되기 때문에 이름 기억 필요!!)

프로젝트를 진행할 파일을 코드편집기로 열어준 뒤, 터미널창을 열읍니다.

Mac OS터미널창 단축키 : control + shift + `

(마지막은 백틱(`)인데 ₩ 버튼이랑 같은 버튼입니다.)

혹은 아래 사진과 같이

Terminal -> New Terminal 을 통해 터미널창 열기

터미널 창에 다음 코드를 입력해 줍니다

npm install react-icons --save

사이트에서 Import부분을 복사하고, IconName에는 원하는 아이콘의 이름을 넣습니다.

(카테고리마다 import하는 내용이 다르므로 잘 확인해주세요~ :) )

아래처럼 import를 해주고, 컴포넌트처럼 사용하면 됩니다.