@mirohq/design-system-icons 0.2.2 → 0.3.0

package/react/circle.tsx

@@ -0,0 +1,32 @@
+import React, { forwardRef, createElement } from 'react'
+import type { ForwardRefExoticComponent, RefAttributes } from 'react'
+
+import { StyledIcon } from '../src/icon'
+import type { IconProps } from '../src/icon'
+
+export const IconCircle: ForwardRefExoticComponent<
+  IconProps & RefAttributes<SVGSVGElement>
+> = forwardRef(({ size = 'medium', ...props }, forwardRef) =>
+  createElement(
+    StyledIcon,
+    {
+      ...props,
+      size,
+      viewBox: '0 0 24 24',
+      fill: 'none',
+      ref: forwardRef,
+    },
+    <g clipPath='url(#a)'>
+      <path
+        stroke='currentColor'
+        strokeWidth={2}
+        d='M20.5 12c0 4.97-3.53 8.5-8.5 8.5-4.97 0-8.5-3.53-8.5-8.5 0-4.97 3.53-8.5 8.5-8.5 4.97 0 8.5 3.53 8.5 8.5Z'
+      />
+    </g>,
+    <defs>
+      <clipPath id='a'>
+        <path d='M0 0h24v24H0z' />
+      </clipPath>
+    </defs>
+  )
+)

package/react/exclamation-point-circle.tsx

@@ -16,12 +16,12 @@ export const IconExclamationPointCircle: ForwardRefExoticComponent<
       fill: 'none',
       ref: forwardRef,
     },
-    <circle cx={12} cy={15.5} r={1} fill='currentColor' />,
     <path
       stroke='currentColor'
       strokeLinecap='round'
       strokeWidth={2}
       d='M12 8v4m9 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-8.5 3.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0Z'
-    />
+    />,
+    <path fill='currentColor' d='M13 15.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z' />
   )
 )

package/react/funnel.tsx

@@ -0,0 +1,33 @@
+import React, { forwardRef, createElement } from 'react'
+import type { ForwardRefExoticComponent, RefAttributes } from 'react'
+
+import { StyledIcon } from '../src/icon'
+import type { IconProps } from '../src/icon'
+
+export const IconFunnel: ForwardRefExoticComponent<
+  IconProps & RefAttributes<SVGSVGElement>
+> = forwardRef(({ size = 'medium', ...props }, forwardRef) =>
+  createElement(
+    StyledIcon,
+    {
+      ...props,
+      size,
+      viewBox: '0 0 24 24',
+      fill: 'none',
+      ref: forwardRef,
+    },
+    <g clipPath='url(#a)'>
+      <path
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeWidth={2}
+        d='M19.772 4H4.228a.1.1 0 0 0-.073.168L10 10.5V19l3.447-1.724a1 1 0 0 0 .553-.894V10.5l5.845-6.332A.1.1 0 0 0 19.772 4Z'
+      />
+    </g>,
+    <defs>
+      <clipPath id='a'>
+        <path d='M0 0h24v24H0z' />
+      </clipPath>
+    </defs>
+  )
+)

package/react/index.ts

@@ -2,39 +2,61 @@ export { IconArrowBoxOut } from './arrow-box-out'
 export { IconArrowDownLeft } from './arrow-down-left'
 export { IconArrowDownRight } from './arrow-down-right'
 export { IconArrowDown } from './arrow-down'
+export { IconArrowFatRight } from './arrow-fat-right'
 export { IconArrowLeft } from './arrow-left'
 export { IconArrowRight } from './arrow-right'
 export { IconArrowUpLeft } from './arrow-up-left'
 export { IconArrowUpRight } from './arrow-up-right'
 export { IconArrowUp } from './arrow-up'
 export { IconBarThree } from './bar-three'
+export { IconChat } from './chat'
 export { IconCheckMark } from './check-mark'
 export { IconChevronDown } from './chevron-down'
 export { IconChevronLeft } from './chevron-left'
 export { IconChevronRight } from './chevron-right'
 export { IconChevronUp } from './chevron-up'
