React에서 간단한 변경으로 무료 아이콘을 이용할 수 있다.
폰트어썸(fontawesome)을 이용해서 웹에서 사용할 수 있는 무료 아이콘을 활용해보자.
먼저 package.json 파일을 수정한다.

package.json

// ...(중략)
"dependencies": {
    "@fortawesome/fontawesome-free": "^5.14.0",
    "@fortawesome/fontawesome-svg-core": "^1.2.30",
    "@fortawesome/free-brands-svg-icons": "^5.14.0",
    "@fortawesome/free-regular-svg-icons": "^5.14.0",
    "@fortawesome/free-solid-svg-icons": "^5.14.0",
    "@fortawesome/react-fontawesome": "^0.1.11",
// ...(중략)

npm install

npm install 명령어를 통해 package.json 내에 입력한 폰트어썸 모듈 항목을 설치한다.

활용

원하는 컴포넌트 js 파일에 폰트어썸 모듈을 import하고 아래와 같이 활용할 수 있다.

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faTwitter, faGoogle, faGithub, } from "@fortawesome/free-brands-svg-icons";

// ...(중략)
return (
	<>
  		<FontAwesomeIcon icon={faTwitter} color={"#04AAFF"} size="3x"/>
  		<FontAwesomeIcon icon={faGoogle}/>
  		<FontAwesomeIcon icon={faGithub}/>
  	</>
);
// ...(중략)

더 많은 아이콘을 추가하고 싶다면 폰트어썸 공식 홈페이지를 참고하자.