Chuyển đổi SVG sang JSX

Vì sao cần chuyển SVG sang React

SVG là XML, còn JSX là JavaScript trông giống HTML. Dán SVG thô trực tiếp vào React component thường gây ra cảnh báo như “Invalid DOM property stroke-width. Did you mean strokeWidth?” hoặc lỗi build với các thuộc tính có namespace như xlink:href và inkscape:label. Công cụ này viết lại mã thành JSX hợp lệ và bọc trong một component.

Những gì được chuyển đổi

Làm icon linh hoạt hơn

Khi bật Spread props, component sẽ kết thúc bằng {...props} trên thẻ <svg>, nhờ đó bạn có thể truyền className, width, aria-label hoặc event handler: <HeartIcon className="h-6 w-6" />. Xóa width/height cho phép CSS quyết định kích thước icon (nếu thiếu, viewBox sẽ được thêm từ kích thước cũ). Màu → currentColor thay thế màu fill và stroke để icon kế thừa màu chữ, rất phù hợp với bộ icon một màu. Tùy chọn TypeScript sẽ khai báo kiểu props là SVGProps<SVGSVGElement>.

Khả năng truy cập

Với icon trang trí đi kèm văn bản, hãy thêm aria-hidden="true". Với icon có ý nghĩa đứng riêng, hãy giữ lại thẻ <title> hoặc truyền role="img" kèm aria-label.

Quyền riêng tư và an toàn

Quá trình chuyển đổi chạy hoàn toàn trên trình duyệt của bạn, SVG không bao giờ rời khỏi thiết bị. Bản xem trước đã được làm sạch: script, foreignObject, inline event handler và tham chiếu bên ngoài đều bị loại bỏ trước khi hiển thị. Bạn đang làm quy trình dựa trên bundle? Các công cụ như SVGR làm việc tương tự ở bước build; trang này dành cho những icon cần chuyển nhanh, một lần. Nếu muốn dùng SVG làm nền CSS, hãy thử SVG sang CSS.

Cũng được tìm dưới tên: svg sang react, svg sang tsx, react svg component, svgr online, chuyển svg sang react, jsx converter, svg icon react, classname.

Các công cụ dùng kèm tốt với SVG sang JSX

• Chuyển HTML sang Markdown — Dán HTML — hoặc sao chép trực tiếp văn bản rich text từ trang web, Google Doc hay email — rồi nhận Markdown gọn gàng để đưa vào README, wiki hoặc static site.
• JSON sang TypeScript — Dán một mẫu JSON như phản hồi API hay file cấu hình, bạn sẽ nhận ngay các TypeScript interface sẵn sàng dùng, với kiểu lồng nhau, thuộc tính optional và union type.
• Ảnh sang Base64 — Chuyển PNG, JPEG, SVG, WebP hoặc GIF thành Base64 data URI với mã CSS và HTML sẵn sàng sao chép, hoặc dán chuỗi Base64 để xem trước và tải ảnh về.
• Định dạng HTML — Dán mã HTML đã nén hoặc lộn xộn và nhận lại HTML được thụt lề rõ ràng, nhất quán — bao gồm cả các khối <style> và <script> nhúng bên trong.