+export { IconCircleMotionX } from './circle-motion-x'
+export { IconCircle } from './circle'
 export { IconCog } from './cog'
 export { IconCrossCircle } from './cross-circle'
 export { IconCross } from './cross'
 export { IconEnvelope } from './envelope'
 export { IconExclamationPointCircle } from './exclamation-point-circle'
+export { IconFunnel } from './funnel'
 export { IconGlobe } from './globe'
 export { IconHouse } from './house'
 export { IconInformationMarkCircle } from './information-mark-circle'
+export { IconLineDiagonal } from './line-diagonal'
 export { IconLink } from './link'
 export { IconLockClosed } from './lock-closed'
 export { IconLockOpen } from './lock-open'
 export { IconMagnifyingGlass } from './magnifying-glass'
+export { IconMicrophoneSlash } from './microphone-slash'
+export { IconMicrophone } from './microphone'
 export { IconMinus } from './minus'
+export { IconParallelogram } from './parallelogram'
+export { IconPauseCircle } from './pause-circle'
 export { IconPlaceholder } from './placeholder'
+export { IconPlayCircle } from './play-circle'
+export { IconPlaybackSpeedCircle } from './playback-speed-circle'
 export { IconPlug } from './plug'
 export { IconPlus } from './plus'
 export { IconQuestionMarkCircle } from './question-mark-circle'
+export { IconRhombus } from './rhombus'
+export { IconShapes } from './shapes'
+export { IconSlidersX } from './sliders-x'
+export { IconSlidersY } from './sliders-y'
 export { IconSocialFacebook } from './social-facebook'
 export { IconSocialInstagram } from './social-instagram'
 export { IconSocialLinkedin } from './social-linkedin'
 export { IconSocialTwitter } from './social-twitter'
 export { IconSocialYoutube } from './social-youtube'
+export { IconSpeakerCross } from './speaker-cross'
+export { IconSpeakerHigh } from './speaker-high'
+export { IconSquareRounded } from './square-rounded'
+export { IconSquare } from './square'
+export { IconStopCircle } from './stop-circle'
+export { IconTriangle } from './triangle'
 export { IconUserAdd } from './user-add'
 export { IconUser } from './user'
 export { IconUsers } from './users'

package/react/information-mark-circle.tsx

@@ -16,7 +16,7 @@ export const IconInformationMarkCircle: ForwardRefExoticComponent<
       fill: 'none',
       ref: forwardRef,
     },
-    <circle cx={12} cy={8.5} r={1} fill='currentColor' />,
+    <path fill='currentColor' d='M13 8.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z' />,
     <path
       stroke='currentColor'
       strokeLinecap='round'

package/react/line-diagonal.tsx

@@ -0,0 +1,33 @@
+import React, { forwardRef, createElement } from 'react'
+import type { ForwardRefExoticComponent, RefAttributes } from 'react'
+
+import { StyledIcon } from '../src/icon'
+import type { IconProps } from '../src/icon'
+
+export const IconLineDiagonal: ForwardRefExoticComponent<
+  IconProps & RefAttributes<SVGSVGElement>
+> = forwardRef(({ size = 'medium', ...props }, forwardRef) =>
+  createElement(
+    StyledIcon,
+    {
+      ...props,
+      size,
+      viewBox: '0 0 24 24',
+      fill: 'none',
+      ref: forwardRef,
+    },
+    <g clipPath='url(#a)'>
+      <path
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeWidth={2}
+        d='M4 20 20 4'
+      />
+    </g>,
+    <defs>
+      <clipPath id='a'>
+        <path d='M0 0h24v24H0z' />
+      </clipPath>
+    </defs>
+  )
+)

package/react/microphone-slash.tsx

@@ -0,0 +1,33 @@
+import React, { forwardRef, createElement } from 'react'
+import type { ForwardRefExoticComponent, RefAttributes } from 'react'
+
+import { StyledIcon } from '../src/icon'
+import type { IconProps } from '../src/icon'
+
+export const IconMicrophoneSlash: ForwardRefExoticComponent<
+  IconProps & RefAttributes<SVGSVGElement>
+> = forwardRef(({ size = 'medium', ...props }, forwardRef) =>
+  createElement(
+    StyledIcon,
+    {
+      ...props,
+      size,
+      viewBox: '0 0 24 24',
+      fill: 'none',
+      ref: forwardRef,
+    },
+    <g clipPath='url(#a)'>
+      <path
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeWidth={2}
+        d='M19 8v3a7 7 0 0 1-7 7m0 0v3m0-3a6.984 6.984 0 0 1-5.284-2.409M15 7v4a3 3 0 0 1-5.387 1.818M15 7 4 18M15 7l4-4M5 8v3c0 .34.024.673.07 1M9 7.5V6a3 3 0 0 1 4.5-2.599'
+      />
+    </g>,
+    <defs>
+      <clipPath id='a'>
+        <path d='M0 0h24v24H0z' />
+      </clipPath>
+    </defs>
+  )
+)

