Bộ chuyển đổi SVG sang React/JSX

Bộ chuyển đổi SVG sang React/JSX giúp chuyển đổi các tệp SVG thô thành các thành phần React có thể tái sử dụng. Nó được xây dựng cho các nhà phát triển cần các thành phần biểu tượng, nhãn hiệu, hình minh họa sản phẩm và tài sản hệ thống thiết kế sạch sẽ hơn mà không cần phải sửa đổi từng thuộc tính SVG một cách thủ công. Hãy dán mã đánh dấu SVG hoặc tải lên tệp .svg định dạng UTF-8, chọn các tùy chọn React bạn cần, sau đó sao chép thành phần đã được tạo vào dự án của bạn.

Cách Sử dụng

1. Dán hoặc tải lên SVG. Dán toàn bộ tệp SVG vào trình biên tập hoặc tải lên tệp .svg định dạng UTF-8.
2. Đặt tên cho thành phần. Nhập tên thành phần React theo định dạng PascalCase, ví dụ như AlertIcon hoặc BrandMark.
3. Chọn các tùy chọn React. Chọn TypeScript, forwardRef, React.memo, khả năng truy cập tiêu đề, chuyển đổi style, khử độc và các tùy chọn rải thuộc tính prop spreading.
4. Chuyển đổi sang JSX. Nhập vào Chuyển đổi thành Thành phần React để tạo mã JSX sẵn sàng sao chép.
5. Xem lại và sao chép. Xem lại bản tóm tắt chuyển đổi, các cảnh báo và mã được tạo trước khi sao chép vào dự án React của bạn.

Những gì Bộ chuyển đổi Xử lý

Mẹo để có các Thành phần React SVG Tốt hơn

Giữ lại thuộc tính viewBox gốc bất cứ khi nào có thể, vì nó kiểm soát cách SVG co giãn. Đối với hệ thống biểu tượng, width="1em" và height="1em" cho phép biểu tượng kế thừa kích thước văn bản trong khi vẫn cho phép bên gọi ghi đè kích thước bằng props. Sử dụng tên thành phần dạng PascalCase có tính mô tả rõ ràng, giữ cho các SVG mang tính trang trí có thể truy cập được bằng aria-hidden khi thích hợp, và sử dụng thuộc tính title prop cho các biểu tượng có ý nghĩa truyền tải thông tin.

Câu hỏi thường gặp (FAQ)

Bộ chuyển đổi SVG sang React này thay đổi những gì?

Nó phân tích cú pháp SVG XML và viết lại các thuộc tính SVG thành JSX thân thiện với React, bao gồm className, các thuộc tính SVG dạng camelCase, các đối tượng style tùy chọn, props, forwardRef, khả năng truy cập tiêu đề và cú pháp export.

Tôi có thể tải lên tệp SVG không?

Có. Bạn có thể tải lên tệp .svg định dạng UTF-8 hoặc dán mã đánh dấu SVG. Các tệp tải lên được đọc dưới dạng văn bản và được chuyển đổi thành JSX trên máy chủ.

Nó có khử độc mã SVG không?

Tính năng khử độc được bật theo mặc định. Bộ chuyển đổi sẽ loại bỏ các thẻ script, trình xử lý sự kiện nội dòng và các liên kết javascript: để thành phần được tạo ra an toàn hơn khi xem lại trước khi sử dụng.

Tại sao lại chuyển đổi các thuộc tính style thành đối tượng?

React yêu cầu thuộc tính style prop phải là một đối tượng khi viết JSX. Việc chuyển đổi các chuỗi style thành đối tượng giúp đầu ra biên dịch sạch sẽ và giữ cho các tên thuộc tính CSS ở dạng camelCase.

Định dạng tên thành phần nào là tốt nhất?

Sử dụng PascalCase chẳng hạn như AlertIcon hoặc BrandMark. Bộ chuyển đổi sẽ xóa các ký tự không hợp lệ và đảm bảo kết quả bắt đầu bằng một định danh thành phần React hợp lệ.