Đơn giản hóa quy trình làm việc của bạn: Tìm kiếm miniwebtool.
Thêm
Công cụ liên quan
Công cụ tối ưu SVGSân chơi TypeScript
Trang chủ > Công cụ quản trị web > Bộ chuyển đổi SVG sang React/JSX
 

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

Chuyển đổi các tệp SVG được dán hoặc tải lên thành các thành phần React JSX sạch sẽ với các thuộc tính dạng camelCase, thuộc tính TypeScript tùy chọn, forwardRef, React.memo, khả năng tiếp cận tiêu đề, chuyển đổi đối tượng style và đầu ra được làm sạch.

Bộ chuyển đổi SVG sang React/JSX
Ví dụ
Sẵn sàng
Dán một phần tử <svg> hoàn chỉnh. Máy chủ chấp nhận tối đa 220000 ký tự.
Tải lên một tệp sẽ điền nội dung vào trình biên tập để xem trước, sau đó tệp đã tải lên sẽ được dùng khi bạn chuyển đổi.
Đầu vào <svg>
Chuẩn hóa camelCase
React {...props}
Đầu ra Thành phần
Phần tử 0
Thuộc tính 0
ViewBox -
Sử dụng dạng PascalCase, ví dụ AlertIcon, BrandMark, hoặc LogoGlyph.
Cài đặt đầu ra

Embed Bộ chuyển đổi SVG sang React/JSX Widget

Giới thiệu về Bộ chuyển đổi SVG sang React/JSX

Bộ chuyển đổi SVG sang React/JSX giúp chuyển đổi các tệp SVG thô thành các thành phần React có thể tái sử dụng. Nó được xây dựng cho các nhà phát triển cần các thành phần biểu tượng, nhãn hiệu, hình minh họa sản phẩm và tài sản hệ thống thiết kế sạch sẽ hơn mà không cần phải sửa đổi từng thuộc tính SVG một cách thủ công. Hãy dán mã đánh dấu SVG hoặc tải lên tệp .svg định dạng UTF-8, chọn các tùy chọn React bạn cần, sau đó sao chép thành phần đã được tạo vào dự án của bạn.

Cách Sử dụng

  1. Dán hoặc tải lên SVG. Dán toàn bộ tệp SVG vào trình biên tập hoặc tải lên tệp .svg định dạng UTF-8.
  2. Đặt tên cho thành phần. Nhập tên thành phần React theo định dạng PascalCase, ví dụ như AlertIcon hoặc BrandMark.
  3. Chọn các tùy chọn React. Chọn TypeScript, forwardRef, React.memo, khả năng truy cập tiêu đề, chuyển đổi style, khử độc và các tùy chọn rải thuộc tính prop spreading.
  4. Chuyển đổi sang JSX. Nhập vào Chuyển đổi thành Thành phần React để tạo mã JSX sẵn sàng sao chép.
  5. Xem lại và sao chép. Xem lại bản tóm tắt chuyển đổi, các cảnh báo và mã được tạo trước khi sao chép vào dự án React của bạn.

Những gì Bộ chuyển đổi Xử lý

Dọn dẹp thuộc tính ReactCác thuộc tính SVG phổ biến như stroke-width, fill-rule, và clip-path được viết lại thành strokeWidth, fillRule, và clipPath.
Tiện ích thành phầnCác tùy chọn như {...props}, forwardRef, React.memo, export mặc định, export có tên, và thuộc tính TypeScript props giúp mã đầu ra dễ dàng được tích hợp vào mã nguồn React.
Xem lại đầu ra an toàn hơnTính năng khử độc loại bỏ các thẻ script, trình xử lý sự kiện nội dòng và các liên kết javascript: theo mặc định để mã JSX được tạo ra an toàn hơn khi kiểm tra trước khi sử dụng.

Mẹo để có các Thành phần React SVG Tốt hơn

Giữ lại thuộc tính viewBox gốc bất cứ khi nào có thể, vì nó kiểm soát cách SVG co giãn. Đối với hệ thống biểu tượng, width="1em" và height="1em" cho phép biểu tượng kế thừa kích thước văn bản trong khi vẫn cho phép bên gọi ghi đè kích thước bằng props. Sử dụng tên thành phần dạng PascalCase có tính mô tả rõ ràng, giữ cho các SVG mang tính trang trí có thể truy cập được bằng aria-hidden khi thích hợp, và sử dụng thuộc tính title prop cho các biểu tượng có ý nghĩa truyền tải thông tin.

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

