SVG → React
JSX dán được ngay từ bất kỳ tệp SVG nào — thuộc tính được đổi tên theo cách React cần, props trải lên thẻ gốc, kèm TypeScript nếu bạn cần.
hoặc nhấp để chọn — chỉ nhận SVG
Tên component lấy từ tên tệp, nên arrow-left.svg sẽ thành ArrowLeft.
Cùng component đó, được gán kiểu SVGProps<SVGSVGElement>.
Chỉ phần đánh dấu, để dán vào một component bạn đã có sẵn.
biểu tượng thành component
JSX trông như đánh dấu nhưng thực chất là JavaScript. Các thuộc tính có dấu gạch nối như stroke-width không phải định danh hợp lệ, class trùng với từ khóa dành riêng, còn dấu ngoặc nhọn trong style nội tuyến bị đọc thành biểu thức. Một tệp SVG sao chép thẳng từ phần mềm thiết kế thường không biên dịch nổi vì ít nhất một trong những lý do đó.
Bộ chuyển đổi này chỉ đổi tên những gì buộc phải đổi và để yên phần còn lại. Thuộc tính data- và aria- giữ nguyên dấu gạch nối, vì React chuyển tiếp chúng nguyên vẹn — đổi tên chúng là cách phổ biến khiến bạn mất nhãn trợ năng mà không hay biết.
ba bước
Chọn một tệp .svg — nó vẫn nằm trên thiết bị của bạn.
Component đầy đủ, bản song sinh TypeScript, hoặc JSX trần.
Import như mọi component khác và tạo kiểu bằng props.
giải đáp nhanh
Để những gì bạn truyền vào được ưu tiên. Trong JSX, thuộc tính viết sau ghi đè thuộc tính viết trước, nên khi đặt spread ở cuối, bạn có thể định className, width hay onClick từ bên ngoài. Nếu đặt lên đầu, các giá trị nằm sẵn trong tệp sẽ lặng lẽ ghi đè giá trị của bạn.
Thay giá trị fill hoặc stroke cố định trong kết quả bằng currentColor, rồi đặt màu bằng CSS trên bất kỳ phần tử cha nào. Nếu màu rải rác ở nhiều nút, hãy cho tệp qua công cụ đổi màu SVG trước — nó chuyển tất cả sang currentColor trong một lần.
Không trực tiếp được. React Native không có DOM, nên SVG ở đó cần react-native-svg cùng các tên phần tử viết hoa như Svg và Path. Cách đổi tên thuộc tính trình bày ở đây vẫn đúng, nhưng phần import và thẻ thì khác.
Đó là do tệp nguồn — SVG đã nén vẫn ở dạng nén, vì định dạng lại là việc khác. Hãy cho nó qua công cụ làm đẹp SVG trước, component sẽ ra với phần thụt lề dễ đọc.
Không. Việc chuyển đổi chỉ là xử lý chuỗi ký tự thuần túy diễn ra trong trình duyệt của bạn.