Cara integrasi FontAwesome ke dalam project NEXTJS

Icon itu sangat penting di dalam tampilan website/aplikasi kita, kadang-kadang icon yang tepat di tempat yang tepat bisa membuat user mengerti apa yang kita maksud, tanpa perlu kita tulis tulisan/deskripsi (tidak menggunakan icon)

Jadi untuk dapat mengintegrasikan FontAwesome ke dalam project NextJS kita adalah dengan mengikuti beberapa langkah dibawah ini:

• Download library fontawesome menggunakan yarn atau npm

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

• Di dalam file _app.js kalian, tambahkan script dibawah ini, tambahkan di bagian atas file

import "@fortawesome/fontawesome-svg-core/styles.css"; // import Font Awesome CSS
import { config } from "@fortawesome/fontawesome-svg-core";
config.autoAddCss = false; // Tell Font Awesome to skip adding the CSS automatically since its being imported above

• Lalu terakhir, import fontawesome dan icon fontawesome yang kalian pilih ke dalam file project kalian, disini saya mau mengimport icon search di dalam file home.js

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; // Import the FontAwesomeIcon component
import { faSearch } from "@fortawesome/free-solid-svg-icons"; // import the icons you need

const Home = (props) => {
 return (
   <div>
     <FontAwesomeIcon icon={faSearch}></FontAwesomeIcon>
   </div>
 );
};

export default Home;

Selesai! gampang bukan? ya memang cukup mudah untuk mengintegrasikan fontawesome ke dalam NextJS, yang perlu kalian perhatikan adalah di bagian _app.js karna jika kalian tidak menambahkan script tersebut, icon kalian akan mempunyai ukuran yang sangat besar pada saat proses load website kalian..

Sekian, semoga dokumentasi ini membantu di kemudian hari.. :)