[TIL] 2023.09.05 - 리액트 아이콘(react-icons) 사용하기

 리액트 아이콘(react-icons) 

1. react-icons 주소

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

React Icons

 

2. 라이브러리 설치하기

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

 

3. icon / import 주소 복사

• icon : 클릭하면 자동으로 복사됨
• import 주소
  - 상단에 나와있는데, 카테고리 마다 import  주소가 다름
  - 주소 뒤에 /하고 아이콘 앞 두글자 또는 세글자를 소문자로 적어주면 됨!

// import {아이콘이름} from "import 주소"
import { VscChevronRight } from "react-icons/vsc";

 

 

4. 적용 방법

• < />안에 아이콘 이름 넣어서 사용!
• style={}로 크기(fontSize), 색상(color)도 변경 가능하고, className을 줘서 css 작업 가능함!
• 결과

 

const Button = () => {
  return (
    <Button>버튼 <VscChevronRight style={{ fontSize: '13px', color: 'red' }} /></Button>
  )}

export default Button