Bộ chuyển đổi SVG sang React/JSX
Chuyển đổi các tệp SVG được dán hoặc tải lên thành các thành phần React JSX sạch sẽ với các thuộc tính dạng camelCase, thuộc tính TypeScript tùy chọn, forwardRef, React.memo, khả năng tiếp cận tiêu đề, chuyển đổi đối tượng style và đầu ra được làm sạch.
Trình chặn quảng cáo đang ngăn chúng tôi hiển thị quảng cáo
MiniWebtool miễn phí nhờ quảng cáo. Nếu công cụ này hữu ích, hãy ủng hộ bằng Premium (không quảng cáo + nhanh hơn) hoặc cho phép MiniWebtool.com rồi tải lại trang.
- Hoặc nâng cấp Premium (không quảng cáo)
- Cho phép quảng cáo cho MiniWebtool.com, rồi tải lại
Giới thiệu về 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
- 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.
- Đặ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.
- 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.
- 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.
- 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ý
stroke-width, fill-rule, và clip-path được viết lại thành strokeWidth, fillRule, và clipPath.{...props}, forwardRef, React.memo, export mặc định, export có tên, và thuộc tính TypeScript props giúp mã đầu ra dễ dàng được tích hợp vào mã nguồn React.javascript: theo mặc định để mã JSX được tạo ra an toàn hơn khi kiểm tra trước khi sử dụng.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ệ.
Tham khảo nội dung, trang hoặc công cụ này như sau:
"Bộ chuyển đổi SVG sang React/JSX" tại https://MiniWebtool.com/vi// từ MiniWebtool, https://MiniWebtool.com/
bởi đội ngũ miniwebtool. Cập nhật ngày: 2026-05-22