@toptal/picasso-icons 1.9.0 → 1.10.1-alpha-PF-235-add-sidebar-icons-2c38b1d32.1

package/src/Icon/DashboardResponsive.tsx

@@ -0,0 +1,19 @@
+import { useScreens } from '@toptal/picasso-provider'
+import React from 'react'
+
+import Dashboard16 from './Dashboard16'
+import Dashboard24 from './Dashboard24'
+import type { Props } from './Dashboard16'
+
+const DashboardResponsive = (props: Props) => {
+  const screens = useScreens()
+
+  return screens(
+    {
+      xl: <Dashboard16 {...props} />,
+    },
+    <Dashboard24 {...props} />
+  ) as JSX.Element
+}
+
+export default DashboardResponsive

package/src/Icon/Location16.tsx

@@ -0,0 +1,61 @@
+import type { Ref } from 'react'
+import React, { forwardRef } from 'react'
+import cx from 'classnames'
+import { makeStyles } from '@material-ui/core/styles'
+import type { StandardProps } from '@toptal/picasso-shared'
+import { kebabToCamelCase } from '@toptal/picasso-utils'
+
+import styles from './styles'
+const BASE_SIZE = 16
+
+type ScaleType = 1 | 2 | 3 | 4
+export interface Props extends StandardProps {
+  scale?: ScaleType
+  color?: string
+  base?: number
+}
+const useStyles = makeStyles(styles, {
+  name: 'PicassoSvgLocation16',
+})
+const SvgLocation16 = forwardRef(function SvgLocation16(
+  props: Props,
+  ref: Ref<SVGSVGElement>
+) {
+  const {
+    className,
+    style = {},
+    color,
+    scale,
+    base,
+    'data-testid': testId,
+  } = props
+  const classes: Record<string, string> = useStyles(props)
+  const classNames = [classes.root, className]
+  const scaledSize = base || BASE_SIZE * Math.ceil(scale || 1)
+  const colorClassName = kebabToCamelCase(`${color}`)
+
+  if (classes[colorClassName]) {
+    classNames.push(classes[colorClassName])
+  }
+
+  const svgStyle = {
+    minWidth: `${scaledSize}px`,
+    minHeight: `${scaledSize}px`,
+    ...style,
+  }
+
+  return (
+    <svg
+      viewBox='0 0 16 16'
+      className={cx(...classNames)}
+      style={svgStyle}
+      ref={ref}
+      data-testid={testId}
+    >
+      <path d='M12.97 8C12.73 5.37 10.63 3.26 8 3.03V1H7v2.03C4.37 3.27 2.26 5.37 2.03 8H0v1h2.03c.24 2.63 2.34 4.74 4.97 4.97V16h1v-2.03c2.63-.24 4.74-2.34 4.97-4.97H15V8h-2.03Zm-1.02 1A4.466 4.466 0 0 1 8 12.95V11H7v1.95A4.466 4.466 0 0 1 3.05 9H5V8H3.05A4.466 4.466 0 0 1 7 4.05V6h1V4.05c2.08.23 3.72 1.87 3.95 3.95H10v1h1.95Z' />
+    </svg>
+  )
+})
+
+SvgLocation16.displayName = 'SvgLocation16'
+export default SvgLocation16

package/src/Icon/Location24.tsx

