Cara integrasi FontAwesome ke dalam project NEXTJS

Posted by TEKNIK INFORMATIKA on Wednesday, 10 February 2021

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.. :)

kalau temen-temen butuh bantuan untuk membuat aplikasi website, desktop, android untuk usaha / tugas kuliah / skripsi, silahkan hub. 088211832975, terima kasih

Blog, Updated at: 04:39

0 komentar:

Post a Comment

Search This Blog

Follow This Blog

Total Pageviews