SVG → React/JSX Component Converter

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.

Khác biệt SVG vs JSX

• 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).

Tip props pattern

• 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.