Trình chuyển đổi SVG sang JSX

Trình chuyển đổi SVG sang JSX là gì?

Trình chuyển đổi SVG sang JSX là một công cụ miễn phí trong trình duyệt, biến mã đánh dấu SVG thông thường thành React JSX hợp lệ mà bạn có thể dán thẳng vào một thành phần. React mong đợi các thuộc tính DOM ở dạng camelCase (strokeWidth, clipPath, fillRule), dùng className thay cho class và cần thuộc tính style là một đối tượng gồm các thuộc tính camelCase thay vì một chuỗi — công cụ này sửa tất cả những điều đó một cách tự động. Các nhà phát triển front-end và nhà thiết kế dùng nó khi xuất biểu tượng từ Figma, Illustrator hoặc một bộ biểu tượng. Bật dọn dẹp tùy chọn để loại bỏ chú thích, siêu dữ liệu của trình chỉnh sửa và khai báo XML, rồi chọn đầu ra là JSX nội tuyến hay một thành phần hàm, memo() hoặc forwardRef được gán kiểu bằng React.SVGProps.

Cách sử dụng Trình chuyển đổi SVG sang JSX

1. Dán mã đánh dấu SVG của bạn vào ô nhập, hoặc thả một tệp .svg vào vùng thả.
2. Đọc JSX đã chuyển đổi trong ô đầu ra — các thuộc tính ở dạng camelCase, class thành className, một style nội tuyến thành đối tượng style, và các thẻ rỗng tự đóng.
3. Mở Cài đặt và chọn Đầu ra thành phần: JSX nội tuyến, một thành phần hàm, một thành phần memo() hoặc một thành phần forwardRef.
4. Đặt trường Tên thành phần để kiểm soát tên dùng trong lớp bọc (ví dụ MyIcon).
5. Bật Props TypeScript để gán kiểu cho thành phần bằng React.SVGProps, hoặc bật Dọn dẹp SVG để loại bỏ chú thích và siêu dữ liệu của trình chỉnh sửa trước.
6. Nhấp Sao chép để sao chép JSX, rồi dán nó vào dự án React hoặc Next.js của bạn.

Ví dụ

<svg viewBox="0 0 24 24"><path stroke-width="2" style="fill:none;stroke-linecap:round" d="M4 12h16"/></svg>

<svg viewBox="0 0 24 24"><path strokeWidth="2" style={{ fill: "none", strokeLinecap: "round" }} d="M4 12h16" /></svg>

<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/></svg>

export const MyIcon = React.forwardRef<SVGSVGElement, React.SVGProps<SVGSVGElement>>(function MyIcon(props, ref) {
  return (
    <svg viewBox="0 0 24 24" ref={ref} {...props}><circle cx="12" cy="12" r="10" /></svg>
  );
});

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

Trình chuyển đổi thay đổi gì trong SVG của tôi?

Nó đổi tên các thuộc tính có gạch nối và có không gian tên sang dạng camelCase của React (stroke-width thành strokeWidth, xlink:href thành xlinkHref), biến class thành className, viết lại một chuỗi style nội tuyến thành đối tượng style JSX với khóa camelCase, và tự đóng các phần tử rỗng như path và rect để chúng là JSX hợp lệ.

Các tùy chọn đầu ra thành phần hoạt động thế nào?

Chọn JSX nội tuyến để đặt mã đánh dấu ở bất cứ đâu, hoặc bọc nó thành thành phần hàm, memo() hoặc forwardRef bằng Tên thành phần bạn nhập. Một thành phần forwardRef nhận một ref được gắn vào svg gốc. Bật Props TypeScript để gán kiểu cho bất kỳ lớp bọc nào bằng React.SVGProps và trải {...props}.

Nó có chuyển đổi kiểu nội tuyến không?

Có. Một thuộc tính style="fill:red;stroke-width:2" được viết lại thành đối tượng style JSX như style={{ fill: "red", strokeWidth: "2" }}, với tên thuộc tính ở dạng camelCase và giá trị giữ nguyên là chuỗi. Các thuộc tính tùy chỉnh CSS (--var) được giữ làm khóa chuỗi.

Dọn dẹp kiểu SVGO làm gì?

Khi Dọn dẹp SVG được bật, công cụ loại bỏ khai báo XML, DOCTYPE, chú thích, <metadata>, các không gian tên của trình chỉnh sửa như inkscape: và sodipodi:, và thuộc tính version của svg, rồi thu gọn khoảng trắng — tất cả trước khi việc chuyển đổi JSX chạy.

SVG của tôi có được tải lên đâu đó không?

Không. Thả một tệp hoặc dán mã đánh dấu chạy một phép biến đổi chuỗi thuần túy hoàn toàn trong trình duyệt của bạn, nên SVG của bạn không bao giờ được gửi tới máy chủ và công cụ hoạt động ngoại tuyến.