@@ -0,0 +1,61 @@
+import type { Ref } from 'react'
+import React, { forwardRef } from 'react'
+import cx from 'classnames'
+import { makeStyles } from '@material-ui/core/styles'
+import type { StandardProps } from '@toptal/picasso-shared'
+import { kebabToCamelCase } from '@toptal/picasso-utils'
+
+import styles from './styles'
+const BASE_SIZE = 24
+
+type ScaleType = 1 | 2 | 3 | 4
+export interface Props extends StandardProps {
+  scale?: ScaleType
+  color?: string
+  base?: number
+}
+const useStyles = makeStyles(styles, {
+  name: 'PicassoSvgLocation24',
+})
+const SvgLocation24 = forwardRef(function SvgLocation24(
+  props: Props,
+  ref: Ref<SVGSVGElement>
+) {
+  const {
+    className,
+    style = {},
+    color,
+    scale,
+    base,
+    'data-testid': testId,
+  } = props
+  const classes: Record<string, string> = useStyles(props)
+  const classNames = [classes.root, className]
+  const scaledSize = base || BASE_SIZE * Math.ceil(scale || 1)
+  const colorClassName = kebabToCamelCase(`${color}`)
+
+  if (classes[colorClassName]) {
+    classNames.push(classes[colorClassName])
+  }
+
+  const svgStyle = {
+    minWidth: `${scaledSize}px`,
+    minHeight: `${scaledSize}px`,
+    ...style,
+  }
+
+  return (
+    <svg
+      viewBox='0 0 24 24'
+      className={cx(...classNames)}
+      style={svgStyle}
+      ref={ref}
+      data-testid={testId}
+    >
+      <path d='M19.97 12A8.491 8.491 0 0 0 12 4.03V1h-1v3.03A8.491 8.491 0 0 0 3.03 12H0v1h3.03A8.491 8.491 0 0 0 11 20.97V24h1v-3.03A8.491 8.491 0 0 0 19.97 13H23v-1h-3.03Zm-1 1c-.25 3.74-3.24 6.73-6.97 6.97V17h-1v2.97c-3.74-.25-6.73-3.24-6.97-6.97H7v-1H4.03C4.28 8.26 7.27 5.27 11 5.03V8h1V5.03c3.74.25 6.73 3.24 6.97 6.97H16v1h2.97Z' />
+    </svg>
+  )
+})
+
+SvgLocation24.displayName = 'SvgLocation24'
+export default SvgLocation24

package/src/Icon/LocationResponsive.tsx

@@ -0,0 +1,19 @@
+import { useScreens } from '@toptal/picasso-provider'
+import React from 'react'
+
+import Location16 from './Location16'
+import Location24 from './Location24'
+import type { Props } from './Location16'
+
+const LocationResponsive = (props: Props) => {
+  const screens = useScreens()
+
+  return screens(
+    {
+      xl: <Location16 {...props} />,
+    },
+    <Location24 {...props} />
+  ) as JSX.Element
+}
+
+export default LocationResponsive

package/src/Icon/Memo16.tsx

@@ -0,0 +1,62 @@
+import type { Ref } from 'react'
+import React, { forwardRef } from 'react'
+import cx from 'classnames'
+import { makeStyles } from '@material-ui/core/styles'
+import type { StandardProps } from '@toptal/picasso-shared'
+import { kebabToCamelCase } from '@toptal/picasso-utils'
+
+import styles from './styles'
+const BASE_SIZE = 16
+
+type ScaleType = 1 | 2 | 3 | 4
+export interface Props extends StandardProps {
+  scale?: ScaleType
+  color?: string
+  base?: number
+}
+const useStyles = makeStyles(styles, {
+  name: 'PicassoSvgMemo16',
+})
+const SvgMemo16 = forwardRef(function SvgMemo16(
+  props: Props,
+  ref: Ref<SVGSVGElement>
+) {
+  const {
+    className,
+    style = {},
+    color,
+    scale,
+    base,
+    'data-testid': testId,
+  } = props
+  const classes: Record<string, string> = useStyles(props)
+  const classNames = [classes.root, className]
+  const scaledSize = base || BASE_SIZE * Math.ceil(scale || 1)
+  const colorClassName = kebabToCamelCase(`${color}`)
+
+  if (classes[colorClassName]) {
+    classNames.push(classes[colorClassName])
+  }
+
+  const svgStyle = {
+    minWidth: `${scaledSize}px`,
+    minHeight: `${scaledSize}px`,
+    ...style,
+  }
+
+  return (
+    <svg
+      data-name='Layer 2'
+      viewBox='0 0 16 16'
+      className={cx(...classNames)}
+      style={svgStyle}
+      ref={ref}
+      data-testid={testId}
+    >
+      <path d='M0 1v14h16V1H0Zm15 13H1V2h14v12ZM3 4h4v1H3zm0 3h10v1H3zm0 2h10v1H3zm0 2h10v1H3z' />
+    </svg>
+  )
+})
+
+SvgMemo16.displayName = 'SvgMemo16'
+export default SvgMemo16

