Phông chữ Tuyệt vời hiện có một thành phần React chính thức có sẵn để sử dụng các biểu tượng của chúng tôi trong các ứng dụng React của bạn một cách dễ dàng hơn
Trước khi bạn bắt đầu
Hãy chắc chắn rằng bạn
Bắt đầu
Để bắt đầu, bạn cần cài đặt các gói sau vào dự án của mình bằng trình quản lý gói như npm [mở cửa sổ mới] và sợi [mở cửa sổ mới]. Dưới đây là các ví dụ cài đặt mọi thứ bạn cần và kiểu biểu tượng chắc chắn của chúng tôi bằng cách sử dụng từng trình quản lý gói tương ứng
Xem câu hỏi Stack Overflow này về sự khác biệt [mở cửa sổ mới] giữa --save
và --save-dev
. Sợi cũng cho phép bạn sử dụng --dev
để lưu dưới dạng phụ thuộc phát triển
Thêm kiểu bổ sung
Nếu bạn muốn sử dụng các kiểu biểu tượng bổ sung, bạn cũng cần phải cài đặt chúng. Dưới đây là ví dụ về cách thêm các biểu tượng thương hiệu của chúng tôi và bộ biểu tượng kiểu thông thường miễn phí của chúng tôi thông qua npm [mở cửa sổ mới]
Để sử dụng các biểu tượng Pro, bạn cần chuyển loại biểu tượng bạn muốn sử dụng vào chỗ dựa icon
của thành phần. Đọc tiếp để được hướng dẫn chi tiết hơn về cách sử dụng
Sử dụng biểu tượng
Khi bạn đã cài đặt tất cả các gói cần thiết cho dự án của mình, có hai cách để bạn có thể sử dụng Font Awesome 5 với React. Dưới đây là tóm tắt về cả hai tùy chọn cũng như lợi ích và nhược điểm có thể có của chúng
Tùy chọnLợi íchDrawbacksSử dụng cá nhânCho phép đặt lại các biểu tượng, tối ưu hóa gói cuối cùng của bạn. Chỉ các biểu tượng bạn nhập mới được bao gồm trong gói. Nhập rõ ràng các biểu tượng vào từng thành phần trong dự án của bạn có thể trở nên tẻ nhạt. Sử dụng toàn cầu Nhập biểu tượng riêng lẻ chỉ một lần trong mô-đun init - không cần nhập biểu tượng vào từng thành phần sau khi chúng được thêm vào thư viện. Bạn có thể bao gồm các tệp sẽ không được sử dụng và có thể ảnh hưởng đến hiệu suấtSử dụng Biểu tượng thông qua Sử dụng Cá nhân
Một lần nữa, với phương pháp này, bạn sẽ cần nhập rõ ràng các biểu tượng vào từng thành phần. Đây là một ví dụ đơn giản
Lưu ý rằng biểu tượng faCoffee
được nhập từ @fortawesome/free-solid-svg-icons
dưới dạng đối tượng và sau đó được cung cấp cho giá đỡ icon
dưới dạng đối tượng
Ngoài ra, đối với ví dụ trên, chúng tôi đang tham khảo mô-đun @fortawesome/free-solid-svg-icons
, vì vậy hãy đảm bảo rằng bạn đã cài đặt gói đó trong dự án của mình
Sử dụng Biểu tượng thông qua Sử dụng Toàn cầu
Bạn có thể muốn sử dụng các biểu tượng của chúng tôi trong nhiều hơn một thành phần trong dự án của mình, phải không?
Thay vào đó, bạn có thể thêm chúng một lần trong ứng dụng React của mình và tham chiếu chúng trong bất kỳ thành phần nào. Chúng tôi khuyên bạn nên nhập chúng qua một "thư viện" trong mô-đun khởi tạo của ứng dụng React của bạn. Đây là một ví dụ
Giả sử bạn có Ứng dụng React, "Trình kiểm tra cà phê", thông báo cho người dùng khi cà phê mới pha đã để quá lâu và độ tươi bị ảnh hưởng
Chúng tôi sử dụng App.js
của Coffee Checker để khởi tạo ứng dụng và thư viện của mình. Giao diện người dùng của ứng dụng của chúng tôi muốn sử dụng hai biểu tượng riêng lẻ, faCheckSquare
và faCoffee
. Chúng tôi cũng thêm tất cả các thương hiệu vào --save-dev
1 để xây dựng giới thiệu về các công ty lớn sử dụng "Coffee Checker" một cách hư cấu theo thời gian
Trong cuộc gọi của chúng tôi tới --save-dev
2, bạn đang vượt qua
--save-dev
3. đại diện cho tất cả các biểu tượng thương hiệu trong--save-dev
1. Vì vậy, bất kỳ biểu tượng thương hiệu nào trong gói đó có thể được tham chiếu theo tên biểu tượng dưới dạng chuỗi ở bất kỳ nơi nào khác trong ứng dụng của chúng tôi. Ví dụ.--save-dev
5,--save-dev
6 hoặc--save-dev
7faCheckSquare
vàfaCoffee
. Việc thêm từng biểu tượng này riêng lẻ cho phép chúng tôi đề cập đến chúng trong ứng dụng của mình bằng tên chuỗi biểu tượng của chúng, lần lượt là--dev
0 và--dev
1
Ứng dụng của chúng tôi cũng có các thành phần React, --dev
2 và --dev
3. Sau khi khởi tạo thư viện trên, bạn không cần phải nhập lại các biểu tượng vào từng thư viện. Chúng tôi nhập thành phần --dev
4 và khi được sử dụng, bạn cung cấp cho biểu tượng một tên biểu tượng dưới dạng chuỗi. Đây là giao diện của nó trong thành phần chức năng của chúng tôi, --dev
5
Đứng lên. Rắn là Phong cách mặc định
Có một phép thuật khác đang diễn ra trong nền khi cung cấp tên biểu tượng dưới dạng các chuỗi như thế này. tiền tố --dev
6 [đối với Font Awesome Solid] đang được coi là mặc định
Và đây là thành phần --dev
7
- Chúng tôi đã sử dụng lại tên biểu tượng
--dev
0 trong thành phần này, mặc dù bạn không cần phải nhập nó vào thành phần này một cách rõ ràng nhờ vào lần nhập trước đó và bổ sung thư viện trongApp.js
của chúng tôi - Biểu tượng
--dev
0 cũng có tiền tố mặc định là--dev
6 ở đây, đây là điều bạn muốn, vì biểu tượng đó cũng nằm trong gói@fortawesome/free-solid-svg-icons
- Chúng tôi đã sử dụng các biểu tượng thương hiệu
--save-dev
5,--save-dev
6 và--save-dev
7, những biểu tượng này chưa bao giờ được nhập riêng lẻ một cách rõ ràng, nhưng chúng có sẵn cho chúng tôi theo tên dưới dạng chuỗi vì tất cả các biểu tượng thương hiệu đã được thêm vào thư viện của chúng tôi trongApp.js
và--save-dev
3 bao gồm tất cả các biểu tượng đó - Chúng tôi đã thêm tiền tố kiểu
--save-dev
3 dành riêng cho Thương hiệu để tham chiếu 3 biểu tượng thương hiệu đó
Cú pháp biểu tượng
Như các ví dụ của chúng tôi ở trên cho thấy, cú pháp để tham chiếu một biểu tượng trong các thành phần trên khác với cú pháp dựa trên HTML truyền thống của chúng tôi. Đây là tất cả các cách hợp lệ để xác định chỗ dựa icon
Prop icon
mong đợi một đối tượng duy nhất
- Nó có thể là một đối tượng biểu tượng, như
faCoffee
1 - Nó có thể là một đối tượng chuỗi, như
--dev
1. [Các dấu ngoặc nhọn xung quanh một đối tượng chuỗi được cung cấp cho một chỗ dựa là tùy chọn, vì vậy chúng đã bị bỏ qua. ] - Hoặc nó có thể là một
faCoffee
3 chuỗi, trong đó phần tử đầu tiên là tiền tố kiểu và phần tử thứ hai là tên biểu tượng.faCoffee
4
Tìm hiểu thêm về Kiểu + Tiền tố
Chúng tôi đã thêm nhiều kiểu trong Font Awesome 5 và đang sử dụng tiền tố để gọi những kiểu cụ thể khi hiển thị biểu tượng. Kiểm tra danh sách phong cách đầy đủ của chúng tôi để xem những gì có sẵn trong Font Awesome Free và Pro
Đặc trưng
Tất cả các tính năng của bộ công cụ kiểu có sẵn để sử dụng web nói chung cũng có sẵn trong thành phần Font Awesome React chính thức. Tuy nhiên, lưu ý rằng cú pháp khác với tài liệu sử dụng web chung của chúng tôi
Chúng tôi đang sử dụng phím tắt bên dưới
Trong các đoạn mã sau, bạn sẽ sử dụng ký hiệu tắt cho các biểu tượng—tham chiếu các biểu tượng theo tên của chúng dưới dạng chuỗi. Nhưng hãy nhớ rằng, tùy chọn đó chỉ hợp lệ sau khi bạn đã nhập và thêm các biểu tượng đó vào thư viện một cách rõ ràng hoặc tải một gói biểu tượng từ bên ngoài. Xem các phần trên để biết chi tiết
Lưu ý rằng kích thước biểu tượng có thể được kiểm soát bằng thuộc tính CSS faCoffee
5 và giá trị faCoffee
7 của --dev
4 xác định kích thước biểu tượng tương ứng với faCoffee
5 hiện tại
nghịch đảo
Lật theo chiều ngang, chiều dọc hoặc cả hai
Tự thêm lớp học
Bạn có thể thêm các lớp cho mục đích dự án của riêng mình và tạo kiểu cho bất kỳ thành phần nào bằng cách sử dụng thuộc tính faCoffee
9
Kiểm tra đơn vị
Khi kiểm tra các thành phần, bạn sẽ muốn đảm bảo rằng mọi biểu tượng được tham chiếu trong các thành phần đó đều khả dụng cho mục đích thử nghiệm. Bạn có một vài lựa chọn ở đây
Nếu bạn muốn tự kiểm tra một thành phần con, bạn có thể nhập các biểu tượng của nó một cách rõ ràng
Thay vào đó, nếu bạn đã xây dựng một thư viện và thử nghiệm của bạn không bao gồm thành phần gốc xác định thư viện biểu tượng của bạn, thì bạn có thể thấy các lỗi như thế này
Nếu điều này xảy ra và biểu tượng không quan trọng đối với bài kiểm tra cụ thể, bạn có thể thử nghiệm --dev
4 như thế này
Với ứng dụng tạo-phản ứng [mở cửa sổ mới], bạn có thể đặt mã này vào @fortawesome/free-solid-svg-icons
1 để tự động đưa mã vào bất kỳ thử nghiệm nào và giảm bớt lỗi
Xử lý @fortawesome/free-solid-svg-icons
2Elements thành SVG bằng Font Awesome
Hy vọng và ý định của chúng tôi là người dùng React sẽ sử dụng gói này [@fortawesome/free-solid-svg-icons
3] khi sử dụng Font Awesome. Thành phần này tận dụng kiến trúc và triết lý của React. Nếu bạn không thể sử dụng các thành phần này ở mọi nơi trong ứng dụng của mình và vẫn có @fortawesome/free-solid-svg-icons
2thẻ trên trang của bạn cần được chuyển đổi thành @fortawesome/free-solid-svg-icons
2 thẻ, chúng tôi vẫn có thể giúp bạn
Bản cài đặt cơ bản của Font Awesome có khả năng tự động chuyển đổi các biểu tượng @fortawesome/free-solid-svg-icons
2 thành @fortawesome/free-solid-svg-icons
7. Công nghệ này hoạt động với DOM của trình duyệt, @fortawesome/free-solid-svg-icons
8 [mở cửa sổ mới] và @fortawesome/free-solid-svg-icons
9 [mở cửa sổ mới]
Khi sử dụng gói icon
0, hành vi này bị tắt theo mặc định. [Chúng tôi thực sự khuyên bạn nên sử dụng --dev
4 nếu có thể] Dự án này sử dụng gói cốt lõi đó, vì vậy bạn sẽ phải kích hoạt nó một cách rõ ràng như thế này
Để định cấu hình thư viện lõi để chuyển đổi các phần không được Phản ứng hóa trong Ứng dụng của bạn
bản đánh máy
Typings được bao gồm trong gói này. Tuy nhiên, hầu hết các loại được xác định trong thư viện API cơ bản, icon
0. Giả sử rằng trong một mô-đun, bạn thêm tất cả --dev
6 biểu tượng vào thư viện
Sau đó, giả sử rằng trong một mô-đun khác, bạn có một số mã tra cứu một trong các biểu tượng trong thư viện. Câu lệnh icon
4 bên dưới nhập hai loại và một hàm
Chỉ dành cho mục đích demo
Thông thường bạn sẽ không khai báo các đối tượng trung gian như icon
5 chỉ để tra cứu một biểu tượng. Vì vậy, điều này là rườm rà và dài dòng không cần thiết cho một ví dụ đơn giản như vậy. Mục đích ở đây chỉ là để chỉ ra cách bạn có thể nhập các định nghĩa kiểu và sử dụng chúng trong các khai báo khi thực sự cần thiết.
Một số loại, bao gồm icon
6 và icon
7, xuất hiện ở trên, thực sự có nguồn gốc từ gói icon
8. Chúng được tái xuất từ cả icon
0 và @fortawesome/free-solid-svg-icons
[và các gói biểu tượng khác]. Điều này chỉ để làm cho việc nhập thuận tiện hơn trong một số trường hợp. Tham khảo @fortawesome/free-solid-svg-icons
1 trong bất kỳ mô-đun nào để xem nó xuất loại nào
Tiếp theo. js
Thành phần @fortawesome/free-solid-svg-icons
3 tích hợp tốt với Next. js nhưng có một lưu ý bạn cần giải quyết
kể từ tiếp theo. js quản lý CSS khác với hầu hết các dự án web nếu bạn chỉ làm theo tài liệu đơn giản để tích hợp @fortawesome/free-solid-svg-icons
3 vào dự án của mình, bạn sẽ thấy các biểu tượng lớn vì chúng thiếu CSS đi kèm khiến chúng hoạt động
Bắt Font Awesome CSS hoạt động
Giả sử rằng bạn có một bản cài đặt tiêu chuẩn và @fortawesome/free-solid-svg-icons
4 nằm trong thư mục gốc
Để làm điều này, bạn sẽ bắt đầu bằng cách tạo một @fortawesome/free-solid-svg-icons
5. Nếu bạn đã có, bạn có thể sửa đổi nó để nó bao gồm các bit bổ sung mà bạn cần
Bạn cũng nên [kiểm tra phần Tiếp theo. js về cách tạo 'Ứng dụng' tùy chỉnh [mở cửa sổ mới]. Có khả năng một cái gì đó đã thay đổi với dự án đó và phần @fortawesome/free-solid-svg-icons
6 cần phải thay đổi
Tiếp theo. js cho phép bạn nhập CSS trực tiếp vào tệp @fortawesome/free-solid-svg-icons
7. Nó xử lý tối ưu hóa và tất cả cấu hình Webpack cần thiết để thực hiện công việc này
Bạn thay đổi giá trị cấu hình này thành @fortawesome/free-solid-svg-icons
8 để thư viện SVG lõi Font Awesome không thử và chèn @fortawesome/free-solid-svg-icons
2