GALAXY TECH
Chuyên gia Công nghệ
Thứ năm, 14/05/2020 | 00:00 GMT+7

Cách sử dụng Font Awesome 5 với React

Font Awesome là một bộ công cụ dành cho các trang web cung cấp các biểu tượng và biểu trưng xã hội. React là một thư viện mã hóa được sử dụng để tạo giao diện user . Mặc dù group Font Awesome đã tạo thành phần React để thúc đẩy tích hợp, nhưng có một số nguyên tắc cơ bản để hiểu về Font Awesome 5 và cách cấu trúc của nó. Trong hướng dẫn này, bạn sẽ khám phá cách sử dụng thành phần React Font Awesome.

Trang web Font Awesome với các biểu tượng của nó

Yêu cầu

Không cần viết mã cho hướng dẫn này, nhưng nếu bạn muốn thử nghiệm với một số ví dụ, bạn cần những điều sau:

Bước 1 - Sử dụng Font Awesome

Group Font Awesome đã tạo một thành phần React để bạn có thể sử dụng hai thành phần này cùng nhau. Với thư viện này, bạn có thể làm theo hướng dẫn sau khi chọn biểu tượng của bạn .

Trong ví dụ này, ta sẽ sử dụng biểu tượng home và thực hiện mọi thứ trong file 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"));

Ứng dụng của bạn hiện có biểu tượng trang chủ nhỏ. Bạn sẽ nhận thấy rằng mã này chỉ chọn biểu tượng home để chỉ một biểu tượng được thêm vào kích thước gói của ta .

sandbox mã với biểu tượng trang chủ hiển thị

Bây giờ, Font Awesome sẽ đảm bảo thành phần này sẽ tự thay thế bằng version SVG của biểu tượng đó sau khi thành phần này được mount .

Bước 2 - Chọn biểu tượng

Trước khi cài đặt và sử dụng các biểu tượng, điều quan trọng là phải biết cách cấu trúc các thư viện Font Awesome. Vì có nhiều biểu tượng nên group đã quyết định chia chúng thành nhiều gói.

Khi chọn và chọn biểu tượng nào bạn muốn, bạn nên truy cập trang biểu tượng Font Awesome để khám phá các tùy chọn của bạn . Bạn sẽ thấy các bộ lọc khác nhau để lựa chọn dọc theo bên trái của trang. Các bộ lọc này rất quan trọng vì chúng sẽ cho biết gói để nhập biểu tượng của bạn từ đó.

Trong ví dụ trên, ta đã kéo biểu tượng home ra khỏi gói @fortawesome/free-solid-svg-icons .

Xác định gói biểu tượng nào thuộc về

Bạn có thể biết biểu tượng thuộc về gói nào bằng cách xem lại các bộ lọc ở bên trái. Bạn cũng có thể nhấp vào biểu tượng và xem gói chứa nó.

Một khi bạn biết gói nào thuộc về phông chữ, điều quan trọng là phải nhớ cách viết tắt ba chữ cái cho gói đó:

  • Phong cách rắn - fas
  • Phong cách thông thường - far
  • Phong cách ánh sáng - fal
  • Duotone Style - fad

Bạn có thể tìm kiếm một loại cụ thể từ trang biểu tượng:

trang biểu tượng với một số tên gói ở bên trái

Sử dụng các biểu tượng từ các gói cụ thể

Nếu bạn duyệt qua trang biểu tượng Font Awesome , bạn sẽ nhận thấy rằng thường có nhiều version của cùng một biểu tượng. Ví dụ: hãy xem biểu tượng boxing-glove :

biểu tượng găng tay đấm bốc ba version khác nhau

Để sử dụng một biểu tượng cụ thể, bạn cần điều chỉnh <FontAwesomeIcon> . Sau đây là nhiều loại biểu tượng giống nhau từ các gói khác nhau. Chúng bao gồm các viết tắt ba chữ cái đã thảo luận trước đó.

Lưu ý: Các ví dụ sau sẽ không hoạt động cho đến khi ta tạo thư viện biểu tượng trong một vài phần.

Đây là một ví dụ về version rắn:

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

Điều này mặc định là version rắn nếu một loại không được chỉ định:

<FontAwesomeIcon icon={faCode} />

Và version nhẹ sử dụng fal :

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

