perspective

PreviousNext
Docs
svglcomponent

Preview

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

const PerspectiveLight = (props: SVGProps<SVGSVGElement>) => (
  <svg {...props} viewBox="0 0 40 40" fill="none">
    <path
      fill="#fff"
      d="M6.718 6.718c1.2-1.2 2.708-1.837 5.333-2.162C13.986 4.316 16.527 4 20 4c3.592 0 6.188.321 8.146.581 2.504.332 3.966.967 5.136 2.137 1.173 1.174 1.809 2.64 2.14 5.159.257 1.955.578 4.545.578 8.123 0 3.598-.322 6.197-.582 8.156-.333 2.498-.968 3.957-2.136 5.126-1.158 1.158-2.603 1.792-5.061 2.127-1.967.268-4.583.591-8.221.591-3.519 0-6.081-.318-8.025-.565-2.578-.328-4.068-.965-5.257-2.153-1.157-1.157-1.791-2.6-2.126-5.055C4.324 26.26 4 23.642 4 20c0-3.485.317-6.033.558-7.97.326-2.612.963-4.115 2.16-5.312Z"
      style={{ fill: "#fff", fillOpacity: "1" }}
    />
    <path
      fill="#363636"
      fillRule="evenodd"
      d="M26.35 13.72c1.687 2.347 1.595 6.076-.227 8.39-1.59 2.016-4.99 2.872-8.618 1.2v6.49h-2.95V11.47h2.866l.049.822c4.31-1.542 7.069-1.09 8.88 1.429Zm-3.494 7.335c1.01-.671 1.648-1.902 1.635-3.385-.019-2.225-1.47-3.835-3.461-3.84a3.375 3.375 0 0 0-2.04.673c-.482.328-.884.78-1.153 1.33-.835 1.71-.43 3.944.933 5.03 1.082.863 2.316 1.053 3.558.486.028-.012.054-.027.082-.04l.057-.03a3.227 3.227 0 0 0 .372-.212l.017-.012Z"
      clipRule="evenodd"
      style={{ fill: "color(display-p3 .2118 .2118 .2118)", fillOpacity: "1" }}
    />
  </svg>
);

export { PerspectiveLight };

Installation

npx shadcn@latest add @svgl/perspective

Usage

import { Perspective } from "@/components/perspective"
<Perspective />