fontawesome(폰트어썸) React와 Next.js에서 사용하기

 

npm i --save @fortawesome/fontawesome-svg-core

# Free icons styles
npm i --save @fortawesome/free-solid-svg-icons
npm i --save @fortawesome/free-regular-svg-icons

npm i --save @fortawesome/react-fontawesome@latest

이와같이 npm을 설치해준다 물론 yarn도 있다.

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

Set Up with React

여기서 참고하면 되고

Next.js관련은

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

Use React with...

이곳에서 확인해서 사용하면된다.

 

그리고 나같은 경우에는 글로벌 설정하지않고 Navbar같은 특정한곳에서 아이콘을 사용하려 했다.

이와같이 사용하기위해 아래와 같이 설정해줬다.

components/NavBar.js

import Link from "next/link";
import { useRouter } from "next/router";
import { Container,Row,Col,Navbar,Nav,NavDropdown,Dropdown} from 'react-bootstrap';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faCoffee,faUser } from '@fortawesome/free-solid-svg-icons'


export default function NavBar() {
  const router = useRouter();
  
  ........
  
   <Dropdown>
  <Dropdown.Toggle variant="" id="dropdown-basic">
  <FontAwesomeIcon icon={faUser} /> 회원메뉴
  </Dropdown.Toggle>

  <Dropdown.Menu>
    <Dropdown.Item href="#/action-1">로그인 / 로그아웃</Dropdown.Item>
    <Dropdown.Item href="#/action-2">회원가입</Dropdown.Item>
    <Dropdown.Item href="#/action-3">마이페이지</Dropdown.Item>
  </Dropdown.Menu>
</Dropdown>

바로 사용할 수 는있는데 이제 solid설정 바꾸는거 관련해서는 좀더 알아봐야할거같다. 바로 적용은되고 문제도 없으니

 

우선 사용하면서 추가로 정보를 찾아봐야 할것같다.

 

 

다만 이런식으로 사용하라고 되어있는데

 

  <FontAwesomeIcon icon={faUser} />

이와같이 {}로 사용해야 오류없이 사용할 수 있었다.

 

관련하여 아래의 포스팅을 참고했다.

 

https://www.digitalocean.com/community/tutorials/how-to-use-font-awesome-5-with-react

How To Use Font Awesome 5 with React | DigitalOcean

https://breathtaking-life.tistory.com/51

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

https://jae04099.tistory.com/entry/React-%EB%A6%AC%EC%95%A1%ED%8A%B8%EC%97%90-font-awesome-%EC%95%84%EC%9D%B4%EC%BD%98-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0

[React] 리액트에 font-awesome 아이콘 사용하기