package/react/microphone.tsx

@@ -0,0 +1,33 @@
+import React, { forwardRef, createElement } from 'react'
+import type { ForwardRefExoticComponent, RefAttributes } from 'react'
+
+import { StyledIcon } from '../src/icon'
+import type { IconProps } from '../src/icon'
+
+export const IconMicrophone: ForwardRefExoticComponent<
+  IconProps & RefAttributes<SVGSVGElement>
+> = forwardRef(({ size = 'medium', ...props }, forwardRef) =>
+  createElement(
+    StyledIcon,
+    {
+      ...props,
+      size,
+      viewBox: '0 0 24 24',
+      fill: 'none',
+      ref: forwardRef,
+    },
+    <g clipPath='url(#a)'>
+      <path
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeWidth={2}
+        d='M5 8v3a7 7 0 0 0 7 7m7-10v3a7 7 0 0 1-7 7m0 0v3m3-15v5a3 3 0 1 1-6 0V6a3 3 0 1 1 6 0Z'
+      />
+    </g>,
+    <defs>
+      <clipPath id='a'>
+        <path d='M0 0h24v24H0z' />
+      </clipPath>
+    </defs>
+  )
+)

package/react/parallelogram.tsx

@@ -0,0 +1,32 @@
+import React, { forwardRef, createElement } from 'react'
+import type { ForwardRefExoticComponent, RefAttributes } from 'react'
+
+import { StyledIcon } from '../src/icon'
+import type { IconProps } from '../src/icon'
+
+export const IconParallelogram: ForwardRefExoticComponent<
+  IconProps & RefAttributes<SVGSVGElement>
+> = forwardRef(({ size = 'medium', ...props }, forwardRef) =>
+  createElement(
+    StyledIcon,
+    {
+      ...props,
+      size,
+      viewBox: '0 0 24 24',
+      fill: 'none',
+      ref: forwardRef,
+    },
+    <g clipPath='url(#a)'>
+      <path
+        stroke='currentColor'
+        strokeWidth={2}
+        d='M21.68 4H6.195a.25.25 0 0 0-.242.19l-3.875 15.5a.25.25 0 0 0 .242.31h15.485a.25.25 0 0 0 .242-.19l3.875-15.5A.25.25 0 0 0 21.68 4Z'
+      />
+    </g>,
+    <defs>
+      <clipPath id='a'>
+        <path d='M0 0h24v24H0z' />
+      </clipPath>
+    </defs>
+  )
+)

package/react/pause-circle.tsx

@@ -0,0 +1,33 @@
+import React, { forwardRef, createElement } from 'react'
+import type { ForwardRefExoticComponent, RefAttributes } from 'react'
+
+import { StyledIcon } from '../src/icon'
+import type { IconProps } from '../src/icon'
+
+export const IconPauseCircle: ForwardRefExoticComponent<
+  IconProps & RefAttributes<SVGSVGElement>
+> = forwardRef(({ size = 'medium', ...props }, forwardRef) =>
+  createElement(
+    StyledIcon,
+    {
+      ...props,
+      size,
+      viewBox: '0 0 24 24',
+      fill: 'none',
+      ref: forwardRef,
+    },
+    <g clipPath='url(#a)'>
+      <path
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeWidth={2}
+        d='M13.889 9.167v5.666M10.11 9.167v5.666M20.5 12a8.5 8.5 0 1 1-17 0 8.5 8.5 0 0 1 17 0Z'
+      />
+    </g>,
+    <defs>
+      <clipPath id='a'>
+        <path d='M0 0h24v24H0z' />
+      </clipPath>
+    </defs>
+  )
+)

