@mirohq/design-system-icons 0.3.0 → 0.4.0

package/react/arrow-counter-clockwise-up-right.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 IconArrowCounterClockwiseUpRight: 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.753 10.03a8 8 0 1 1-7.723-6.032M23 12l-3-3-3 3'
+      />
+    </g>,
+    <defs>
+      <clipPath id='a'>
+        <path d='M0 0h24v24H0z' />
+      </clipPath>
+    </defs>
+  )
+)

package/react/arrows-clockwise-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 IconArrowsClockwiseX: 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 12a8 8 0 0 1 10-7.748M20 12a8 8 0 0 1-10.369 7.643M12 7l3-3-3-3m0 16-3 3 3 3'
+      />
+    </g>,
+    <defs>
+      <clipPath id='a'>
+        <path d='M0 0h24v24H0z' />
+      </clipPath>
+    </defs>
+  )
+)

package/react/arrows-clockwise-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 IconArrowsClockwiseY: 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='M12 20a8 8 0 0 1-7.748-10M12 4a8 8 0 0 1 7.643 10.369M7 12 4 9l-3 3m16 0 3 3 3-3'
+      />
+    </g>,
+    <defs>
+      <clipPath id='a'>
+        <path d='M0 0h24v24H0z' />
+      </clipPath>
+    </defs>
+  )
+)

package/react/article.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 IconArticle: 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 8h8m-8 4h8m-8 4h5m-8 4h14a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1H5a1 1 0 0 0-1 1v14a1 1 0 0 0 1 1Z'
+      />
+    </g>,
+    <defs>
+      <clipPath id='a'>
+        <path d='M0 0h24v24H0z' />
+      </clipPath>
+    </defs>
+  )
+)

package/react/brackets-angle-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 IconBracketsAngleSlash: 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='m7 8-4 4 4 4m10-8 4 4-4 4M14 5l-4 14'
+      />
+    </g>,
+    <defs>
+      <clipPath id='a'>
+        <path d='M0 0h24v24H0z' />
+      </clipPath>
+    </defs>
+  )
+)

package/react/brackets-curly-circles-three.tsx

@@ -0,0 +1,37 @@
+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 IconBracketsCurlyCirclesThree: 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
+        fill='currentColor'
+        d='M9 15.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm4.5 0a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm4.5 0a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Z'
+      />
+      <path
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeWidth={2}
+        d='M5.004 20a2 2 0 0 1-2-2v-4c0-1.105-1.896-2-2-2-.105 0 2-.895 2-2V6a2 2 0 0 1 2-2M19 4a2 2 0 0 1 2 2v4c0 1.105 1.895 2 2 2 .105 0-2 .895-2 2v4a2 2 0 0 1-2 2'
+      />
+    </g>,
+    <defs>
+      <clipPath id='a'>
+        <path d='M0 0h24v24H0z' />
+      </clipPath>
+    </defs>
+  )
+)

package/react/camera.tsx

@@ -0,0 +1,34 @@
+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 IconCamera: ForwardRefExoticComponent<
+  IconProps & RefAttributes<SVGSVGElement>
+> = forwardRef(({ size = 'medium', ...props }, forwardRef) =>
+  createElement(
+    StyledIcon,
+    {
+      ...props,
+      size,
+      viewBox: '0 0 24 24',
+      fill: 'none',
+      ref: forwardRef,
+    },
+    <g
+      stroke='currentColor'
+      strokeLinecap='round'
+      strokeWidth={2}
+      clipPath='url(#a)'
+    >
+      <path d='M19 20H5a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h2a1.5 1.5 0 0 0 1.5-1.5A1.5 1.5 0 0 1 10 4h4a1.5 1.5 0 0 1 1.5 1.5A1.5 1.5 0 0 0 17 7h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2Z' />
+      <path d='M9.322 15.554a3.62 3.62 0 1 0 5.356-4.87 3.62 3.62 0 0 0-5.356 4.87Z' />
+    </g>,
+    <defs>
+      <clipPath id='a'>
+        <path d='M0 0h24v24H0z' />
+      </clipPath>
+    </defs>
+  )
+)

package/react/card-number-three.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 IconCardNumberThree: ForwardRefExoticComponent<
+  IconProps & RefAttributes<SVGSVGElement>
+> = forwardRef(({ size = 'medium', ...props }, forwardRef) =>
+  createElement(
+    StyledIcon,
+    {
+      ...props,
+      size,
+      viewBox: '0 0 24 24',
+      fill: 'none',
+      ref: forwardRef,
+    },
+    <path
+      fill='currentColor'
+      d='M9 6a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm8 12a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z'
+    />,
+    <path
+      stroke='currentColor'
+      strokeLinecap='round'
+      strokeLinejoin='round'
+      strokeWidth={2}
+      d='M10.25 9h3.5l-2 3c.667 0 2 .559 2 2 0 1.5-1.354 2-2 2C10.5 16 10 15 10 15M6 3h12a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1Z'
+    />
+  )
+)

package/react/card.tsx

@@ -0,0 +1,30 @@
+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 IconCard: 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='M7 14h10M3.5 5h17a.5.5 0 0 1 .5.5v13a.5.5 0 0 1-.5.5h-17a.5.5 0 0 1-.5-.5v-13a.5.5 0 0 1 .5-.5Z'
+    />,
+    <path
+      fill='currentColor'
+      d='M18 9.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Z'
+    />
+  )
+)

package/react/cards-poker.tsx

