moon

PreviousNext
Docs
svglcomponent

Preview

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

const Moon = (props: SVGProps<SVGSVGElement>) => (
  <svg
    {...props}
    viewBox="0 0 256 256"
    xmlnsXlink="http://www.w3.org/1999/xlink"
    preserveAspectRatio="xMidYMid"
  >
    <title>Moon</title>
    <defs>
      <circle id="path-1" cx="128" cy="128" r="128" />
      <radialGradient
        cx="50%"
        cy="50%"
        fx="50%"
        fy="50%"
        r="49.7893875%"
        id="moonRadialGradient-1"
      >
        <stop stop-color="#4600D1" offset="0%" />
        <stop stop-color="#4600D1" offset="49.2852329%" />
        <stop stop-color="#35009F" offset="100%" />
      </radialGradient>
      <radialGradient
        cx="50%"
        cy="50%"
        fx="50%"
        fy="50%"
        r="49.6030859%"
        id="moonRadialGradient-2"
      >
        <stop stop-color="#35019E" offset="0%" />
        <stop stop-color="#320194" offset="18.7296056%" />
        <stop stop-color="#220066" offset="100%" />
      </radialGradient>
    </defs>
    <g>
      <g>
        <circle fill="#5805FF" cx="128" cy="128" r="128" />
        <mask id="mask-2" fill="white">
          <use xlink:href="#path-1" />
        </mask>
        <circle
          fill="url(#moonRadialGradient-1)"
          mask="url(#mask-2)"
          cx="199.694484"
          cy="105.369165"
          r="128"
        />
        <circle
          fill="url(#moonRadialGradient-2)"
          mask="url(#mask-2)"
          cx="275.371994"
          cy="82.3762376"
          r="128"
        />
      </g>
    </g>
  </svg>
);

export { Moon };

Installation

npx shadcn@latest add @svgl/moon

Usage

import { Moon } from "@/components/moon"
<Moon />