Về công cụ này
Công cụ SVG sang thành phần JSX chuyển markup SVG thô thành một thành phần React sạch, theo cách SVGR làm, nhưng hoàn toàn trong trình duyệt của bạn với không có gì được tải lên. Dán một icon được export từ một công cụ thiết kế và nhận một thành phần bạn có thể import và tạo kiểu. Nó phân tích SVG bằng DOMParser và báo một lỗi rõ ràng nếu markup sai định dạng.
Mọi thuộc tính SVG có gạch nối hoặc có namespace được camelCase sang tên React của nó — stroke-width sang strokeWidth, fill-rule sang fillRule, clip-path sang clipPath, stop-color sang stopColor, xlink:href sang xlinkHref, xmlns:xlink sang xmlnsXlink — trong khi các thuộc tính data-* và aria-* được để nguyên. Các chuỗi inline style trở thành đối tượng style, các phần tử rỗng như path và circle được tự đóng, và các prop được spread lên gốc <svg {...props}> để thành phần luôn cấu hình được. Các công tắc tùy chọn cho phép bạn thay các giá trị fill và stroke cứng bằng currentColor (để icon kế thừa màu văn bản), loại bỏ width và height để nó co giãn theo vùng chứa, và bọc thành phần với forwardRef để lộ nút <svg> bên dưới.
Chọn output JavaScript hoặc TypeScript: biến thể TypeScript định kiểu prop là React.SVGProps<SVGSVGElement> và, với forwardRef bật, dùng forwardRef<SVGSVGElement, React.SVGProps<SVGSVGElement>>. Thành phần được phát ra như một hàm mũi tên được export (export const Icon = (props) => (...)), với tên và thụt lề bạn chọn, sẵn sàng dán vào một module icon.