FlowingDev

SVG ke JSX

Gratis

Sulap markup SVG jadi komponen React (JSX atau TSX) yang rapi, lengkap dengan props, currentColor, forwardRef, dan atribut camelCased.

SVG

Pratinjau

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;

Diproses secara lokal di browser Anda — tidak ada yang meninggalkan perangkat Anda.