Chuyển dữ liệu dạng SVG thành dữ liệu dạng Jsx

Chuyển đổi đánh dấu SVG thô thành một component React sẵn sàng để dán. Nó viết lại các thuộc tính SVG thành props camelCase tương thích với React (class thành className, stroke-width thành strokeWidth, xlink:href thành xlinkHref và nhiều thuộc tính khác), chuyển đổi chuỗi kiểu nội tuyến thành các đối tượng kiểu React, tự đóng các phần tử void và hình SVG, đồng thời loại bỏ không gian tên mặc định xmlns="http://www.w3.org/2000/svg".

1. Dán đánh dấu SVG của bạn (phải chứa <svg> và </svg>) vào ô nhập liệu 2. Bấm Prettify để tự động thụt lề đánh dấu trước khi chuyển đổi (tùy chọn) 3. Đặt Tên Component (mặc định là SvgComponent, chỉ cho phép ký tự chữ và số cùng dấu gạch dưới) 4. Bật/tắt chỉ thị "use client" và/hoặc hook useMemo khi cần 5. Bấm Convert để tạo component JSX và sao chép vào clipboard

Trường Tên Component điều khiển định danh được xuất. Khi ô "use client" được bật, đầu ra sẽ có tiền tố "use client" trên một dòng riêng và được xuất mặc định không có props; nếu không, nó được xuất dưới dạng const có tên chấp nhận props và trả về svg. Khi useMemo được bật, đánh dấu SVG được bao bọc trong useMemo(() => (...), []). Đầu vào phải chứa cả <svg và </svg>, nếu không quá trình chuyển đổi sẽ bị từ chối với lỗi SVG không hợp lệ.