Ta đã phải chuyển chỗ dựa icon mình thành một mảng thay vì một chuỗi đơn giản.

Bước 3 - Cài đặt Font Awesome

Vì có nhiều version của một biểu tượng, nhiều gói và gói miễn phí / chuyên nghiệp nên việc cài đặt chúng đều liên quan đến nhiều hơn một gói npm . Bạn có thể cần phải cài đặt bội số và sau đó chọn các biểu tượng bạn muốn.

Đối với bài viết này, ta sẽ cài đặt mọi thứ để ta có thể trình bày cách cài đặt nhiều gói.

Chạy lệnh sau để cài đặt các gói cơ sở:

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

Chạy các lệnh sau để cài đặt các biểu tượng thông thường:

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

Chúng sẽ cài đặt các biểu tượng rắn:

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

Sử dụng lệnh này cho các biểu tượng ánh sáng:

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

Thao tác này sẽ cài đặt các biểu tượng duotone:

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

Cuối cùng, điều này sẽ cài đặt các biểu tượng thương hiệu:

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

Hoặc, nếu bạn muốn cài đặt tất cả chúng trong một lần, bạn có thể sử dụng lệnh này để cài đặt các bộ biểu tượng miễn phí:

  • 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

Nếu bạn có account chuyên nghiệp với Font Awesome, bạn có thể sử dụng cách sau để cài đặt tất cả các biểu tượng:

  • 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

Bạn đã cài đặt các gói nhưng chưa sử dụng chúng trong ứng dụng của bạn hoặc chưa thêm chúng vào các gói ứng dụng của ta . Hãy xem cách bạn có thể làm điều đó trong bước tiếp theo.

Bước 4 - Tạo Thư viện Biểu tượng

Có thể rất tẻ nhạt khi nhập biểu tượng bạn muốn vào nhiều file . Giả sử bạn sử dụng biểu tượng Twitter ở nhiều nơi, bạn không muốn phải viết nhiều lần.

Để nhập mọi thứ vào một nơi, thay vì nhập từng biểu tượng vào từng file riêng biệt, ta sẽ tạo một thư viện Font Awesome .

Hãy tạo fontawesome.js trong folder src và sau đó nhập nó vào index.js . Hãy thoải mái thêm file này vào bất cứ đâu miễn là các thành phần bạn muốn sử dụng trong các biểu tượng có quyền truy cập (là các thành phần con). Bạn thậm chí có thể làm điều này ngay trong index.js hoặc App.js . Tuy nhiên, có thể tốt hơn nếu chuyển file này ra một file riêng vì nó có thể lớn:

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 );

Nếu bạn đã thực hiện việc này trong file riêng của nó, thì bạn cần nhập vào 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'));

Nhập toàn bộ gói biểu tượng

Bạn không nên nhập toàn bộ gói vì bạn đang nhập từng biểu tượng đơn lẻ vào ứng dụng của bạn , điều này có thể gây ra kích thước gói lớn. Nếu bạn cần quan trọng hóa toàn bộ gói, bạn chắc chắn có thể.

Trong ví dụ này, giả sử bạn muốn có tất cả các biểu tượng thương hiệu trong @fortawesome/free-brands-svg-icons . Bạn sẽ sử dụng phần sau để nhập toàn bộ gói:

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

fab đại diện cho toàn bộ gói biểu tượng thương hiệu.

Nhập từng biểu tượng

Cách được đề xuất để sử dụng các biểu tượng Font Awesome là nhập từng biểu tượng một để kích thước gói cuối cùng của bạn càng nhỏ càng tốt, vì bạn sẽ chỉ nhập những gì bạn cần.

Bạn có thể tạo một thư viện từ nhiều biểu tượng từ các gói khác nhau như sau:

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 );

Nhập cùng một biểu tượng từ nhiều kiểu

Nếu bạn muốn có tất cả các loại boxing-glove cho gói fal , far và fas , bạn có thể nhập tất cả chúng dưới dạng một tên khác và sau đó thêm chúng.

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 );

Sau đó, bạn có thể sử dụng chúng bằng cách triển khai các tiền tố khác nhau:

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

Bước 5 - Sử dụng các biểu tượng

Đến đây bạn đã cài đặt những gì bạn cần và đã thêm các biểu tượng của bạn vào thư viện Font Awesome, bạn đã sẵn sàng sử dụng chúng và chỉ định kích thước. Trong hướng dẫn này, ta sẽ sử dụng gói light ( fal ).