package/src/Icon/Memo24.tsx

@@ -0,0 +1,62 @@
+import type { Ref } from 'react'
+import React, { forwardRef } from 'react'
+import cx from 'classnames'
+import { makeStyles } from '@material-ui/core/styles'
+import type { StandardProps } from '@toptal/picasso-shared'
+import { kebabToCamelCase } from '@toptal/picasso-utils'
+
+import styles from './styles'
+const BASE_SIZE = 24
+
+type ScaleType = 1 | 2 | 3 | 4
+export interface Props extends StandardProps {
+  scale?: ScaleType
+  color?: string
+  base?: number
+}
+const useStyles = makeStyles(styles, {
+  name: 'PicassoSvgMemo24',
+})
+const SvgMemo24 = forwardRef(function SvgMemo24(
+  props: Props,
+  ref: Ref<SVGSVGElement>
+) {
+  const {
+    className,
+    style = {},
+    color,
+    scale,
+    base,
+    'data-testid': testId,
+  } = props
+  const classes: Record<string, string> = useStyles(props)
+  const classNames = [classes.root, className]
+  const scaledSize = base || BASE_SIZE * Math.ceil(scale || 1)
+  const colorClassName = kebabToCamelCase(`${color}`)
+
+  if (classes[colorClassName]) {
+    classNames.push(classes[colorClassName])
+  }
+
+  const svgStyle = {
+    minWidth: `${scaledSize}px`,
+    minHeight: `${scaledSize}px`,
+    ...style,
+  }
+
+  return (
+    <svg
+      data-name='Layer 2'
+      viewBox='0 0 24 24'
+      className={cx(...classNames)}
+      style={svgStyle}
+      ref={ref}
+      data-testid={testId}
+    >
+      <path d='M0 2v20h24V2H0Zm23 19H1V3h22v18ZM4 6h7v1H4zm0 5h16v1H4zm0 3h16v1H4zm0 3h16v1H4z' />
+    </svg>
+  )
+})
+
+SvgMemo24.displayName = 'SvgMemo24'
+export default SvgMemo24

package/src/Icon/MemoResponsive.tsx

@@ -0,0 +1,19 @@
+import { useScreens } from '@toptal/picasso-provider'
+import React from 'react'
+
+import Memo16 from './Memo16'
+import Memo24 from './Memo24'
+import type { Props } from './Memo16'
+
+const MemoResponsive = (props: Props) => {
+  const screens = useScreens()
+
+  return screens(
+    {
+      xl: <Memo16 {...props} />,
+    },
+    <Memo24 {...props} />
+  ) as JSX.Element
+}
+
+export default MemoResponsive

package/src/Icon/Objective16.tsx

