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

Dán markup SVG để chuyển thành JSX có thể đưa thẳng vào component React. Công cụ sẽ đổi thuộc tính sang camelCase (class→className), chuyển chuỗi style thành object và loại bỏ comment cùng DOCTYPE.

Đầu vào SVG

JSX React đầu ra

Thêm công cụ dành cho nhà phát triển

🎨 Trình biên dịch LESS sang CSS 🖼️ Trình chuyển đổi ảnh Base64 🔠 Trình chuyển đổi chữ hoa/chữ thường

HƯỚNG DẪN

Tìm hiểu thêm

1. Vì sao cần chuyển SVG sang JSX

Cú pháp React (JSX) khác HTML/SVG đôi chút. Các thuộc tính có dấu gạch nối (stroke-width) phải chuyển sang camelCase (strokeWidth), class đổi thành className, và style phải là một object JavaScript thay vì chuỗi. Công cụ này tự động xử lý các khác biệt đó, để một biểu tượng SVG do nhà thiết kế xuất ra có thể dán trực tiếp vào component React.

2. Quy tắc chuyển đổi

Công cụ ánh xạ class→className và for→htmlFor, chuyển các thuộc tính có dấu gạch nối như stroke-width và fill-opacity sang camelCase, đổi các thuộc tính có namespace như xlink:href thành xlinkHref, và giữ nguyên các thuộc tính data-/aria-. style="fill:red;stroke-linecap:round" sẽ trở thành object style={{ fill: 'red', strokeLinecap: 'round' }}, còn comment, DOCTYPE và khai báo XML sẽ bị xóa.

3. Chuyển đổi an toàn bằng DOMParser

Thay vì dùng regex, công cụ này phân tích SVG bằng DOMParser tích hợp sẵn của trình duyệt rồi xuất lại, nên cấu trúc lồng nhau và các thuộc tính được xử lý đúng. Mọi thứ chạy ngay trong trình duyệt của bạn và mã không bao giờ được gửi lên máy chủ. Sau khi dán kết quả vào component, bạn có thể tinh chỉnh thêm nếu cần — ví dụ đưa width/height thành props hoặc đổi fill thành "currentColor".

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

Tôi có thể dùng kết quả trực tiếp trong React không?

Có. Dán JSX vào bên trong phần return của component. Bạn cũng có thể đưa kích thước và màu vào props để tái sử dụng tốt hơn.

Chuỗi style cũng được chuyển đổi à?

Có. Một chuỗi như style="a:b;c:d" sẽ thành object style={{ a: 'b', c: 'd' }} với tên thuộc tính CSS được chuyển sang camelCase.

SVG của tôi có được gửi lên máy chủ không?

Không. Việc chuyển đổi diễn ra hoàn toàn trong trình duyệt của bạn và mã không bao giờ được gửi lên máy chủ.

Công cụ có dùng thư viện như svgr không?

Không. Nó được triển khai trực tiếp bằng DOMParser tích hợp sẵn của trình duyệt, không dùng thư viện ngoài.