@@ -0,0 +1,30 @@
+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 IconCardsPoker: 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='M11.182 6H3.5a.5.5 0 0 0-.5.5v14a.5.5 0 0 0 .5.5h9a.5.5 0 0 0 .5-.5V18M11.182 6H12.5a.5.5 0 0 1 .5.5V18M11.182 6V3.5a.5.5 0 0 1 .5-.5H20.5a.5.5 0 0 1 .5.5v14a.5.5 0 0 1-.5.5H13'
+    />,
+    <path
+      fill='currentColor'
+      d='M9.5 13.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0ZM7 9a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm4 9a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z'
+    />
+  )
+)

package/react/chart-bar-y-simple.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 IconChartBarYSimple: 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 14v6m5-10v10m5-16v16m5-13v13'
+      />
+    </g>,
+    <defs>
+      <clipPath id='a'>
+        <path d='M0 0h24v24H0z' />
+      </clipPath>
+    </defs>
+  )
+)

package/react/chart-bar-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 IconChartBarY: 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='M6 16v-3.5a.5.5 0 0 1 .5-.5H10m0 0V8.5a.5.5 0 0 1 .5-.5H14m-4 4v4m4 0V4.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 .5.5V16M4 20h16'
+      />
+    </g>,
+    <defs>
+      <clipPath id='a'>
+        <path d='M0 0h24v24H0z' />
+      </clipPath>
+    </defs>
+  )
+)

package/react/circle-notch.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 IconCircleNotch: 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='M12 20a8 8 0 1 0-8-8'
+      />
+    </g>,
+    <defs>
+      <clipPath id='a'>
+        <path d='M0 0h24v24H0z' />
+      </clipPath>
+    </defs>
+  )
+)

package/react/circle.tsx

@@ -17,11 +17,7 @@ export const IconCircle: ForwardRefExoticComponent<
       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'
-      />
+      <circle cx={12} cy={12} r={9} stroke='currentColor' strokeWidth={2} />
     </g>,
     <defs>
       <clipPath id='a'>

package/react/circles-connected.tsx

@@ -0,0 +1,27 @@
+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 IconCirclesConnected: 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='square'
+      strokeWidth={2}
+      d='m15 9 2-2M9 9 7 7m0 10 2-2M7 5a2 2 0 1 1-4 0 2 2 0 0 1 4 0Zm0 14a2 2 0 1 1-4 0 2 2 0 0 1 4 0Zm9-7a4 4 0 1 1-8 0 4 4 0 0 1 8 0Zm4-6.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Z'
+    />,
+    <circle cx={20} cy={20} r={2} fill='currentColor' />
+  )
+)

package/react/clock-counter-clockwise-simple.tsx

@@ -0,0 +1,27 @@
+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 IconClockCounterClockwiseSimple: 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={2} fill='currentColor' />,
+    <path
+      stroke='currentColor'
+      strokeLinecap='round'
+      strokeWidth={2}
+      d='M4.258 14.015a8 8 0 1 1 7.758 5.987M1 12l3 3 3-3'
+    />
+  )
+)

package/react/clock-counter-clockwise.tsx

@@ -0,0 +1,27 @@
+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 IconClockCounterClockwise: 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={2} fill='currentColor' />,
+    <path
+      stroke='currentColor'
+      strokeLinecap='round'
+      strokeWidth={2}
+      d='m12 12 3-3M4.258 14.015a8 8 0 1 1 7.758 5.987M1 12l3 3 3-3'
+    />
+  )
+)

package/react/cluster.tsx

@@ -0,0 +1,27 @@
+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 IconCluster: 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='M6 7h6m-6 4.053h3m7 .894V3.5a.5.5 0 0 0-.5-.5h-12a.5.5 0 0 0-.5.5v11a.5.5 0 0 0 .5.5h9.4m3.1-3.053V14.5a.5.5 0 0 1-.5.5h-2.6m3.1-3.053h4.5a.5.5 0 0 1 .5.5V19.5a.5.5 0 0 1-.5.5h-7.1a.5.5 0 0 1-.5-.5V15'
+    />,
+    <rect width={4} height={4} x={6} y={18} fill='currentColor' rx={1} />
+  )
+)

package/react/clustered.tsx

@@ -0,0 +1,30 @@
+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 IconClustered: 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='square'
+      strokeWidth={2}
+      d='M4 8v11a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1h-1'
+    />,
+    <path
+      fill='currentColor'
+      d='M3 2.5a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-2ZM7 8a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1V8Zm6 0a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1V8Zm-6 6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1v-2Z'
+    />
+  )
+)

package/react/credit-card.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 IconCreditCard: 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='M4 10v6a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3v-6M4 10V8a3 3 0 0 1 3-3h10a3 3 0 0 1 3 3v2M4 10h16M7 15h2'
+    />
+  )
+)

package/react/crop.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 IconCrop: 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
+        fill='currentColor'
+        d='M7 2a1 1 0 0 0-2 0h2Zm15 17a1 1 0 1 0 0-2v2ZM10 5a1 1 0 0 0 0 2V5Zm7 9a1 1 0 1 0 2 0h-2ZM2 5a1 1 0 0 0 0 2V5Zm4 2h1V5H6v2Zm11 15a1 1 0 1 0 2 0h-2ZM5 2v15h2V2H5Zm5 5h7V5h-7v2Zm7 0v7h2V7h-2ZM2 7h4V5H2v2Zm5 12h11v-2H7v2Zm11 0h4v-2h-4v2Zm1 3v-4h-2v4h2ZM17 7h2a2 2 0 0 0-2-2v2ZM5 17a2 2 0 0 0 2 2v-2H5Z'
+      />
+    </g>,
+    <defs>
+      <clipPath id='a'>
+        <path d='M0 0h24v24H0z' />
+      </clipPath>
+    </defs>
+  )
+)