@@ -0,0 +1,61 @@
+import type { Ref } from 'react'
+import React, { forwardRef } from 'react'
+import cx from 'classnames'
+import { makeStyles } from '@material-ui/core/styles'
+import type { StandardProps } from '@toptal/picasso-shared'
+import { kebabToCamelCase } from '@toptal/picasso-utils'
+
+import styles from './styles'
+const BASE_SIZE = 16
+
+type ScaleType = 1 | 2 | 3 | 4
+export interface Props extends StandardProps {
+  scale?: ScaleType
+  color?: string
+  base?: number
+}
+const useStyles = makeStyles(styles, {
+  name: 'PicassoSvgObjective16',
+})
+const SvgObjective16 = forwardRef(function SvgObjective16(
+  props: Props,
+  ref: Ref<SVGSVGElement>
+) {
+  const {
+    className,
+    style = {},
+    color,
+    scale,
+    base,
+    'data-testid': testId,
+  } = props
+  const classes: Record<string, string> = useStyles(props)
+  const classNames = [classes.root, className]
+  const scaledSize = base || BASE_SIZE * Math.ceil(scale || 1)
+  const colorClassName = kebabToCamelCase(`${color}`)
+
+  if (classes[colorClassName]) {
+    classNames.push(classes[colorClassName])
+  }
+
+  const svgStyle = {
+    minWidth: `${scaledSize}px`,
+    minHeight: `${scaledSize}px`,
+    ...style,
+  }
+
+  return (
+    <svg
+      viewBox='0 0 16 16'
+      className={cx(...classNames)}
+      style={svgStyle}
+      ref={ref}
+      data-testid={testId}
+    >
+      <path d='m15.42 3.29-2.02-.68-.68-2.02-2.71 2.71v2L6.66 8.65c-.2.2-.2.51 0 .71a.485.485 0 0 0 .7 0l2.09-2.09c.36.5.56 1.1.56 1.73 0 1.65-1.35 3-3 3s-3-1.35-3-3a3.009 3.009 0 0 1 3.82-2.89l.27-.96A3.999 3.999 0 0 0 3.01 9c0 2.21 1.79 4 4 4s4-1.79 4-4c0-.9-.31-1.74-.85-2.44l.56-.56h1.47c.53.91.82 1.94.82 3 0 3.31-2.69 6-6 6S1 12.31 1 9a6.005 6.005 0 0 1 7.62-5.78l.27-.96C8.28 2.09 7.65 2 7.01 2 3.14 2 0 5.14 0 9s3.14 7 7 7 7-3.14 7-7c0-1.2-.32-2.36-.9-3.4l2.32-2.32ZM12.29 5H11V3.71l1.28-1.28.33.97.97.33-1.28 1.28Z' />
+    </svg>
+  )
+})
+
+SvgObjective16.displayName = 'SvgObjective16'
+export default SvgObjective16

package/src/Icon/Objective24.tsx

@@ -0,0 +1,61 @@
+import type { Ref } from 'react'
+import React, { forwardRef } from 'react'
+import cx from 'classnames'
+import { makeStyles } from '@material-ui/core/styles'
+import type { StandardProps } from '@toptal/picasso-shared'
+import { kebabToCamelCase } from '@toptal/picasso-utils'
+
+import styles from './styles'
+const BASE_SIZE = 24
+
+type ScaleType = 1 | 2 | 3 | 4
+export interface Props extends StandardProps {
+  scale?: ScaleType
+  color?: string
+  base?: number
+}
+const useStyles = makeStyles(styles, {
+  name: 'PicassoSvgObjective24',
+})
+const SvgObjective24 = forwardRef(function SvgObjective24(
+  props: Props,
+  ref: Ref<SVGSVGElement>
+) {
+  const {
+    className,
+    style = {},
+    color,
+    scale,
+    base,
+    'data-testid': testId,
+  } = props
+  const classes: Record<string, string> = useStyles(props)
+  const classNames = [classes.root, className]
+  const scaledSize = base || BASE_SIZE * Math.ceil(scale || 1)
+  const colorClassName = kebabToCamelCase(`${color}`)
+
+  if (classes[colorClassName]) {
+    classNames.push(classes[colorClassName])
+  }
+
+  const svgStyle = {
+    minWidth: `${scaledSize}px`,
+    minHeight: `${scaledSize}px`,
+    ...style,
+  }
+
+  return (
+    <svg
+      viewBox='0 0 24.01 24'
+      className={cx(...classNames)}
+      style={svgStyle}
+      ref={ref}
+      data-testid={testId}
+    >
+      <path d='m23.03 4.69-3.09-.62-.62-3.09-4.31 4.31v3l-4.85 4.85c-.2.2-.2.51 0 .71a.485.485 0 0 0 .7 0L14 10.71c.63.79.99 1.76.99 2.78 0 2.48-2.01 4.5-4.48 4.5s-4.48-2.02-4.48-4.5 2.01-4.5 4.48-4.5c.41 0 .82.06 1.22.17L12 8.2c-.48-.14-.98-.21-1.49-.21-3.02 0-5.48 2.47-5.48 5.5s2.46 5.5 5.48 5.5 5.48-2.47 5.48-5.5c0-1.3-.46-2.51-1.28-3.49l1.01-1.01h3l.09-.09a9.42 9.42 0 0 1 1.21 4.59c0 5.24-4.27 9.5-9.51 9.5S1 18.74 1 13.5 5.27 4 10.51 4c.87 0 1.73.12 2.56.35l.27-.96c-.92-.26-1.87-.39-2.83-.39C4.72 3 0 7.71 0 13.5S4.72 24 10.51 24s10.51-4.71 10.51-10.5c0-1.89-.52-3.71-1.48-5.33l3.48-3.48ZM18.31 8h-2.29V5.71l2.69-2.69.38 1.91 1.91.38L18.31 8Z' />
+    </svg>
+  )
+})
+
+SvgObjective24.displayName = 'SvgObjective24'
+export default SvgObjective24

