microsoft-designer

PreviousNext
Docs
svglcomponent

Preview

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

const MicrosoftDesigner = (props: SVGProps<SVGSVGElement>) => (
  <svg {...props} fill="none" viewBox="0 0 512 512">
    <g clipPath="url(#a)">
      <g clipPath="url(#b)">
        <path
          fill="url(#c)"
          fillRule="evenodd"
          d="M440 415.811V247.996H240v8c-106.039 0-192 85.961-192 192v32c0 17.673 14.327 32 32 32h160c80.929 0 153.088-37.553 200-96.185Z"
          clipRule="evenodd"
        />
        <path
          fill="url(#d)"
          fill-opacity=".5"
          fillRule="evenodd"
          d="M440 415.811V247.996H240v8c-106.039 0-192 85.961-192 192v32c0 17.673 14.327 32 32 32h160c80.929 0 153.088-37.553 200-96.185Z"
          clipRule="evenodd"
        />
        <path
          fill="url(#e)"
          d="M240-.004H80c-17.673 0-32 14.327-32 32v32c0 106.039 85.961 192 192 192h72c70.692 0 128 57.308 128 128 0 13.657-2.139 26.814-6.1 39.155 38.699-44.85 62.1-103.269 62.1-167.155 0-141.385-114.615-256-256-256Z"
        />
        <path
          fill="url(#f)"
          fill-opacity=".5"
          d="M240-.004H80c-17.673 0-32 14.327-32 32v32c0 106.039 85.961 192 192 192h72c70.692 0 128 57.308 128 128 0 13.657-2.139 26.814-6.1 39.155 38.699-44.85 62.1-103.269 62.1-167.155 0-141.385-114.615-256-256-256Z"
        />
      </g>
    </g>
    <defs>
      <radialGradient
        id="c"
        cx="0"
        cy="0"
        r="1"
        gradientTransform="rotate(-39.174 769.69 197.887) scale(417.938 512.42)"
        gradientUnits="userSpaceOnUse"
      >
        <stop offset=".045" stop-color="#AD7DFF" />
        <stop offset=".328" stop-color="#6864F6" />
        <stop offset=".571" stop-color="#5750E2" />
        <stop offset=".809" stop-color="#3E36B1" />
        <stop offset="1" stop-color="#261D82" />
      </radialGradient>
      <radialGradient
        id="d"
        cx="0"
        cy="0"
        r="1"
        gradientTransform="rotate(-160.304 281.777 209.998) scale(481.906)"
        gradientUnits="userSpaceOnUse"
      >
        <stop offset=".706" stop-color="#AC80FF" stop-opacity="0" />
        <stop offset=".921" stop-color="#BD96FF" />
      </radialGradient>
      <radialGradient
        id="e"
        cx="0"
        cy="0"
        r="1"
        gradientTransform="rotate(38.202 1.73 77.015) scale(570.097 471.102)"
        gradientUnits="userSpaceOnUse"
      >
        <stop stop-color="#FFC470" />
        <stop offset=".251" stop-color="#FF835C" />
        <stop offset=".584" stop-color="#F24A9D" />
        <stop offset=".871" stop-color="#B339F0" />
        <stop offset="1" stop-color="#C354FF" />
      </radialGradient>
      <radialGradient
        id="f"
        cx="0"
        cy="0"
        r="1"
        gradientTransform="matrix(-365.33125 -254.66907 241.84112 -346.92913 231.792 366.661)"
        gradientUnits="userSpaceOnUse"
      >
        <stop offset=".709" stop-color="#FFB357" stop-opacity="0" />
        <stop offset=".942" stop-color="#FFB357" />
      </radialGradient>
      <clipPath id="a">
        <path fill="#fff" d="M0 0h512v512H0z" />
      </clipPath>
      <clipPath id="b">
        <path fill="#fff" d="M0 0h512v512H0z" />
      </clipPath>
    </defs>
  </svg>
);

export { MicrosoftDesigner };

Installation

npx shadcn@latest add @svgl/microsoft-designer

Usage

import { MicrosoftDesigner } from "@/components/microsoft-designer"
<MicrosoftDesigner />