리액트 fontawesome 설치 및 사용

 

패키지 다운로드

 

공식문서

https://docs.fontawesome.com/v5/web/use-with/react

 

 

//yarn

yarn add @fortawesome/fontawesome-svg-core
yarn add @fortawesome/free-solid-svg-icons
yarn add @fortawesome/free-regular-svg-icons
yarn add @fortawesome/free-brands-svg-icons
yarn add @fortawesome/react-fontawesome

 

//npm

npm i --save @fortawesome/fontawesome-svg-core
npm install --save @fortawesome/free-solid-svg-icons
npm install --save @fortawesome/free-regular-svg-icons
npm install --save @fortawesome/free-brands-svg-icons
npm install --save @fortawesome/react-fontawesome

 

 

---

 

 

src/fontawesome.js 파일 생성

import { library } from '@fortawesome/fontawesome-svg-core';
import { fas } from '@fortawesome/free-solid-svg-icons';
import { far } from '@fortawesome/free-regular-svg-icons';
import { fab } from '@fortawesome/free-brands-svg-icons';

// Add all icons to the library so you can use them in your components
library.add(fas, far, fab);

src/main.jsx

 

//import

import './fontawesome';

 

---

 

 

 

사용

 

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';



<FontAwesomeIcon icon="fa-regular fa-heart" />