package/react/play-circle.tsx

@@ -0,0 +1,26 @@
+import React, { forwardRef, createElement } from 'react'
+import type { ForwardRefExoticComponent, RefAttributes } from 'react'
+
+import { StyledIcon } from '../src/icon'
+import type { IconProps } from '../src/icon'
+
+export const IconPlayCircle: ForwardRefExoticComponent<
+  IconProps & RefAttributes<SVGSVGElement>
+> = forwardRef(({ size = 'medium', ...props }, forwardRef) =>
+  createElement(
+    StyledIcon,
+    {
+      ...props,
+      size,
+      viewBox: '0 0 24 24',
+      fill: 'none',
+      ref: forwardRef,
+    },
+    <circle cx={12} cy={12} r={8.5} stroke='currentColor' strokeWidth={2} />,
+    <path
+      fill='currentColor'
+      stroke='currentColor'
+      d='M15.099 12 10.5 15.066V8.934L15.099 12Z'
+    />
+  )
+)

package/react/playback-speed-circle.tsx

@@ -0,0 +1,31 @@
+import React, { forwardRef, createElement } from 'react'
+import type { ForwardRefExoticComponent, RefAttributes } from 'react'
+
+import { StyledIcon } from '../src/icon'
+import type { IconProps } from '../src/icon'
+
+export const IconPlaybackSpeedCircle: ForwardRefExoticComponent<
+  IconProps & RefAttributes<SVGSVGElement>
+> = forwardRef(({ size = 'medium', ...props }, forwardRef) =>
+  createElement(
+    StyledIcon,
+    {
+      ...props,
+      size,
+      viewBox: '0 0 24 24',
+      fill: 'none',
+      ref: forwardRef,
+    },
+    <path
+      stroke='currentColor'
+      strokeLinecap='round'
+      strokeWidth={2}
+      d='M10.583 3.618a8.5 8.5 0 1 1 .173 16.792M7.3 4.917a8.547 8.547 0 0 0-2.222 2.15m-1.444 3.421a8.55 8.55 0 0 0-.016 2.929m1.479 3.543a8.55 8.55 0 0 0 1.709 1.769'
+    />,
+    <path
+      fill='currentColor'
+      stroke='currentColor'
+      d='M15.099 12 10.5 15.066V8.934L15.099 12Z'
+    />
+  )
+)

package/react/rhombus.tsx

@@ -0,0 +1,32 @@
+import React, { forwardRef, createElement } from 'react'
+import type { ForwardRefExoticComponent, RefAttributes } from 'react'
+
+import { StyledIcon } from '../src/icon'
+import type { IconProps } from '../src/icon'
+
+export const IconRhombus: ForwardRefExoticComponent<
+  IconProps & RefAttributes<SVGSVGElement>
+> = forwardRef(({ size = 'medium', ...props }, forwardRef) =>
+  createElement(
+    StyledIcon,
+    {
+      ...props,
+      size,
+      viewBox: '0 0 24 24',
+      fill: 'none',
+      ref: forwardRef,
+    },
+    <g clipPath='url(#a)'>
+      <path
+        stroke='currentColor'
+        strokeWidth={2}
+        d='m11.823 3.177-8.646 8.646a.25.25 0 0 0 0 .354l8.646 8.646a.25.25 0 0 0 .354 0l8.646-8.646a.25.25 0 0 0 0-.354l-8.646-8.646a.25.25 0 0 0-.354 0Z'
+      />
+    </g>,
+    <defs>
+      <clipPath id='a'>
+        <path d='M0 0h24v24H0z' />
+      </clipPath>
+    </defs>
+  )
+)

package/react/shapes.tsx

