SVG 转 JSX

免费

把 SVG 标记转换成一个干净的 React 组件 (JSX 或 TSX)，该组件带有 props、currentColor、forwardRef 和 camelCased 属性。

SVG

TSX

import { type SVGProps } from "react";

const RocketIcon = (props: SVGProps<SVGSVGElement>) => (
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="icon icon-rocket" {...props}>
      <path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z" />
      <path d="m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z" style={{ fillOpacity: 0.2, mixBlendMode: "multiply" }} />
      <circle cx="15" cy="9" r="1.5" fill="currentColor" />
    </svg>
);

export default RocketIcon;