React 에서 Fontawesome 사용하기

문제발생

사진을 추가하는 작업 중 Fontawesome 에 무료 아이콘이 많아서 사용하려고 했다.

평소에 사진 불러오듯이 주소를 적고 import를 하면 될 줄 알았는데 계속해도 되지가 않았다.

삽질끝에 구글링하니,, 패키지를 설치해야하는 것이었다...

설치

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

차례대로 설치해 주면 된다!

사용하기

https://fontawesome.com/

Font Awesome

우선 이 사이트에서 사용하고 싶은 이미지를 가지고 온다.

그리고 사용할 컴포넌트에 import를 해주어야한다.

Test.js

import React from "react";

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faDog } from '@fortawesome/free-solid-svg-icons';


function Test() {
    return(
        <FontAwesomeIcon icon={faDog} />
    )
}

export default Test

이렇게 import를 해주면 된다. 

 

import { 사용할아이콘 } from '@fortawesome/free-solid-svg-icons';

 

사용할아이콘이름을 이런식으로 불러와서 사용해주면 된다.

 

감사합니다.