@@ -0,0 +1,33 @@
+import React, { forwardRef, createElement } from 'react'
+import type { ForwardRefExoticComponent, RefAttributes } from 'react'
+
+import { StyledIcon } from '../src/icon'
+import type { IconProps } from '../src/icon'
+
+export const IconShapes: ForwardRefExoticComponent<
+  IconProps & RefAttributes<SVGSVGElement>
+> = forwardRef(({ size = 'medium', ...props }, forwardRef) =>
+  createElement(
+    StyledIcon,
+    {
+      ...props,
+      size,
+      viewBox: '0 0 24 24',
+      fill: 'none',
+      ref: forwardRef,
+    },
+    <g clipPath='url(#a)'>
+      <path
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeWidth={2}
+        d='M8 9.5a6.5 6.5 0 1 1 6.5 6.5M3.25 10h10.5a.25.25 0 0 1 .25.25v10.5a.25.25 0 0 1-.25.25H3.25a.25.25 0 0 1-.25-.25v-10.5a.25.25 0 0 1 .25-.25Z'
+      />
+    </g>,
+    <defs>
+      <clipPath id='a'>
+        <path d='M0 0h24v24H0z' />
+      </clipPath>
+    </defs>
+  )
+)

package/react/sliders-x.tsx

@@ -0,0 +1,33 @@
+import React, { forwardRef, createElement } from 'react'
+import type { ForwardRefExoticComponent, RefAttributes } from 'react'
+
+import { StyledIcon } from '../src/icon'
+import type { IconProps } from '../src/icon'
+
+export const IconSlidersX: ForwardRefExoticComponent<
+  IconProps & RefAttributes<SVGSVGElement>
+> = forwardRef(({ size = 'medium', ...props }, forwardRef) =>
+  createElement(
+    StyledIcon,
+    {
+      ...props,
+      size,
+      viewBox: '0 0 24 24',
+      fill: 'none',
+      ref: forwardRef,
+    },
+    <g clipPath='url(#a)'>
+      <path
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeWidth={2}
+        d='M20 8h-5M9 8H4m11.5 8H4m8-6a2 2 0 1 1 0-4 2 2 0 0 1 0 4Zm6 8a2 2 0 1 1 0-4 2 2 0 0 1 0 4Z'
+      />
+    </g>,
+    <defs>
+      <clipPath id='a'>
+        <path d='M0 0h24v24H0z' />
+      </clipPath>
+    </defs>
+  )
+)

package/react/sliders-y.tsx

@@ -0,0 +1,33 @@
+import React, { forwardRef, createElement } from 'react'
+import type { ForwardRefExoticComponent, RefAttributes } from 'react'
+
+import { StyledIcon } from '../src/icon'
+import type { IconProps } from '../src/icon'
+
+export const IconSlidersY: ForwardRefExoticComponent<
+  IconProps & RefAttributes<SVGSVGElement>
+> = forwardRef(({ size = 'medium', ...props }, forwardRef) =>
+  createElement(
+    StyledIcon,
+    {
+      ...props,
+      size,
+      viewBox: '0 0 24 24',
+      fill: 'none',
+      ref: forwardRef,
+    },
+    <g clipPath='url(#a)'>
+      <path
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeWidth={2}
+        d='M5 5v4m0 6v4m7-14v10m0 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4Zm7-5.5V19M7 12a2 2 0 1 1-4 0 2 2 0 0 1 4 0Zm14-5a2 2 0 1 1-4 0 2 2 0 0 1 4 0Z'
+      />
+    </g>,
+    <defs>
+      <clipPath id='a'>
+        <path d='M0 0h24v24H0z' />
+      </clipPath>
+    </defs>
+  )
+)

package/react/speaker-cross.tsx

@@ -0,0 +1,33 @@
+import React, { forwardRef, createElement } from 'react'
+import type { ForwardRefExoticComponent, RefAttributes } from 'react'
+
+import { StyledIcon } from '../src/icon'
+import type { IconProps } from '../src/icon'
+
+export const IconSpeakerCross: ForwardRefExoticComponent<
+  IconProps & RefAttributes<SVGSVGElement>
+> = forwardRef(({ size = 'medium', ...props }, forwardRef) =>
+  createElement(
+    StyledIcon,
+    {
+      ...props,
+      size,
+      viewBox: '0 0 24 24',
+      fill: 'none',
+      ref: forwardRef,
+    },
+    <g clipPath='url(#a)'>
+      <path
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeWidth={2}
+        d='m21 9.5-5 5m0-5 5 5M3.1 15h3.856a.1.1 0 0 1 .074.033l4.796 5.276A.1.1 0 0 0 12 20.24V3.76a.1.1 0 0 0-.174-.068L7.03 8.967A.1.1 0 0 1 6.956 9H3.1a.1.1 0 0 0-.1.1v5.8a.1.1 0 0 0 .1.1Z'
+      />
+    </g>,
+    <defs>
+      <clipPath id='a'>
+        <path d='M0 0h24v24H0z' />
+      </clipPath>
+    </defs>
+  )
+)

