Next.js를 배워보자 2_(next.js에서 icon 사용법)

웹사이트 만들 때 좀 있어 보이기 위해 아이콘을 많이 사용할건데, 첫번째는 'fontawesome'을 사용할거고 두번째는 'react-icons'를 사용해보자

 

---

 

1. fontawesome 사용하기

 

 

1) 터미널 열어 fontawesome 패키지를 설치한다.

npm install @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/react-fontawesome

 

2) app 폴더 밖에다 pages 폴더를 생성하고 그 안에 _app.js 파일을 생성한다.

 

3) 아래의 코드를 복사해 _app.js 파일에 붙여 넣는다.

import { config } from '@fortawesome/fontawesome-svg-core'
import '@fortawesome/fontawesome-svg-core/styles.css'
config.autoAddCss = false

export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />;
};

 

4) 아이콘을 사용하고 싶은 파일에 FontAwesomeIcon을 import한 후 원하는 아이콘 이름도 import해준다.

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

export default function Home() {
	return (
    	<div>
            <FontAwesomeIcon icon={faPen} />
        </div>
    )
}

사용 가능한 모든 아이콘 이름은 아래의 파일에서 찾을 수 있다.

/node_modules/@fortawesome/free-solid-svg-icons/

 

 

이렇게하면 아마도 아이콘이 어어어ㅓ어엄청 크게 나타날거다. 당황하지 말고 클래스 붙여주고 width값을 조정해주자 (참고로 font-size는 안 먹힌다.)

 

 

 

---

 

 

2. react-icons 사용하기

 

 

1) 터미널 열어 패키지 설치한다.

npm install react-icons --save

 

2) React Icons 사이트로 들어가 원하는 아이콘을 찾는다. https://react-icons.github.io/react-icons

React Icons

 

3) 원하는 아이콘을 찾으면 import 먼저 해주고 아이콘 이름을 복붙한다.

import { BsPencil } from "react-icons/bs";

export default function Home() {
	return (
    	<div>
            <BsPencil />
        </div>
    )
}

 

스타일은 자유자재로 ~.~