Dễ dàng chuyển đổi tệp SVG sang JSX

Chuyển mã SVG thành component hàm React: SVGO tối ưu SVG trong trình duyệt của bạn, sau đó SVGR chuyển đổi ngay trong trình duyệt. Các thuộc tính được đổi sang camelCase (stroke-width thành strokeWidth), kích thước dạng số trở thành số và {...props} được trải trên phần tử gốc <svg>.

Chuyển biểu tượng xuất từ Figma hoặc Illustrator thành component React.

SVG

Tính năng tối ưu hóa SVGO đang bật.

Kết quả

JSX

Khi nào nên sử dụng

Chuyển biểu tượng xuất từ Figma hoặc Illustrator thành component React.
Kiểm tra cách SVGR viết lại SVG trước khi thêm SVGR vào quy trình build.

Cách sử dụng

Dán mã SVG hoặc tải tệp .svg lên; đầu vào SVG không hợp lệ sẽ bị từ chối và báo lỗi.
Mở Cài đặt để tắt tối ưu hóa SVGO hoặc bật/tắt các plugin như xóa tiêu đề hay gộp đường vẽ; phần xem trước bên dưới trình soạn thảo so sánh SVG gốc và SVG đã tối ưu.
Sao chép component và đổi tên SvgComponent; truyền className, width hoặc fill qua props.

SVG

<!-- Generator: Adobe Illustrator -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
  <title>Minus</title>
  <path fill="none" stroke="currentColor" stroke-width="2.000" stroke-linecap="round" d="M5.000 12.000 L19.000 12.000"/>
</svg>

Component React (JSX)

import * as React from "react"
const SvgComponent = (props) => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width={24}
    height={24}
    viewBox="0 0 24 24"
    {...props}
  >
    <path
      fill="none"
      stroke="currentColor"
      strokeLinecap="round"
      strokeWidth={2}
      d="M5 12h14"
    />
  </svg>
)
export default SvgComponent

Chi tiết và giới hạn

SVGO và SVGR chạy ngay trong trình duyệt của bạn. Mã SVG không được tải lên máy chủ chuyển đổi.

Với cài đặt mặc định, chú thích, <title>, <desc> và siêu dữ liệu của trình biên tập bị xóa, còn dữ liệu đường vẽ được rút gọn (M5.000 12.000 L19.000 12.000 trở thành M5 12h14). Tắt tối ưu hóa để chuyển đổi SVG đúng như bản đã dán.

Chuỗi style trở thành đối tượng style và class trở thành className.

Đầu ra dành cho React DOM; hãy dùng công cụ SVG sang React Native cho react-native-svg.

FAQ

Tại sao phần tử gốc vẫn giữ width và height?

Tùy chọn xóa kích thước đang tắt trong cài đặt SVGO và SVGR dùng các tùy chọn mặc định, nên kích thước được giữ dưới dạng số (width={24}). Hãy ghi đè qua props, vì {...props} nằm sau các thuộc tính này.

fill="currentColor" có cho phép tôi đặt màu bằng CSS không?

Có. currentColor được giữ lại, nên biểu tượng dùng màu CSS của phần tử cha. Các màu được gán cố định trong đường vẽ không bị thay thế.

Tại sao component của tôi thiếu <title>?

Tùy chọn xóa tiêu đề của SVGO được bật mặc định. Hãy tắt tùy chọn này trong Cài đặt hoặc tắt toàn bộ tối ưu hóa nếu bạn cần <title> để hỗ trợ khả năng tiếp cận.

Có đầu ra TypeScript không?

Không. Trang xuất component JavaScript không có chú thích kiểu.

Đặc tả và tài liệu tham khảo

Tài liệu SVGR