Nhập svg sang html
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 Show
Trước khi bạn bắt đầuHã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 Thêm kiểu bổ sungNế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 Sử dụng biểu tượngKhi 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ânMộ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 Ngoài ra, đối với ví dụ trên, chúng tôi đang tham khảo mô-đun Sử dụng Biểu tượng thông qua Sử dụng Toàn cầuBạ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 Trong cuộc gọi của chúng tôi tới
Ứng dụng của chúng tôi cũng có các thành phần React, Đứ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ố Và đây là thành phần
Cú pháp biểu tượngNhư 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 Prop
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ưngTấ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 nghịch đảoLật theo chiều ngang, chiều dọc hoặc cả haiTự thêm lớp họcBạ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 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 đ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 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 Xử lý @fortawesome/free-solid-svg-icons2Elements thành SVG bằng Font AwesomeHy vọng và ý định của chúng tôi là người dùng React sẽ sử dụng gói này ( 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 Khi sử dụng gói Để đị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áyTypings đượ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, 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 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ư Một số loại, bao gồm Tiếp theo. jsThành phần 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 Bắt Font Awesome CSS hoạt độngGiả sử rằng bạn có một bản cài đặt tiêu chuẩn và Để làm điều này, bạn sẽ bắt đầu bằng cách tạo một 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 Tiếp theo. js cho phép bạn nhập CSS trực tiếp vào tệp Bạn thay đổi giá trị cấu hình này thành |