package/src/Icon/ObjectiveResponsive.tsx

@@ -0,0 +1,19 @@
+import { useScreens } from '@toptal/picasso-provider'
+import React from 'react'
+
+import Objective16 from './Objective16'
+import Objective24 from './Objective24'
+import type { Props } from './Objective16'
+
+const ObjectiveResponsive = (props: Props) => {
+  const screens = useScreens()
+
+  return screens(
+    {
+      xl: <Objective16 {...props} />,
+    },
+    <Objective24 {...props} />
+  ) as JSX.Element
+}
+
+export default ObjectiveResponsive

package/src/Icon/PendingQueue16.tsx

@@ -0,0 +1,61 @@
+import type { Ref } from 'react'
+import React, { forwardRef } from 'react'
+import cx from 'classnames'
+import { makeStyles } from '@material-ui/core/styles'
+import type { StandardProps } from '@toptal/picasso-shared'
+import { kebabToCamelCase } from '@toptal/picasso-utils'
+
+import styles from './styles'
+const BASE_SIZE = 16
+
+type ScaleType = 1 | 2 | 3 | 4
+export interface Props extends StandardProps {
+  scale?: ScaleType
+  color?: string
+  base?: number
+}
+const useStyles = makeStyles(styles, {
+  name: 'PicassoSvgPendingQueue16',
+})
+const SvgPendingQueue16 = forwardRef(function SvgPendingQueue16(
+  props: Props,
+  ref: Ref<SVGSVGElement>
+) {
+  const {
+    className,
+    style = {},
+    color,
+    scale,
+    base,
+    'data-testid': testId,
+  } = props
+  const classes: Record<string, string> = useStyles(props)
+  const classNames = [classes.root, className]
+  const scaledSize = base || BASE_SIZE * Math.ceil(scale || 1)
+  const colorClassName = kebabToCamelCase(`${color}`)
+
+  if (classes[colorClassName]) {
+    classNames.push(classes[colorClassName])
+  }
+
+  const svgStyle = {
+    minWidth: `${scaledSize}px`,
+    minHeight: `${scaledSize}px`,
+    ...style,
+  }
+
+  return (
+    <svg
+      viewBox='0 0 16 16'
+      className={cx(...classNames)}
+      style={svgStyle}
+      ref={ref}
+      data-testid={testId}
+    >
+      <path d='M10 13h2.18c-1.22 1.26-2.9 2-4.68 2C3.92 15 1 12.08 1 8.5c0-.31.02-.62.07-.93l-.99-.14C.03 7.78 0 8.14 0 8.5 0 12.64 3.36 16 7.5 16c2.1 0 4.09-.89 5.5-2.41V16h1v-4h-4v1ZM5 8.5C5 7.67 4.33 7 3.5 7S2 7.67 2 8.5 2.67 10 3.5 10 5 9.33 5 8.5Zm-2 0c0-.28.22-.5.5-.5s.5.22.5.5-.22.5-.5.5-.5-.22-.5-.5Zm6 0C9 7.67 8.33 7 7.5 7S6 7.67 6 8.5 6.67 10 7.5 10 9 9.33 9 8.5Zm-2 0c0-.28.22-.5.5-.5s.5.22.5.5-.22.5-.5.5-.5-.22-.5-.5Zm6 0c0-.83-.67-1.5-1.5-1.5S10 7.67 10 8.5s.67 1.5 1.5 1.5S13 9.33 13 8.5Zm-2 0c0-.28.22-.5.5-.5s.5.22.5.5-.22.5-.5.5-.5-.22-.5-.5ZM7.5 1C5.4 1 3.41 1.89 2 3.41V1H1v4h4V4H2.82c1.22-1.26 2.9-2 4.68-2C11.08 2 14 4.92 14 8.5c0 .31-.02.62-.07.93l.99.14c.05-.35.08-.71.08-1.07C15 4.36 11.64 1 7.5 1Z' />
+    </svg>
+  )
+})
+
+SvgPendingQueue16.displayName = 'SvgPendingQueue16'
+export default SvgPendingQueue16

