[리액트] Font Awesome(폰트 어썸) 사용 방법

나는 페이스북 로고가 필요했다.

그래서 font awesome을 사용하려 했는데

리액트로는 어떻게 해야할지 몰랐지만 구글링하면 역시 다 나온다.

 

(완벽하게 이해하고 적은게 아니라 적으면서 정리한 글이기에

정확한 정보는 공식 페이지를 참고 바람)

 

@fortawesome/react-fontawesome

 

1. 우선 npm Installation에 따라 설치를 진행한다.

$ npm i --save @fortawesome/fontawesome-svg-core
$ npm i --save @fortawesome/free-solid-svg-icons
$ npm i --save @fortawesome/react-fontawesome

 

2. 설치가 완료 되었다면 아래의 코드와 같이 간단한 커피 아이콘을 사용할 수 있다.

import ReactDOM from 'react-dom'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faCoffee } from '@fortawesome/free-solid-svg-icons'
 
const element = <FontAwesomeIcon icon={faCoffee} />
 
ReactDOM.render(element, document.body)

짠

---

한 개 이상의 아이콘을 사용하고 싶다면?

 

import ReactDOM from 'react-dom'
import { library } from '@fortawesome/fontawesome-svg-core'
import { faCheckSquare, faCoffee } from '@fortawesome/free-solid-svg-icons'
 
library.add(faCheckSquare, faCoffee)

export const Beverage = () => (
  <div>
    <FontAwesomeIcon icon="check-square" />
    Favorite beverage: <FontAwesomeIcon icon="coffee" />
  </div>
)

두 번째 줄처럼 library를 추가하면 된다!

그리고 library.add를 이용하여 한 번 더 아이콘을 적어주면 된다.

---

브랜드 아이콘 추가하기

 

$ npm i --save @fortawesome/free-brands-svg-icons

 

설치 후에 아래 코드대로 적어주면 실행된다.

 

위와 동일하게 library import 해주고, fab를 import 해서 library.add 해주면 된다.

import React from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { library } from "@fortawesome/fontawesome-svg-core";
import { fab } from "@fortawesome/free-brands-svg-icons";

library.add(fab);

const Gadget = () => (
  <div>
    <FontAwesomeIcon icon={["fab", "apple"]} />
    <FontAwesomeIcon icon={["fab", "microsoft"]} />
    <FontAwesomeIcon icon={["fab", "google"]} />
  </div>
);

export default Gadget;

짠2