Ví dụ đầu tiên này sẽ sử dụng kích thước bình thường:

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

Ví dụ thứ hai có thể sử dụng định cỡ được đặt tên , sử dụng các chữ viết tắt của small ( sm ), medium ( md ), large ( lg ) và extra-large ( 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" />

Tùy chọn thứ ba là sử dụng kích thước được đánh số có thể lên đến 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" />

Khi sử dụng định cỡ được đánh số, bạn cũng có thể sử dụng số thập phân để tìm kích thước hoàn hảo:

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

Font Awesome tạo kiểu cho SVG mà nó sử dụng bằng cách lấy màu văn bản của CSS. Nếu bạn đặt <p> ở nơi biểu tượng này xuất hiện, màu của đoạn văn sẽ là màu của biểu tượng:

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

Font Awesome cũng có tính năng biến đổi sức mạnh , nơi bạn có thể xâu chuỗi các biến đổi khác nhau với nhau:

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

Bạn có thể sử dụng bất kỳ biến đổi nào được tìm thấy trên trang web Font Awesome . Bạn có thể sử dụng điều này để di chuyển các biểu tượng lên, xuống, sang trái hoặc sang phải để có được vị trí hoàn hảo bên cạnh văn bản hoặc bên trong các node .

Các biểu tượng chiều rộng cố định

Khi sử dụng các biểu tượng ở một vị trí mà tất cả chúng cần có cùng chiều rộng và đồng nhất, Font Awesome cho phép ta sử dụng giá đỡ fixedWidth . Ví dụ: giả sử bạn cần chiều rộng cố định cho menu thả xuống của bạn :

Trang web Scotch với menu thả xuống và "Các khóa học" được đánh dấu

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

Biểu tượng quay

Spinning hữu ích để triển khai trên các node biểu mẫu khi biểu mẫu đang xử lý. Bạn có thể sử dụng biểu tượng con quay để tạo hiệu ứng tải đẹp mắt:

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

Bạn có thể sử dụng trụ spin trên bất cứ thứ gì!

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

Nâng cao: Biểu tượng mặt nạ

Font Awesome cho phép bạn kết hợp hai biểu tượng để tạo hiệu ứng với mặt nạ . Bạn xác định biểu tượng bình thường của bạn và sau đó sử dụng mask chống để xác định một biểu tượng thứ hai để đặt trên cùng. Biểu tượng đầu tiên sẽ bị giới hạn trong biểu tượng mặt nạ.

Trong ví dụ này, ta đã tạo bộ lọc thẻ bằng cách sử dụng mặt nạ:

Gắn thẻ bộ lọc với Font Awesome

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

Lưu ý cách bạn có thể xâu chuỗi nhiều đạo cụ transform lại với nhau để di chuyển biểu tượng bên trong cho vừa với biểu tượng mặt nạ.

Ta thậm chí còn tô màu và thay đổi logo nền bằng Font Awesome:

Thẻ lọc lại, nhưng bây giờ có nền màu xanh lam

Bước 6 - Sử dụng react-fontawesome và các biểu tượng bên ngoài React

Nếu toàn bộ trang web không phải là ứng dụng một trang (SPA), và thay vào đó, bạn có một trang web truyền thống và đã thêm React ở trên cùng . Để tránh nhập thư viện SVG / JS chính và cả thư viện react-fontawesome , Font Awesome đã tạo ra một cách để sử dụng các thư viện React để theo dõi các biểu tượng bên ngoài các thành phần React.

Nếu bạn có <i class="fas fa-stroopwafel"></i> , ta có thể yêu cầu Font Awesome xem và cập nhật những thứ đó bằng cách sử dụng các cách sau:

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 's là một công nghệ web cho phép ta theo dõi DOM để biết các thay đổi một cách hiệu quả. Tìm hiểu thêm về kỹ thuật này trên tài liệu về React Font Awesome .

Kết luận

Sử dụng Font Awesome và React cùng nhau là một sự kết hợp tuyệt vời, nhưng tạo ra nhu cầu sử dụng nhiều gói và cân nhắc các kết hợp khác nhau. Trong hướng dẫn này, bạn đã khám phá một số cách có thể sử dụng Font Awesome và React cùng nhau.

Tags:

Các tin liên quan