package/src/Icon/PendingQueue24.tsx

@@ -0,0 +1,61 @@
+import type { Ref } from 'react'
+import React, { forwardRef } from 'react'
+import cx from 'classnames'
+import { makeStyles } from '@material-ui/core/styles'
+import type { StandardProps } from '@toptal/picasso-shared'
+import { kebabToCamelCase } from '@toptal/picasso-utils'
+
+import styles from './styles'
+const BASE_SIZE = 24
+
+type ScaleType = 1 | 2 | 3 | 4
+export interface Props extends StandardProps {
+  scale?: ScaleType
+  color?: string
+  base?: number
+}
+const useStyles = makeStyles(styles, {
+  name: 'PicassoSvgPendingQueue24',
+})
+const SvgPendingQueue24 = forwardRef(function SvgPendingQueue24(
+  props: Props,
+  ref: Ref<SVGSVGElement>
+) {
+  const {
+    className,
+    style = {},
+    color,
+    scale,
+    base,
+    'data-testid': testId,
+  } = props
+  const classes: Record<string, string> = useStyles(props)
+  const classNames = [classes.root, className]
+  const scaledSize = base || BASE_SIZE * Math.ceil(scale || 1)
+  const colorClassName = kebabToCamelCase(`${color}`)
+
+  if (classes[colorClassName]) {
+    classNames.push(classes[colorClassName])
+  }
+
+  const svgStyle = {
+    minWidth: `${scaledSize}px`,
+    minHeight: `${scaledSize}px`,
+    ...style,
+  }
+
+  return (
+    <svg
+      viewBox='0 0 24 24'
+      className={cx(...classNames)}
+      style={svgStyle}
+      ref={ref}
+      data-testid={testId}
+    >
+      <path d='M15 19h3.98c-1.88 2.51-4.8 4-7.98 4-5.51 0-10-4.49-10-10 0-.8.1-1.61.29-2.38l-.97-.24C.11 11.23.01 12.11.01 13c0 6.07 4.93 11 11 11 3.63 0 6.94-1.76 9-4.71V24h1v-6h-6v1Zm-8-6c0-1.1-.9-2-2-2s-2 .9-2 2 .9 2 2 2 2-.9 2-2Zm-3 0c0-.55.45-1 1-1s1 .45 1 1-.45 1-1 1-1-.45-1-1Zm9 0c0-1.1-.9-2-2-2s-2 .9-2 2 .9 2 2 2 2-.9 2-2Zm-3 0c0-.55.45-1 1-1s1 .45 1 1-.45 1-1 1-1-.45-1-1Zm9 0c0-1.1-.9-2-2-2s-2 .9-2 2 .9 2 2 2 2-.9 2-2Zm-3 0c0-.55.45-1 1-1s1 .45 1 1-.45 1-1 1-1-.45-1-1ZM11 2C7.94 2 5.08 3.26 3 5.47V1H2v6h6V6H3.86C5.73 4.08 8.28 3 11 3c5.51 0 10 4.49 10 10 0 .8-.1 1.61-.29 2.38l.97.24c.21-.85.31-1.73.31-2.62 0-6.07-4.93-11-11-11Z' />
+    </svg>
+  )
+})
+
+SvgPendingQueue24.displayName = 'SvgPendingQueue24'
+export default SvgPendingQueue24

