chakra-ui

PreviousNext
Docs
svglcomponent

Preview

Loading preview…
././static/components-generated/chakraUi.tsx
import type { SVGProps } from "react";

const ChakraUi = (props: SVGProps<SVGSVGElement>) => (
  <svg {...props} viewBox="0 0 257 257">
    <rect width="257" height="257" rx="128.5" fill="url(#a)" />
    <path
      d="m69.558 133.985 87.592-86.99c1.636-1.624 4.27.353 3.165 2.378l-32.601 59.752c-.728 1.332.237 2.958 1.755 2.958h56.34c1.815 0 2.691 2.223 1.364 3.462l-98.728 92.142c-1.77 1.652-4.405-.676-2.984-2.636l46.736-64.473c.958-1.322.014-3.174-1.619-3.174h-59.61c-1.786 0-2.677-2.161-1.41-3.419z"
      fill="#fff"
    />
    <defs>
      <linearGradient
        id="a"
        x1="128.5"
        x2="128.5"
        y2="257"
        gradientUnits="userSpaceOnUse"
      >
        <stop stop-color="#7BCBD4" />
        <stop offset="1" stop-color="#29C6B7" />
      </linearGradient>
    </defs>
  </svg>
);

export { ChakraUi };

Installation

npx shadcn@latest add @svgl/chakra-ui

Usage

import { ChakraUi } from "@/components/chakra-ui"
<ChakraUi />