Bộ chuyển đổi SVG sang React này thay đổi những gì?

Nó phân tích cú pháp SVG XML và viết lại các thuộc tính SVG thành JSX thân thiện với React, bao gồm className, các thuộc tính SVG dạng camelCase, các đối tượng style tùy chọn, props, forwardRef, khả năng truy cập tiêu đề và cú pháp export.

Tôi có thể tải lên tệp SVG không?

Có. Bạn có thể tải lên tệp .svg định dạng UTF-8 hoặc dán mã đánh dấu SVG. Các tệp tải lên được đọc dưới dạng văn bản và được chuyển đổi thành JSX trên máy chủ.

Nó có khử độc mã SVG không?

Tính năng khử độc được bật theo mặc định. Bộ chuyển đổi sẽ loại bỏ các thẻ script, trình xử lý sự kiện nội dòng và các liên kết javascript: để thành phần được tạo ra an toàn hơn khi xem lại trước khi sử dụng.

Tại sao lại chuyển đổi các thuộc tính style thành đối tượng?

React yêu cầu thuộc tính style prop phải là một đối tượng khi viết JSX. Việc chuyển đổi các chuỗi style thành đối tượng giúp đầu ra biên dịch sạch sẽ và giữ cho các tên thuộc tính CSS ở dạng camelCase.

Định dạng tên thành phần nào là tốt nhất?

Sử dụng PascalCase chẳng hạn như AlertIcon hoặc BrandMark. Bộ chuyển đổi sẽ xóa các ký tự không hợp lệ và đảm bảo kết quả bắt đầu bằng một định danh thành phần React hợp lệ.

Tham khảo nội dung, trang hoặc công cụ này như sau:

"Bộ chuyển đổi SVG sang React/JSX" tại https://MiniWebtool.com/vi/bo-chuyen-oi-svg-sang-react-jsx/ từ MiniWebtool, https://MiniWebtool.com/

bởi đội ngũ miniwebtool. Cập nhật ngày: 2026-05-22

Công cụ quản trị web:

Công cụ nổi bật:

