🧬

SVG → React/JSX Component Converter

Convert SVG sang React/JSX component. Tự động đổi attribute kebab-case → camelCase, hỗ trợ TypeScript, currentColor, size/color props.

SVG (paste hoặc upload)

Tên component

TypeScript (.tsx) Hỗ trợ size/color props Xoá fill cố định (để dùng currentColor)

React/JSX Component

Convert SVG (raw XML hoặc Figma export) sang React/JSX component. Đổi attribute kebab-case → camelCase, escape <style>, optional TypeScript types.

Khi nào cần convert SVG → JSX?

Từ Figma export: designer xuất SVG → bạn paste sang React component để dùng.
Icon library tự build: thay vì dùng react-icons, build set icon riêng từ Heroicons / Tabler.
Logo + illustrations: brand SVG → component có size/color props.
Animation: convert sang JSX để bind state vào attribute.

kebab-case → camelCase: stroke-width → strokeWidth, fill-rule → fillRule.
class → className (JSX rule cho HTML/SVG element).
style: từ string CSS sang object: style="color:red" → style={{color: 'red'}}.
<style> tag: phải wrap CSS trong backtick để JSX không parse: <style>{`...`}</style>.
viewBox: GIỮ NGUYÊN camelCase (không phải view-box).

size prop: width/height nhận props để dễ resize. Default 24.
currentColor: dùng fill="currentColor" để icon kế thừa color của parent — đổi màu bằng className="text-red-500".
...props spread: cho phép pass onClick, aria-label, etc.
TypeScript: extend React.SVGProps<SVGSVGElement> để có full type safety.