Chuyển đổi SVG sang React Component

Dán mã SVG, nhận ngay component React/TSX có kiểu dữ liệu đầy đủ — xử lý hoàn toàn trên trình duyệt.

Tên Component

Mã SVG đầu vào

Hoặc kéo-thả tệp .svg vào đây

Icon.tsx
import type { SVGProps } from "react";

export interface IconProps extends SVGProps<SVGSVGElement> {}

export function Icon(props: IconProps) {
  return (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
      <path d="M12 2l9 4.5v9L12 22l-9-4.5v-9L12 2z" />
      <path d="M12 8v8" />
      <path d="M8 10l4-2 4 2" />
    </svg>
  );
}

export default Icon;
5 dòngĐã chuyển đổi
FAQ
Nhóm Thiết kế (Design)•Tài liệu kỹ thuật & Đặc tả RFC

Tài liệu & Hướng dẫn chuyên sâu: Chuyển đổi SVG sang React Component (SVG to TSX)

1. Tổng quan & Nguyên lý hoạt động

Khi dán trực tiếp một file SVG (xuất từ Figma, Illustrator hoặc tải từ thư viện icon) vào JSX, trình biên dịch sẽ báo lỗi ngay vì SVG dùng cú pháp HTML/XML thuần (`class`, `stroke-width`, `fill-rule`...) trong khi JSX bắt buộc camelCase (`className`, `strokeWidth`, `fillRule`). Việc tự tay đổi từng thuộc tính, bọc component, thêm kiểu dữ liệu props và loại bỏ `xmlns` thừa là thao tác lặp đi lặp lại trong mọi dự án React. Công cụ Chuyển đổi SVG sang React Component của Verdbench tự động hoá toàn bộ quy trình này bằng một trình phân tích XML nhẹ tự viết (không phụ thuộc DOMParser hay @svgr/core bản đầy đủ của Node.js), đảm bảo chạy mượt 100% trên trình duyệt: dán mã SVG, chọn các tuỳ chọn (TypeScript, React Native, tên component), nhận ngay component `.tsx` sẵn sàng dùng, có thể sao chép hoặc tải về.

2. Ưu thế kiến trúc & Tính năng nổi bật

Chuyển đổi thuộc tính HTML/XML sang JSX chuẩn

Tự động đổi hơn 70 thuộc tính SVG kinh điển (class → className, stroke-width → strokeWidth, fill-rule → fillRule, xlink:href → xlinkHref hoặc href...) và chuyển `style="..."` dạng chuỗi CSS sang object literal `style={{ ... }}` hợp lệ trong JSX.

Xuất component dùng được ngay, có kiểu dữ liệu

Tick "TypeScript" để sinh thêm interface props mở rộng từ SVGProps<SVGSVGElement> (hoặc SvgProps nếu chọn React Native), và phần tử gốc luôn được gắn `{...props}` để component nhận mọi prop tuỳ chỉnh từ nơi gọi (ghi đè width, className, onClick...).

Hỗ trợ cả web lẫn React Native

Tick "React Native" để đổi toàn bộ thẻ sang các component tương ứng của react-native-svg (svg→Svg, path→Path, circle→Circle...) và tự sinh đúng câu lệnh import chỉ gồm những thẻ thực sự được dùng trong file SVG đó.

3. Bảng quy đổi thuộc tính SVG → JSX thường gặp

Một số thuộc tính HTML/SVG kinh điển hay gây lỗi "Unknown DOM property" nhất khi dán thẳng vào JSX mà chưa đổi tên:

Thuộc tính SVGTên JSX tương ứngGhi chú
classclassNameGiống hệt quy tắc chuyển đổi của JSX cho thẻ HTML thường
stroke-widthstrokeWidthMọi thuộc tính presentation có dấu gạch ngang đều chuyển thành camelCase
fill-rule / clip-rulefillRule / clipRuleThường gặp ở icon dùng kỹ thuật cắt hình (clip path)
xlink:hrefxlinkHref (hoặc href nếu xoá xmlns)Thuộc tính có namespace — React map thành một từ camelCase duy nhất
style="fill:red"style={{ fill: "red" }}Chuỗi CSS inline phải chuyển thành object literal, không giữ dạng chuỗi

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

Giải đáp các thắc mắc phổ biến của lập trình viên khi sử dụng tiện ích Chuyển đổi SVG sang React Component (SVG to TSX).

Vì Verdbench render trước (pre-render) nhiều trang ở phía server khi build để tối ưu SEO, mà DOMParser chỉ tồn tại trong môi trường trình duyệt — gọi nó lúc build sẽ làm quá trình build thất bại. Công cụ tự viết một trình quét chuỗi (regex-based tokenizer) hoạt động giống nhau ở cả server lẫn trình duyệt, vừa an toàn cho build vừa tránh phải tải thêm thư viện XML parser nặng.

5. Công cụ liên quan