Công cụ dành cho nhà phát triển / 26

Bộ chuyển đổi SVG sang JSX / TSX cho React

Chuyển mã đánh dấu SVG vector thành mã React JSX hoặc TypeScript TSX sạch, được tổ chức thành các component.

Bộ chuyển đổi SVG sang JSX / TSX cho React: TOEA chuyển các thuộc tính dạng kebab-case của SVG sang camelCase của React, chuyển các kiểu nội tuyến thành đối tượng JavaScript và bọc phần tử SVG. Chạy 100% cục bộ trong trình duyệt của bạn, không có tệp nào được tải lên máy chủ.

Danh mục: Công cụ lập trình viên
Lượt chạy: Trong trình duyệt của bạn
Chi phí: Miễn phí · không cần đăng ký
Trạng thái khả dụng: Sẵn sàng sử dụng

Tên component

TypeScript (React.FC & SVGProps)

Truyền tiếp props ({...props})

Đầu vào mã đánh dấu SVG thô

Component React JSX / TSX

import React from "react";

export const CheckIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="feather feather-check" {...props}>
  <polyline points="20 6 9 17 4 12"></polyline>
</svg>
);

Khiến biểu tượng hoạt động như văn bản

Một thành phần biểu tượng dễ tái sử dụng nhất khi lấy màu và kích thước từ nơi nó được đặt. Thay màu fill hoặc stroke được ghi cố định bằng currentColor để biểu tượng theo màu văn bản xung quanh, đồng thời xóa width và height nhưng giữ viewBox, để CSS hoặc className đặt kích thước. Trước tiên, hãy chạy tệp qua trình làm sạch SVG để loại bỏ siêu dữ liệu của trình chỉnh sửa, vốn nếu không sẽ đi vào gói của bạn.

ID, kiểu và khả năng truy cập

Các chuyển màu, mặt nạ và đường cắt được tham chiếu bằng id. Nếu kết xuất cùng một thành phần hai lần, trang sẽ có các ID trùng nhau, nên bản sao thứ hai có thể trỏ đến chuyển màu của bản sao thứ nhất. Hãy tạo ID duy nhất bằng useId của React khi biểu tượng sử dụng chúng.

Phần tử <style> bên trong SVG làm hỏng JSX vì dấu ngoặc nhọn của nó được đọc dưới dạng biểu thức; hãy chuyển các quy tắc đó vào thuộc tính hoặc biểu định kiểu. Với biểu tượng trang trí, hãy thêm aria-hidden="true"; với biểu tượng mang ý nghĩa, hãy thêm role="img" và một <title>.

Cách sử dụng

Dán mã đánh dấu SVG thô.
Cấu hình tên component, giao diện TypeScript và việc chuyển tiếp prop.
Sao chép mã component React sẵn sàng để sử dụng.

Quyền riêng tư và giới hạn

Việc chuyển đổi mã đánh dấu được thực hiện hoàn toàn trong JavaScript phía máy khách.

Công cụ liên quan

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

Công cụ có hỗ trợ TypeScript không?

Có, công cụ tạo các component React được định kiểu đầy đủ theo dạng React.FC<React.SVGProps<SVGSVGElement>>.

Công cụ miễn phí · trong trình duyệt của bạn lượt chạy · không cần tài khoản