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

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--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ất

Sử 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ẻ, faCheckSquarefaCoffee. Chúng tôi cũng thêm tất cả các thương hiệu vào --save-dev1 để 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-dev2, bạn đang vượt qua

  • --save-dev3. đại diện cho tất cả các biểu tượng thương hiệu trong --save-dev1. 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-dev5, --save-dev6 hoặc --save-dev7
  • faCheckSquarefaCoffee. 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à --dev0 và --dev1

Ứng dụng của chúng tôi cũng có các thành phần React, --dev2 và --dev3. 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 --dev4 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, --dev5

Đứ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ố --dev6 (đối với Font Awesome Solid) đang được coi là mặc định

Và đây là thành phần --dev7

  • Chúng tôi đã sử dụng lại tên biểu tượng --dev0 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 trong App.js của chúng tôi
  • Biểu tượng --dev0 cũng có tiền tố mặc định là --dev6 ở đâ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-dev5, --save-dev6 và --save-dev7, 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 trong App.js--save-dev3 bao gồm tất cả các biểu tượng đó
  • Chúng tôi đã thêm tiền tố kiểu --save-dev3 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ư faCoffee1
  • Nó có thể là một đối tượng chuỗi, như --dev1. (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 faCoffee3 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. faCoffee4

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 faCoffee5 và giá trị faCoffee7 của --dev4 xác định kích thước biểu tượng tương ứng với faCoffee5 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 faCoffee9


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

  1. 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

  2. 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 --dev4 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-icons1 để 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-icons2Elements 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-icons3) 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-icons2thẻ trên trang của bạn cần được chuyển đổi thành @fortawesome/free-solid-svg-icons2 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-icons2 thành @fortawesome/free-solid-svg-icons7. Công nghệ này hoạt động với DOM của trình duyệt, @fortawesome/free-solid-svg-icons8 (mở cửa sổ mới) và @fortawesome/free-solid-svg-icons9 (mở cửa sổ mới)

Khi sử dụng gói icon0, 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 --dev4 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, icon0. Giả sử rằng trong một mô-đun, bạn thêm tất cả --dev6 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 icon4 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ư icon5 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 icon6 và icon7, xuất hiện ở trên, thực sự có nguồn gốc từ gói icon8. Chúng được tái xuất từ ​​cả icon0 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-icons1 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-icons3 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-icons3 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-icons4 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-icons5. 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-icons6 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-icons7. 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-icons8 để thư viện SVG lõi Font Awesome không thử và chèn @fortawesome/free-solid-svg-icons2