[React.js] Fontawesome-icon 이란?

Fontawesome-icon 이란?

React에서 여러 아이콘을 쉽게 사용할 수 있게 도와주는 것

 

 

안정적이다.

벡터 아이콘이다.

---

Fontawesome-icon 설치

 

npm으로 설치

// 기본 설치
npm i --save @fortawesome/fontawesome-svg-core
npm install --save @fortawesome/free-solid-svg-icons

// React에서 사용시 설치
npm install --save @fortawesome/react-fontawesome

// React Native에서 사용시 설치
npm install --save @fortawesome/react-native-fontawesome

// 선택 설치
npm install --save @fortawesome/free-brands-svg-icons
npm install --save @fortawesome/free-regular-svg-icons



// React에서 한번에 설치
npm install @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/react-native-fontawesome @fortawesome/free-brands-svg-icons @fortawesome/free-regular-svg-icons 

// React Native에서 한번에 설치
npm install @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/react-native-fontawesome @fortawesome/free-brands-svg-icons @fortawesome/free-regular-svg-icons

 

 

React.js 에서 Fontawesome Icon 사용하기

// 아이콘 컴포넌트 가져오기
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

// 사용하고 싶은 아이콘 가져오기
import { faBars } from "@fortawesome/free-solid-svg-icons";

// 컴포넌트와 결합하여 사용하기
<FontAwesomeIcon icon={faBars} size="1x" color="black" />

---

Npm

www.npmjs.com/package/@fortawesome/react-fontawesome

@fortawesome/react-fontawesome

 

Documentation

fontawesome.com/how-to-use/on-the-web/using-with/react

Font Awesome