One place for hosting & domains

      Cara Menggunakan Font Awesome 5 dengan React


      Pengantar

      Font Awesome adalah kit alat untuk situs web yang menyediakan ikon dan logo sosial. React adalah pustaka pengodean yang digunakan untuk membuat antarmuka pengguna. Walaupun tim Font Awesome telah membuat komponen React untuk mendorong integrasi, ada beberapa hal mendasar yang harus dipahami tentang Font Awesome 5 dan strukturnya. Dalam tutorial ini, Anda akan mendalami cara menggunakan komponen React dari Font Awesome.

      Situs web Font Awesome beserta ikonnya

      Prasyarat

      Tidak diperlukan pengodean untuk tutorial ini, tetapi jika Anda tertarik bereksperimen dengan beberapa contoh, Anda akan membutuhkan hal berikut:

      Langkah 1 — Menggunakan Font Awesome

      Tim Font Awesome telah membuat komponen React sehingga Anda dapat menggunakan keduanya bersama-sama. Dengan pustaka ini, Anda dapat mengikuti tutorial setelah memilih ikon Anda.

      Dalam contoh ini, kita akan menggunakan ikon home dan melakukan segalanya dalam berkas App.js:

      src/App.js

      import React from "react";
      import { render } from "react-dom";
      
      // get our fontawesome imports
      import { faHome } from "@fortawesome/free-solid-svg-icons";
      import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
      
      // create our App
      const App = () => (
        <div>
          <FontAwesomeIcon icon={faHome} />
        </div>
      );
      
      // render to #root
      render(<App />, document.getElementById("root"));
      

      Aplikasi Anda sekarang memiliki ikon rumah kecil. Anda akan melihat bahwa kode ini hanya memilih ikon home sehingga hanya satu ikon yang ditambahkan ke ukuran bundel kita.

      kode sandbox bersama ikon rumah ditampilkan

      Sekarang, Font Awesome akan memastikan bahwa komponen ini akan diganti sendiri dengan versi SVG dari ikon itu setelah komponen ini dipasang.

      Langkah 2 — Memilih Ikon

      Sebelum menginstal dan menggunakan ikon, kita perlu mengetahui struktur pustaka Font Awesome. Karena ada banyak ikon, tim memutuskan untuk membaginya menjadi beberapa paket.

      Ketika memilih ikon yang diinginkan, Anda disarankan untuk mengunjungi laman ikon Font Awesome untuk mempelajari berbagai opsi Anda. Anda akan melihat beragam filter untuk dipilih di sepanjang sisi kiri halaman. Semua filter ini sangat penting karena menunjukkan dari paket ikon yang akan diimpor.

      Dalam contoh di atas, kita menarik ikon home dari paket @fortawesome/free-solid-svg-icons.

      Menentukan Paket yang akan Memiliki Ikon

      Anda dapat mengetahui paket yang memiliki ikon dengan meninjau filter di sebelah kiri. Anda juga dapat mengklik ikon dan melihat paket yang memilikinya.

      Setelah Anda mengetahui paket yang memiliki font, Anda perlu mengingat singkatan tiga huruf untuk paket itu:

      • Gaya Solid – fas
      • Gaya Reguler – far
      • Gaya Ringan – fal
      • Gaya Duotone – fad

      Anda dapat mencari tipe tertentu dari halaman ikon:

      laman ikon dengan beberapa nama paket di sebelah kiri

      Menggunakan Ikon dari Paket Spesifik

      Jika Anda menyusuri laman ikon Font Awesome, Anda akan melihat bahwa biasanya ikon yang sama memiliki beberapa versi. Misalnya, mari kita perhatikan ikon boxing-glove (sarung tinju):

      tiga macam versi ikon sarung tinju

      Untuk menggunakan ikon tertentu, Anda akan perlu menyesuaikan <FontAwesomeIcon>. Berikut ini beberapa tipe ikon yang sama dari paket berbeda. Tipe ini disertai singkatan tiga huruf yang kita bahas sebelumnya.

      Catatan: Contoh berikut tidak akan berhasil hingga kita membangun pustaka ikon dalam beberapa bagian.

      Berikut ini contoh versi solid:

      <FontAwesomeIcon icon={['fas', 'code']} />
      

      Ini bentuk asali versi solid jika tipe tidak ditentukan:

      <FontAwesomeIcon icon={faCode} />
      

      Dan versi ringan menggunakan fal:

      <FontAwesomeIcon icon={['fal', 'code']} />;
      

      Kita harus mengubah properti icon menjadi array sebagai ganti string sederhana.

      Langkah 3 — Menginstal Font Awesome

      Karena ada beberapa versi ikon, berbagai paket, dan paket gratis/pro, menginstal itu semua akan melibatkan lebih dari satu npm. Anda mungkin perlu menginstal beberapa ikon, kemudian memilih ikon yang diinginkan.

      Untuk artikel ini, kita akan menginstal semuanya sehingga kita dapat memeragakan cara menginstal beberapa paket.

      Jalankan perintah berikut untuk menginstal paket dasar:

      • npm i -S @fortawesome/fontawesome-svg-core @fortawesome/react-fontawesome

      Jalankan perintah berikut untuk menginstal ikon reguler:

      • # regular icons
      • npm i -S @fortawesome/free-regular-svg-icons
      • npm i -S @fortawesome/pro-regular-svg-icons

      Ini akan menginstal ikon solid:

      • # solid icons
      • npm i -S @fortawesome/free-solid-svg-icons
      • npm i -S @fortawesome/pro-solid-svg-icons

      Gunakan perintah ini untuk ikon ringan:

      • # light icons
      • npm i -S @fortawesome/pro-light-svg-icons

      Ini akan menginstal ikon duotone:

      • # duotone icons
      • npm i -S @fortawesome/pro-duotone-svg-icons

      Terakhir, ini akan menginstal ikon merek:

      • # brand icons
      • npm i -S @fortawesome/free-brands-svg-icons

      Atau, jika lebih suka menginstal semuanya sekaligus, Anda dapat menggunakan perintah ini untuk menginstal set ikon gratis:

      • npm i -S @fortawesome/fontawesome-svg-core @fortawesome/react-fontawesome @fortawesome/free-regular-svg-icons @fortawesome/free-solid-svg-icons @fortawesome/free-brands-svg-icons

      Jika Anda memiliki akun pro Font Awesome, Anda dapat menggunakan yang berikut ini untuk menginstal semua ikon:

      • npm i -S @fortawesome/fontawesome-svg-core @fortawesome/react-fontawesome @fortawesome/free-regular-svg-icons @fortawesome/pro-regular-svg-icons @fortawesome/free-solid-svg-icons @fortawesome/pro-solid-svg-icons @fortawesome/pro-light-svg-icons @fortawesome/pro-duotone-svg-icons @fortawesome/free-brands-svg-icons

      Anda telah menginstal paket, tetapi belum menggunakannya dalam aplikasi atau menambahkannya ke bundel aplikasi kita. Mari kita lihat cara melakukannya di langkah selanjutnya.

      Langkah 4 — Membuat Pustaka Ikon

      Mengimpor ikon yang diinginkan ke beberapa berkas mungkin terasa membosankan. Misalnya, Anda menggunakan logo Twitter di beberapa tempat dan Anda tidak ingin menulisnya berkali-kali.

      Untuk mengimpor segala sesuatunya di satu tempat, bukannya mengimpor setiap ikon ke dalam setiap berkas terpisah, kita akan membuat pustaka Font Awesome.

      Mari kita buat fontawesome.js dalam folder src, kemudian mengimpornya ke dalam index.js. Silakan menambahkan berkas ini di sebarang tempat selama komponen ikon yang Anda ingin gunakan tersebut memiliki akses (merupakan komponen anak). Anda bahkan dapat melakukan ini langsung di index.js atau App.js. Namun, lebih baik kita memindahnya ke berkas terpisah karena bisa membesar:

      src/fontawesome.js

      // import the library
      import { library } from '@fortawesome/fontawesome-svg-core';
      
      // import your icons
      import { faMoneyBill } from '@fortawesome/pro-solid-svg-icons';
      import { faCode, faHighlighter } from '@fortawesome/free-solid-svg-icons';
      
      library.add(
        faMoneyBill,
        faCode,
        faHighlighter
        // more icons go here
      );
      

      Jika Anda melakukannya di berkas itu sendiri, berarti Anda perlu mengimpornya ke index.js:

      src/index.js

      import React from 'react';
      import { render } from 'react-dom';
      
      // import your fontawesome library
      import './fontawesome';
      
      render(<App />, document.getElementById('root'));
      

      Mengimpor Seluruh Paket Ikon

      Sebaiknya, jangan mengimpor seluruh paket karena akan mengimpor setiap ikon tunggal ke aplikasi Anda sehingga bisa menyebabkan ukuran bundel menjadi besar. Jika Anda perlu mengimpor seluruh paket, tentu Anda bisa melakukannya.

      Dalam contoh ini, katakanlah Anda menginginkan semua ikon merek di @fortawesome/free-brands-svg-icons. Anda perlu menggunakan yang berikut untuk mengimpor keseluruhan paket:

      src/fontawesome.js

      import { library } from '@fortawesome/fontawesome-svg-core';
      import { fab } from '@fortawesome/free-brands-svg-icons';
      
      library.add(fab);
      

      fab menyatakan seluruh paket ikon merek.

      Mengimpor Ikon Satu Per Satu

      Cara yang disarankan untuk menggunakan ikon Font Awesome adalah mengimpornya satu per satu agar ukuran bundel akhir Anda bisa sekecil mungkin, karena Anda akan mengimpor yang diperlukan saja.

      Anda dapat membuat pustaka dari beberapa ikon dari paket yang berbeda seperti ini:

      src/fontawesome.js

      import { library } from '@fortawesome/fontawesome-svg-core';
      
      import { faUserGraduate } from '@fortawesome/pro-light-svg-icons';
      import { faImages } from '@fortawesome/pro-solid-svg-icons';
      import {
        faGithubAlt,
        faGoogle,
        faFacebook,
        faTwitter
      } from '@fortawesome/free-brands-svg-icons';
      
      library.add(
        faUserGraduate,
        faImages,
        faGithubAlt,
        faGoogle,
        faFacebook,
        faTwitter
      );
      

      Mengimpor Ikon yang Sama dari Beberapa Gaya

      Jika Anda ingin semua tipe boxing-glove untuk paket fal, far, dan fas, Anda dapat mengimpornya semua dengan nama yang berbeda, kemudian menambahkannya.

      src/fontawesome.js

      import { library } from '@fortawesome/fontawesome-svg-core';
      import { faBoxingGlove } from '@fortawesome/pro-light-svg-icons';
      import {
        faBoxingGlove as faBoxingGloveRegular
      } from '@fortawesome/pro-regular-svg-icons';
      import {
        faBoxingGlove as faBoxingGloveSolid
      } from '@fortawesome/pro-solid-svg-icons';
      
      library.add(
          faBoxingGlove,
          faBoxingGloveRegular,
          faBoxingGloveSolid
      );
      

      Lalu, Anda dapat menggunakannya dengan menerapkan awalan yang berbeda:

      <FontAwesomeIcon icon={['fal', 'boxing-glove']} />
      <FontAwesomeIcon icon={['far', 'boxing-glove']} />
      <FontAwesomeIcon icon={['fas', 'boxing-glove']} />
      

      Langkah 5 — Menggunakan Ikon

      Karena kini Anda telah menginstal yang diperlukan dan menambahkan ikon ke pustaka Font Awesome, Anda siap menggunakannya dan menetapkan ukuran. Dalam tutorial ini, kita akan menggunakan paket ringan (fal).

      Contoh pertama ini akan menggunakan ukuran normal:

      <FontAwesomeIcon icon={['fal', 'code']} />
      

      Contoh kedua dapat menggunakan penamaan ukuran, yaitu menggunakan singkatan untuk kecil (sm), sedang (md), besar (lg), dan ekstra besar (xl):

      <FontAwesomeIcon icon={['fal', 'code']} size="sm" />
      <FontAwesomeIcon icon={['fal', 'code']} size="md" />
      <FontAwesomeIcon icon={['fal', 'code']} size="lg" />
      <FontAwesomeIcon icon={['fal', 'code']} size="xl" />
      

      Opsi ketiga adalah menggunakan ukuran yang diberi nomor dan dapat mencapai 6:

      <FontAwesomeIcon icon={['fal', 'code']} size="2x" />
      <FontAwesomeIcon icon={['fal', 'code']} size="3x" />
      <FontAwesomeIcon icon={['fal', 'code']} size="4x" />
      <FontAwesomeIcon icon={['fal', 'code']} size="5x" />
      <FontAwesomeIcon icon={['fal', 'code']} size="6x" />
      

      Bila menggunakan penomoran ukuran, Anda juga dapat menggunakan desimal untuk menemukan ukuran yang tepat:

      <FontAwesomeIcon icon={['fal', 'code']} size="2.5x" />
      

      Font Awesome memberi gaya pada SVG yang digunakannya dengan mengambil warna teks CSS. Jika Anda ingin menempatkan tag <p> tempat ikon ini akan ditampilkan, warna paragraf akan menjadi warna ikon:

      <FontAwesomeIcon icon={faHome} style={{ color: 'red' }} />
      

      Font Awesome juga memiliki fitur transformasi pangkat yang memungkinkan Anda merangkai beberapa transformasi berbeda:

      <FontAwesomeIcon icon={['fal', 'home']} transform="down-4 grow-2.5" />
      

      Anda dapat menggunakan salah satu transformasi yang ditemukan di situs Font Awesome. Anda dapat menggunakannya untuk memindahkan ikon ke atas, bawah, kiri, atau kanan untuk mendapatkan posisi yang tepat di sebelah teks atau di dalam tombol.

      Ikon Lebar Tetap

      Saat menggunakan ikon di tempat yang mengharuskan ikon memiliki lebar yang sama dan seragam, Font Awesome memungkinkan kita menggunakan properti fixedWidth. Misalnya, katakanlah Anda perlu lebar tetap untuk daftar menu menurun navigasi:

      Situs web Scotch dengan daftar menu menurun dan

      <FontAwesomeIcon icon={['fal', 'home']} fixedWidth />
      <FontAwesomeIcon icon={['fal', 'file-alt']} fixedWidth />
      <FontAwesomeIcon icon={['fal', 'money-bill']} fixedWidth />
      <FontAwesomeIcon icon={['fal', 'cog']} fixedWidth />
      <FontAwesomeIcon icon={['fal', 'usd-square']} fixedWidth />
      <FontAwesomeIcon icon={['fal', 'play-circle']} fixedWidth />
      <FontAwesomeIcon icon={['fal', 'chess-king']} fixedWidth />
      <FontAwesomeIcon icon={['fal', 'sign-out-alt']} fixedWidth />
      

      Memutar Ikon

      Pemutaran sangat berguna untuk diterapkan pada tombol formulir saat formulir sedang diproses. Anda dapat menggunakan ikon berputar untuk membuat efek pemuatan yang menarik:

      <FontAwesomeIcon icon={['fal', 'spinner']} spin />
      

      Anda dapat menggunakan properti spin pada apa saja!

      <FontAwesomeIcon icon={['fal', 'code']} spin />
      

      Lanjutan: Melakukan Mask pada Ikon

      Font Awesome memungkinkan Anda menggabungkan dua ikon untuk membuat efek dengan melakukan mask. Anda mendefinisikan ikon normal, kemudian menggunakan properti mask untuk mendefinisikan ikon kedua yang diletakkan di atasnya. Ikon pertama akan dikurung dalam ikon yang dilakukan mask.

      Dalam contoh ini, kita membuat filter tag menggunakan mask:

      Filter Tag dengan Font Awesome

      <FontAwesomeIcon
        icon={['fab', 'javascript']}
        mask={['fas', 'circle']}
        transform="grow-7 left-1.5 up-2.2"
        fixedWidth
      />
      

      Perhatikan cara merangkai beberapa properti transform untuk memindahkan ikon bagian dalam agar pas di dalam ikon yang dilakukan mask.

      Kita akan mewarnai dan mengubah logo latar belakang dengan Font Awesome:

      Filter Tag lagi, tetapi kini dengan latar belakang biru

      Langkah 6 — Menggunakan react-fontawesome dan Ikon di Luar React

      Jika keseluruhan situs Anda bukan aplikasi laman tunggal (SPA), melainkan situs biasa dan Anda menambahkan React di atasnya. Untuk menghindari mengimpor pustaka SVG/JS utama serta pustaka react-fontawesome, Font Awesome telah membuat cara menggunakan pustaka React untuk mencari ikon di luar komponen React.

      Jika Anda memiliki <i class="fas fa-stroopwafel"></i>, kita dapat memberi tahu Font Awesome agar mengamati dan memperbarui menggunakan yang berikut:

      import { dom } from '@fortawesome/fontawesome-svg-core'
      
      dom.watch() // This will kick off the initial replacement of i to svg tags and configure a MutationObserver
      

      MutationObserver adalah teknologi web yang memungkinkan kita mengamati perubahan yang dilakukan pada DOM. Lihat lebih lanjut tentang teknik ini di dokumentasi React Font Awesome.

      Kesimpulan

      Menggunakan Font Awesome dan React bersama-sama adalah kombinasi yang bagus, tetapi mengharuskan kita menggunakan beberapa paket dan mempertimbangkan beragam kombinasi. Dalam tutorial ini, Anda telah mendalami beberapa cara menggunakan Font Awesome dan React bersama-sama.



      Source link