Máy tính tuổiTrình Trích Xuất Ảnh từ Videomáy-tính-số-mũ-độ-chính-xác-cao⏱️ Máy Tính GiờMáy tính Phân tích Thừa số Nguyên tốCông cụ đếm hàngTrình tạo bài tây ngẫu nhiênMáy tính phân số tối giảnCông cụ Mã hóa Caesar🖱️ Bộ Đếm ClickCông cụ đổi Pound sang KilogramMáy tính giảm giá phần trămTra cứu ID người dùng InstagramTra cứu ID người dùng FacebookTrình tạo chuỗi ngẫu nhiênTrình Tạo Mã MorseBộ Chuyển Đổi Số Sang ChữCông cụ chuyển đổi chữ số La MãĐảo ngược văn bảnMáy tính thương và số dưCông cụ chuyển đổi kg sang lbsTrình tạo oẳn tù tìBộ chuyển đổi thập phân sang nhị phânĐổ xúc xắcMáy tính thập phân sang phân sốMáy tính ngày trong năm - Hôm nay là ngày thứ mấy trong năm📅 Máy tính ngàyMáy tính thời gianCông cụ chuyển đổi nhị phân sang thập phânTrình tạo nhánh giải đấu ngẫu nhiênTrình nhân hóa văn bản AIMáy tính Kiểm tra Chia hếtMáy tính Cạnh huyềnThống kê Kênh YouTubeXóa dấu cáchBộ chuyển đổi FPSBộ lặp MP3Máy tính nhị phânTrình Luyện Toán NhẩmSắp xếp sốTrình Chuyển Đổi JSON sang CSVĐây có phải là Số Nguyên Tố?Công cụ chuyển đổi phân số thành hỗn sốGhép VideoCông Cụ Vẽ Đồ Thị Hệ Bất Phương TrìnhMáy tính chuyển đổi phân số sang số thập phânTrình chuyển đổi SRT sang TXT🔍 Kiểm tra Đạo vănCông cụ chuyển đổi centimet sang inchBộ chuyển đổi Nhị phân sang HexCông cụ chuyển đổi cm sang feet và inchBộ chuyển đổi Feet và Inch sang CmBộ chuyển đổi Thập phân sang Thập lục phânMáy tính So sánh Phân sốMáy tính căn bậc haiBộ chuyển đổi hex sang thập phânTrình trích xuất âm thanhBộ chuyển đổi HEXSắp xếp theo thứ tự bảng chữ cáiCông cụ chuyển đổi kPa sang psiCông cụ xáo trộn chữ cáiBộ chuyển đổi hệ cơ sốSo sánh hai chuỗiBộ Chia Âm ThanhCon số may mắn của tôi là gì?Công cụ chia ảnhTrình tạo thời gian ngẫu nhiênTrình phát hiện nội dung AITung đồng xuTạo Ô ChữĐiều chỉnh tốc độ videoMáy Giải Phương Trình Bậc BaCông cụ loại bỏ dấu câu trực tuyếnTrình tạo tên ngẫu nhiênCông cụ chuyển đổi hệ thập lục phân sang nhị phânMáy tính HEXTrình tạo thẻ BingoMáy tính Cầu thangMáy tính trung bình mẫuCông cụ chuyển đổi hỗn số thành phân sốMáy tính hoàng hôn và bình minhMáy tính ModuloBộ chọn bình luận YouTubeCân Bằng Phương Trình Hóa Học📷 OCR Chuyển Ảnh Thành Văn BảnTrình tạo ngày sinh ngẫu nhiênTrình tạo thẻ tín dụng ngẫu nhiênTrình tạo số nguyên ngẫu nhiênCông cụ chuyển đổi Phần trăm sang PPMCông cụ chuyển đổi Radian sang ĐộMáy Tính Số Tuầntra-cứu-địa-chỉ-MACTrình tạo mê cungTạo Trò Chơi Tìm TừCông cụ tạo nhóm ngẫu nhiên⏰ Đồng Hồ Báo Thức Trực TuyếnMáy tính GFRMáy tính Tuổi thọ Trung bìnhMáy tính arctanTạo và giải SudokuChuyển đổi CSV sang JSONMáy tính Tuổi thaiChuyển đổi Số thành Phân sốMáy Tính Điểm SốMáy Tính Độ Lệch Chuẩn Tương ĐốiCông cụ ước tính thu nhập YouTubeCông cụ chuyển đổi thời gian phân sốDanh sách năm nhuậnLịch Sao Thủy Nghịch HànhTrình Mô Phỏng Cổng LogicCông cụ Giải Quy hoạch Tuyến tínhCông cụ tạo bữa ăn ngẫu nhiênDanh sách các số nguyên tốMáy tính Định giá Quyền chọn Black-ScholesMáy tính giai thừaMáy Tính Chia Đa Thức⏱️ Bộ Đếm Ngược Thời Giancông cụ chuyển đổi ppm sang phần trămMáy tính bước chân sang khoảng cáchMáy Tính Diện Tích Đa Giác Bất Quy TắcMáy tính BSAMáy tính SinXóa dòng mớiBảng mã ASCIICông cụ Mã hóa VigenèreMáy tính Cung Mặt trời, Mặt trăng & Cung mọc 🌞🌙✨Máy tính diện tích hình trònMáy tính Độ dốc và CấpTrình tạo đồ vật ngẫu nhiênChuyển đổi Nhị phân sang Bát phânCông cụ Trực quan hóa Dữ liệu AI (Dán CSV)Công cụ chuyển đổi psi sang kPaKiểm Tra Số Chẵn Hay Số Lẻmáy-tính-hba1cNgười chọn ngẫu nhiênTrình chuyển đổi HTML sang văn bảnTrình tạo IMEI Ngẫu nhiênXoay VideoBộ chuyển đổi khối lượngBộ Chuyển Đổi Nhị PhânCông cụ tính điểm trung bình GPAMáy tính Điện trở Song songMáy tính thâm hụt caloTrình Định dạng & Xác thực YAMLTrình nén VideoTrình tạo chữ cái ngẫu nhiênTrình tạo số xổ sốChuyển Đổi Mô-men Xoắn (Nm, ft-lb, kgf-cm)Lịch trăng non và trăng trònMáy Tính Ký Hiệu Sigma (Tổng)Trình tạo JSON ngẫu nhiênCông cụ chuyển đổi DMS sang độ thập phânCông cụ vẽ đồ thị hàm sốMáy Tính Phân Vị BMI Cho Trẻ EmMáy tính CosMáy tính Đạo hàmTrình tạo từ ngẫu nhiên tiếng AnhChuyển đổi Thời gian SRTCông cụ Xoay ẢnhMáy Tính Chữ Số Có NghĩaMáy Tính Giá Trị Tuyệt ĐốiMáy tính tương hợp tình yêuMáy tính định lý PythagoreMáy tính Ước số chung lớn nhấtTrình tạo GIFMáy tính TổngĐảo ngược dòngBộ chuyển đổi RGB sang HexCông cụ Kiểm tra APIChuyển Đổi GócKiểm tra Tên người dùng Mạng xã hộiMáy tính lương hưuMáy Tính Lôgarit Cơ Số 2n chữ số đầu tiên của piTrình tạo Hash MD5Bộ chuyển đổi địa chỉ IP sang nhị phânBộ chọn số ngẫu nhiênBộ Chuyển Đổi Thời Gian Sang Thập PhânCông cụ cắt ảnhMáy tính nhiều phân sốMáy tính tanMáy tính trung bìnhmáy-tính-tỷ-lệ-bánh-mìSắp xếp văn bản theo độ dàiTrình Tạo Bài Toán Ngẫu NhiênTrình tạo PIN ngẫu nhiênCông Cụ Chuyển Đổi mAh Sang WhMáy Tính Công Suất 3 PhaMáy Tính kVAMáy Tính Ampe Sang WattMáy Tính Watt Sang AmpeMáy Tính Điện Trở Nối TiếpMáy Tính Lực Ma SátMáy Tính Mặt Phẳng NghiêngMáy tính Lợi thế Cơ họcMáy tính Tốc độ Âm thanhMáy Tính Tốc Độ SóngMáy tính Lực nổiMáy tính Vận tốc Tới hạnMáy tính Bước sóng de BroglieMáy tính năng lượng photonMáy Tính E=mc²Máy Tính Giãn Nở Thời GianMáy tính Định luật thứ ba của KeplerMáy tính Vận tốc ThoátMáy Tính Lực Hấp DẫnMáy tính Định luật Beer-LambertMáy Tính Phương Trình NernstMáy tính Áp suất Thẩm thấuMáy Tính Độ Tăng Điểm SôiMáy Tính Độ Giảm Điểm Đông BăngMáy Tính Thành Phần Phần TrămMáy Tính Nồng Độ Đương LượngMáy tính Nồng độ MolanBộ Chuyển Đổi pKa Sang KaMáy tính Henderson-HasselbalchMáy Tính Sản Lượng Lý ThuyếtMáy tính Chất phản ứng Giới hạnMáy tính Cấu hình ElectronBảng tuần hoàn tương tácTrình Tạo Giáo Án AITrình tạo Câu đố AITrình tạo trích dẫn (APA/MLA/Chicago)Máy Tính Phần Trăm Điểm DanhMáy Tính Điểm APMáy Tính Điểm ACTMáy Tính Điểm SATChuyển đổi Phần trăm sang CGPATrình chuyển đổi CGPA sang phần trămCông Cụ Chấm Điểm Dễ Dàng (EZ Grader)Máy tính Chi phí Nuôi conMáy Tính Lượng Sữa Cho BéMáy Tính Kích Cỡ TãTrình Tạo Tên Em BéCông Cụ Dự Đoán Màu Mắt Em BéCông Cụ Dự Đoán Chiều Cao Của TrẻMáy Tính Thời Gian Tăng Gấp Đôi hCGMáy tính ngày dự sinh IVFMáy tính làm tổ của phôiCông cụ dự đoán giới tính kiểu Trung QuốcCông cụ định dạng ngày ISO 8601Trình Chuyển Đổi Ngày JulianNap CalculatorMáy tính Pha Mặt TrăngWorld ClockBộ chuyển đổi Ngày sang Chữ số La MãĐếm Ngược Đến Khi Nghỉ HưuMáy Tính Cai NghiệnMáy Tính Nửa Sinh NhậtMáy Tính Ngày Kỷ NiệmMáy Tính Chia Tiền BoaMáy Tính ROI Email MarketingMáy tính Chi phí trên Mỗi Khách hàng Tiềm năngMáy Tính Vốn Lưu ĐộngMáy tính số dư đảm phíMáy tính FIFO / LIFOMáy Tính Tồn Kho An ToànMáy Tính Điểm Đặt Hàng LạiMáy tính Lượng đặt hàng Kinh tế EOQMáy Tính Khấu HaoMáy Tính Giá Đồ Thủ CôngMáy tính giá bán buônMáy tính Lợi nhuận ShopifyMáy tính Amazon FBAMáy Tính Phí eBayMáy tính phí EtsyMáy tính Phí StripeMáy Tính Phí PayPalCông Cụ Chuyển Đổi Tỷ Lệ CượcMáy Tính Tiền Dâng Một Phần MườiMáy tính ZakatMáy Tính Thuế Trước Bạ Vương Quốc AnhMáy Tính Miễn Thuế HRAMáy tính GratuityMáy tính NPSMáy tính EPFMáy tính PPFMáy tính RDMáy tính SWPMáy Tính Gross-UpMáy Tính So Sánh Khoản VayMáy Tính Tỷ Lệ Sử Dụng Tín DụngMáy Tính Bậc Thang CDMáy tính Tín phiếu Kho bạc T-BillMáy Tính Trái Phiếu IMáy tính Tiết kiệm Đại học 529Máy tính HSAMáy Tính Trợ Cấp Thôi ViệcMáy Tính Tăng LươngTrình tạo Hóa đơnMáy Tính Công Tác PhíMáy tính Hoàn tiền Quãng đườngMáy Tính Tăng Tiền Thuê NhàMáy Tính Tiền Thuê Theo Tỷ LệMáy tính Khả năng Chi trả Tiền thuê nhàMáy Tính Giá Lăn Bánh Ô TôMáy Tính Khả Năng Mua XeMáy Tính Khoản Vay Xe MáyMáy Tính Khoản Vay Xe RVMáy Tính Khoản Vay Mua ThuyềnMáy Tính Khoản Vay ĐấtMáy Tính Khoản Vay Xây DựngMáy Tính Vay Thế Chấp Chỉ Trả LãiMáy Tính Khoản Vay Bong BóngMáy Tính Điểm Vay Thế ChấpMáy Tính PMIMáy Tính Thanh Toán Thế Chấp Hai Tuần Một LầnMáy Tính Vay Thế Chấp ARMMáy Tính Khoản Vay VAMáy Tính Lương Thực NhậnTrình tạo truy vấn SQL bằng AITrình Tạo RegEx AICông cụ Phân tích Giọng văn bằng AICông cụ Phân tích CV bằng AICông cụ Chuyển đổi Đơn vị AI (Ngôn ngữ Tự nhiên)Trình Viết Thư Xin Lỗi AITrình Tạo Lời Từ Chối Lịch Sự Bằng AITrình Tạo Lịch Trình Du Lịch AITrình Tạo Danh Sách Đọc Sách AITrình Tạo Kế Hoạch Tập Luyện AITrình Tạo Kế Hoạch Bữa Ăn AITrình Tạo Ý Tưởng Quà Tặng AITrình Tạo Công Thức Nấu Ăn AI Từ Nguyên LiệuMáy Tính ROI Học BổngMáy Tính Chi Phí Đại HọcMáy Tính Số Giờ Học Để Thông Thạo Ngôn NgữTrình Tạo Câu Đố Từ VựngTrình tạo Ghi chú CornellMáy Tính Đường Cong Học TậpBộ Lập Lịch Lặp Lại Ngắt Quãng Thẻ Ghi NhớMáy Tính Pha Trộn Màu SơnMáy Tính Keo Chà Ròn GạchMáy Tính Năng Lực Quá Trình Six SigmaTrình tải hình thu nhỏ YouTubeTrình tạo nhân vật RPG ngẫu nhiên