package/react/speaker-high.tsx

@@ -0,0 +1,33 @@
+import React, { forwardRef, createElement } from 'react'
+import type { ForwardRefExoticComponent, RefAttributes } from 'react'
+
+import { StyledIcon } from '../src/icon'
+import type { IconProps } from '../src/icon'
+
+export const IconSpeakerHigh: ForwardRefExoticComponent<
+  IconProps & RefAttributes<SVGSVGElement>
+> = forwardRef(({ size = 'medium', ...props }, forwardRef) =>
+  createElement(
+    StyledIcon,
+    {
+      ...props,
+      size,
+      viewBox: '0 0 24 24',
+      fill: 'none',
+      ref: forwardRef,
+    },
+    <g clipPath='url(#a)'>
+      <path
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeWidth={2}
+        d='M16 10v4m3-8.5V18M3.1 15h3.856a.1.1 0 0 1 .074.033l4.796 5.276A.1.1 0 0 0 12 20.24V3.76a.1.1 0 0 0-.174-.068L7.03 8.967A.1.1 0 0 1 6.956 9H3.1a.1.1 0 0 0-.1.1v5.8a.1.1 0 0 0 .1.1Z'
+      />
+    </g>,
+    <defs>
+      <clipPath id='a'>
+        <path d='M0 0h24v24H0z' />
+      </clipPath>
+    </defs>
+  )
+)

package/react/square-rounded.tsx

@@ -0,0 +1,32 @@
+import React, { forwardRef, createElement } from 'react'
+import type { ForwardRefExoticComponent, RefAttributes } from 'react'
+
+import { StyledIcon } from '../src/icon'
+import type { IconProps } from '../src/icon'
+
+export const IconSquareRounded: ForwardRefExoticComponent<
+  IconProps & RefAttributes<SVGSVGElement>
+> = forwardRef(({ size = 'medium', ...props }, forwardRef) =>
+  createElement(
+    StyledIcon,
+    {
+      ...props,
+      size,
+      viewBox: '0 0 24 24',
+      fill: 'none',
+      ref: forwardRef,
+    },
+    <g clipPath='url(#a)'>
+      <path
+        stroke='currentColor'
+        strokeWidth={2}
+        d='M16 4H8a4 4 0 0 0-4 4v8a4 4 0 0 0 4 4h8a4 4 0 0 0 4-4V8a4 4 0 0 0-4-4Z'
+      />
+    </g>,
+    <defs>
+      <clipPath id='a'>
+        <path d='M0 0h24v24H0z' />
+      </clipPath>
+    </defs>
+  )
+)

package/react/square.tsx

@@ -0,0 +1,32 @@
+import React, { forwardRef, createElement } from 'react'
+import type { ForwardRefExoticComponent, RefAttributes } from 'react'
+
+import { StyledIcon } from '../src/icon'
+import type { IconProps } from '../src/icon'
+
+export const IconSquare: ForwardRefExoticComponent<
+  IconProps & RefAttributes<SVGSVGElement>
+> = forwardRef(({ size = 'medium', ...props }, forwardRef) =>
+  createElement(
+    StyledIcon,
+    {
+      ...props,
+      size,
+      viewBox: '0 0 24 24',
+      fill: 'none',
+      ref: forwardRef,
+    },
+    <g clipPath='url(#a)'>
+      <path
+        stroke='currentColor'
+        strokeWidth={2}
+        d='M19.75 4H4.25a.25.25 0 0 0-.25.25v15.5c0 .138.112.25.25.25h15.5a.25.25 0 0 0 .25-.25V4.25a.25.25 0 0 0-.25-.25Z'
+      />
+    </g>,
+    <defs>
+      <clipPath id='a'>
+        <path d='M0 0h24v24H0z' />
+      </clipPath>
+    </defs>
+  )
+)