package/src/Icon/PendingQueueResponsive.tsx

@@ -0,0 +1,19 @@
+import { useScreens } from '@toptal/picasso-provider'
+import React from 'react'
+
+import PendingQueue16 from './PendingQueue16'
+import PendingQueue24 from './PendingQueue24'
+import type { Props } from './PendingQueue16'
+
+const PendingQueueResponsive = (props: Props) => {
+  const screens = useScreens()
+
+  return screens(
+    {
+      xl: <PendingQueue16 {...props} />,
+    },
+    <PendingQueue24 {...props} />
+  ) as JSX.Element
+}
+
+export default PendingQueueResponsive

package/src/Icon/Playbook16.tsx

@@ -0,0 +1,61 @@
+import type { Ref } from 'react'
+import React, { forwardRef } from 'react'
+import cx from 'classnames'
+import { makeStyles } from '@material-ui/core/styles'
+import type { StandardProps } from '@toptal/picasso-shared'
+import { kebabToCamelCase } from '@toptal/picasso-utils'
+
+import styles from './styles'
+const BASE_SIZE = 16
+
+type ScaleType = 1 | 2 | 3 | 4
+export interface Props extends StandardProps {
+  scale?: ScaleType
+  color?: string
+  base?: number
+}
+const useStyles = makeStyles(styles, {
+  name: 'PicassoSvgPlaybook16',
+})
+const SvgPlaybook16 = forwardRef(function SvgPlaybook16(
+  props: Props,
+  ref: Ref<SVGSVGElement>
+) {
+  const {
+    className,
+    style = {},
+    color,
+    scale,
+    base,
+    'data-testid': testId,
+  } = props
+  const classes: Record<string, string> = useStyles(props)
+  const classNames = [classes.root, className]
+  const scaledSize = base || BASE_SIZE * Math.ceil(scale || 1)
+  const colorClassName = kebabToCamelCase(`${color}`)
+
+  if (classes[colorClassName]) {
+    classNames.push(classes[colorClassName])
+  }
+
+  const svgStyle = {
+    minWidth: `${scaledSize}px`,
+    minHeight: `${scaledSize}px`,
+    ...style,
+  }
+
+  return (
+    <svg
+      viewBox='0 0 16 16'
+      className={cx(...classNames)}
+      style={svgStyle}
+      ref={ref}
+      data-testid={testId}
+    >
+      <path d='M15.8 12.61 10 7.38V11h-.84c-.42 0-.82.12-1.16.32V4c0-1.33.67-2 1.5-2H14v8h1V1H9.5c-.82 0-1.54.39-2 1-.46-.61-1.18-1-2-1H0v11h5.5c.83 0 1.5.67 1.5 2h1c0-1.33.67-2 1.5-2h.5v3.28l2.46-1.14.68 1.52.91-.41-.68-1.54 2.43-1.12ZM7 11.73c-.43-.45-1.02-.73-1.68-.73H1V2h4.5C6.33 2 7 2.67 7 4v7.73Zm4 1.99V9.63l3 2.71-3 1.39Z' />
+    </svg>
+  )
+})
+
+SvgPlaybook16.displayName = 'SvgPlaybook16'
+export default SvgPlaybook16