[Next.JS] FontAwesome 사용법

[Next.JS] FontAwesome 사용법

터미널에 명령어 입력

# solid, regular, brands 중에 원하는 것 입력하기
npm install --save @fortawesome/fontawesome-svg-core
npm install --save @fortawesome/free-solid-svg-icons
npm install --save @fortawesome/free-regular-svg-icons
npm install --save @fortawesome/free-brands-svg-icons
npm install --save @fortawesome/react-fontawesome

 

_app.js 에 코드입력

// _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} />
}

 

fontawesome 사용하기

// example.js
import { FontAwesomeIcon } from '@fortawesome/react-font awesome';
import { faGlobe } from '@fortawesome/free-solid-svg-icons';
import { faFile } from '@fortawesome/free-regular-svg-icons';
import { faAirbnb } from '@fortawesome/free-brands-svg-icons';

export default function Example() {
	return (
		<>
			<FontAwesomeIcon icon={faGlobe} /> 
			<FontAwesomeIcon icon={faFile} /> 
			<FontAwesomeIcon icon={faAirbnb} />        
 		</>
    )
}